* {
    box-sizing: border-box;
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: url('/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
        url('/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
    display: flex;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
    color: #202020;
    background: radial-gradient(farthest-corner at 90% 50%, #9bd5ff5e 0%, transparent 90%), radial-gradient(farthest-corner at 10% 10%,    #ff95a8 0%,    #b5adff 100%);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;
}

/* for images or canvas elements that need "pixel" style rendering when scaled */
.pixel {
    image-rendering: optimizeSpeed;
    /* Older versions of FF  */
    image-rendering: -moz-crisp-edges;
    /* FF 6.0+               */
    image-rendering: -webkit-optimize-contrast;
    /* Safari                */
    image-rendering: -o-crisp-edges;
    /* Opera (12.02+) 	     */
    image-rendering: pixelated;
    /* Chrome, maybe others  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE                    */
}

.interactive {
    cursor: pointer;
}

nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.article nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex: 0 0 auto;
}

.article nav a {
    padding: 10px;
}

.article nav a:hover,
.article nav a:active {
    background: radial-gradient(farthest-corner at 90% 50%, #bbe2ffcf 0%, transparent 90%),
        radial-gradient(farthest-corner at 10% 10%, #ff4868 0%, #897cff 100%);
}

nav a.home {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    align-content: flex-start;
    padding: 6px;
    height: max(min(60px, 7vh), 30px);
    width: max(min(120px, 7vw), 30px);
    gap: 3px;
    border-radius: 2px;
    background: radial-gradient(farthest-corner at 90% 50%, #9bd5ff75 0%, transparent 90%), radial-gradient(farthest-corner at 10% 10%, #ff95a8 0%, #b5adff 100%);
    overflow: hidden;
    box-shadow: 0px 2px 3px 0px #00000029;
}

nav a.home .pseudo-link {
    flex: 0 1 auto;
    background-color: #ebebebcc;
    width: 24px;
    height: 13px;
}

nav a.home .pseudo-header {
    flex: 1 0 100%;
    background: #ebebebcc;
    height: 6px;
    margin: -6px;
}

nav a {
    text-decoration: none;
}

nav a:hover,
nav a:active {
    text-decoration: none;
    background-color: #cae3ed
}

.code,
code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0px;
}

pre .code,
pre.code,
pre code {
    display: block;
    white-space: pre-wrap;
    tab-size: 2;
    -moz-tab-size: 2;

    clear: both;

    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 7px;

    color: #e3e3e3;
    background-color: #404040;
    border-left: solid 6px #a3a3b2;
    margin-top: 0;
    margin-bottom: 2rem;
}

.code .comment,
code .comment {
    color: #27d17c;
}

figcaption {
    text-align: center;
}

b {
    font-weight: bold;
}

.warning {
    display: block;
    background-color: #834732;
    color: #ebebeb;
    padding: 15px 20px 15px 15px;
    border-left: 6px solid #ef6450;
    margin-top: 0;
    margin-bottom: 2rem;
}

.download {
    display: block;
    background-color: #a4daa4;
    padding: 15px 20px 15px 15px;
    border-left: 6px solid #1bac18;
    margin-top: 0;
    margin-bottom: 2rem;
}

.download a:link,
.download a:visited {
    color: #2C3977;
}

aside {
    display: block;
    background-color: #e3e3e3;
    padding: 15px 20px 15px 15px;
    border-left: 6px solid #b7b7b8;
    margin-top: 0;
    margin-bottom: 2rem;
}

nav .article-link-block {
    flex: 1 1 400px;
    display: flex;
    text-decoration: none;
    max-width: 380px;
    padding: 45px;
    background-color: #ebebeb70;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    box-shadow: 0px 2px 5px 0px #00000029;
}

.article-link-block:hover,
.article-link-block:active {
    background-color: #cae3ed;
}

.article-link-block h1,
.article-link-block h2 {
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #202020;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    margin: 0;
}

.article-link-block p {
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #202020;
    flex: 1 0 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
}

.home>header {
    border-radius: 0;
    max-width: none;
    display: flex;
    align-items: center;
}

header {
    display: flex;
    background-color: #ebebeb70;
    font-family: 'Roboto', sans-serif;
    padding: 20px 40px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    border-radius: 2px;
    box-shadow: 0px 2px 5px 0px #00000029;
}

header>div {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
}

header h1 {
    display: block;
    font-size: 1.5rem;
    text-align: left;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

header p {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

article {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 40px;
    background-color: #ebebeb70;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0px 2px 5px 0px #00000029;
}

section {
    display: block;
    margin: 0;
    padding: 0 60px 0;
}

footer {
    flex: 1 0 auto;
    display: flex;
    margin: 0;
    font-size: 0.6rem;
    font-weight: normal;
    font-style: normal;
    text-align: right;
    padding: 0 20px 5px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
    align-content: flex-end;
}

@media (max-width: 800px) {

    article,
    footer {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media (max-width: 600px) {

    article,
    footer {
        padding-left: 1em;
        padding-right: 1em;
    }
}

article a:link,
article a:visited {
    color: #1e6a9a;
}

article a:hover {
    color: #56afd0;
}

math {
    display: block;
    background-color: #a0c0cc;
    padding: 15px 20px 15px 15px;
    border-left: 6px solid #457cb3;
    margin: 10px 0;
}

article>p,
article>ul,
article>ol,
article>table
article>math {
    margin: 20px 0;
}

article h1,
article h2 {
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    color: #202020;
    font-weight: normal;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    clear: both;
    margin-top: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

article canvas,
article img,
article video {
    display: block;
    padding: 0;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
}

article canvas {
    background: #edeff3;
}

article table,
article tr,
article td {
    border-collapse: collapse;
}

article th {
    border-collapse: collapse;
    padding: 5px;
    text-align: left;
    font-weight: normal;
    font-size: 1rem;
}

table.gridded td,
table.gridded th {
    border: solid 1px #b7b7b8;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0px;
    font-weight: normal;
    padding: 3px;
}

article iframe {
    display: block;
    padding: 4px;
    border: solid 1px #b7b7b8;

    margin-left: auto;
    margin-right: auto;
    margin: 10px 0;
}

img figure {
    display: block;
    float: none;
    clear: none;
    width: auto;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
    margin: 10px 0;

    padding: 0;
}

.left {
    display: block;
    float: left;
    clear: left;
    max-width: 500px;

    margin: 10px 40px 10px 0;
}

.right {
    display: block;
    float: right;
    clear: right;
    max-width: 500px;

    margin: 10px 0 10px 40px;
}

/* within a figure only needs margin to separate from caption */
figure img,
figure canvas {
    margin: 0 0 10px;
}

/* -- Adjust images for narrow displays, bringing in the floaters */
@media (max-width: 800px) {

    .left,
    .right {
        display: block;
        float: none;
        clear: none;
        max-width: 100%;

        padding: 15px 0;

        margin-left: auto;
        margin-right: auto;
    }
}

/*	allows multiple images to be displayed that will appear on a single line if
	space allows, or spread nicely if not.
*/
.image-box {
    display: block;

    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;

    padding-top: 15px;
    padding-bottom: 15px;
}

.image-box>* {
    padding: 0;
    margin: 8px;
}

sup {
    font-size: 0.7rem;
    font-weight: normal;
    font-style: normal;
}

small {
    font-size: 0.6rem;
    font-weight: normal;
    font-style: normal;
    color: #202020;
}

.smallIcon {
    margin-left: 4px;
    padding: 0;
    border: none;
}

footer a:link,
footer a:visited {
    color: #2C3977;
    padding: 10px;
    text-decoration: none;
}

footer a:hover {
    color: #f5f5f5;
}

footer address {
    font-style: normal;
    margin: 0;
    padding: 0;
}