:root {
    /* Page Colors */
    --page-bg: #ffffff;
    --header-bg: #ffffff;
    --shadow: #c5d2d9;

    --link: #3537d3;
    --link-hover: #1c1d6c;
    --link-hover-bg: #bbbbed;

    --nav-bg: #384954;
    --nav-link: #ffffff;
    --nav-link-bg: #5d676e;

    --article-text: #262b2b;
    --article-bg: rgb(218, 234, 244);
    --article-header: #32646c;
    --article-header-bg: #eef6f7;

    /* Animation */
    --transition-time: 0.2s;

    /* Fonts */
    --content-reading-font: "AtkinsonHyperlegible", sans-serif;
    --header-font: "AtkinsonHyperlegible-Bold", sans-serif;
}

*,
::before,
::after {
    border: .1rem;
    margin: .1rem;
    padding: .1rem;
    box-sizing: border-box;
    font-family: inherit;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("AtkinsonHyperlegible Regular"),
        local("AtkinsonHyperlegible-Regular"),
        url(../fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src:
        local("AtkinsonHyperlegible Italic"),
        local("AtkinsonHyperlegible-Italic"),
        url(../fonts/AtkinsonHyperlegible-Italic.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        local("AtkinsonHyperlegible Bold"),
        local("AtkinsonHyperlegible-Bold"),
        url(../fonts/AtkinsonHyperlegible-Bold.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src:
        local("AtkinsonHyperlegible Bold Italic"),
        local("AtkinsonHyperlegible-BoldItalic"),
        url(../fonts/AtkinsonHyperlegible-BoldItalic.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

html {
    font-size: 120%;
    font-family: var(--content-reading-font);
}

body {
    background-color: var(--page-bg);
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "nav"
        "aside"
        "footer";
}

@media(mid-width: 768px) {
    body {
        grid-template-columns: repeat(2fr, 1fr);
        grid-template-areas:
            "header header"
            "aside  main"
            "nav    nav"
            "footer footer";
    }
}

@media (min-width: 1024px) {
    body {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        max-width: 1200px;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "header header header header header"
            "aside  main   main   main   nav"
            "footer footer footer footer footer";
        max-width: 85%;
        margin: 1rem auto !important;
        float: none !important;
    }
}

aside {
    grid-area: aside;
    color: var(--aside-text);
    background-color: var(--article-bg);
    display: inline-block;
    padding: 10px;
    border-radius: .5rem;
    /* border: 2px solid orange; */
}

main {
    grid-area: main;
    color: var(--main-text);
    background-color: var(--main-bg);
    padding: 10px;
    /* border: 2px solid orange; */
}

nav {
    grid-area: nav;
    color: var(--aside-text);
    background-color: var(--article-bg);
    display: inline-block;
    padding: 10px;
    border-radius: .5rem;
    /* border: 2px solid orange; */
}

header {
    grid-area: header;
    color: var(--header-text);
    background-color: var(--header-bg);
    padding: 0.5rem;
    justify-content: left;
    /* border: 2px solid orange; */
}

td {
    padding-left: 1rem;
    padding-right: 1rem;
}

th {
    background-color: #eee;
}

tr:nth-child(even) {
    background-color: #eee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding-top: 1rem;
    font-family: var(--header-font);
    color: rgb(22, 60, 35);
}

h1 {
    border-bottom: 1px solid;
}

a {
    color: rgb(86, 27, 248);
    text-decoration: underline;
}

p {
    padding-bottom: .75rem;
}

pre {
    background-color: rgb(242, 241, 241);
    padding: 1rem;
    border-radius: .25rem;
}

ul {
    padding-inline-start: 1rem;
}

.round_portrait {
    border-radius: 50%;
    display: block;
    margin: auto;
    padding-bottom: 1rem;
}


footer {

    grid-area: footer;
    position: relative;
    color: var(--footer-text);
    background-color: var(--footer-bg);
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    /* border: 2px solid blue; */
}