:root {
    --color-bg: #454071;
    --color-text: #fff;
    --color-link: #FF6623;
    --color-text-light: #AAA;

    --admin-bar--font-family: 'Roboto Mono', monospace;
}

body {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0 2rem;
    margin: 0 8px;
    overflow: auto;
    min-height: 100vh;
    background-color: var(--color-bg);
    font-family: 'Roboto Mono', monospace;
}

div#wrapper {
    color: var(--color-text);
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "header header"
        "content aside"
        "footer footer";
}

div#wrapper ul#carousel, div#wrapper nav ul {
    padding: 0px;
}

div#wrapper a {
    color: var(--color-link);
    text-decoration: underline solid transparent;
    transition: text-decoration 0.2s ease;
}

div#wrapper a:hover {
    text-decoration: underline solid var(--color-link);
}

div#wrapper div#header-wrapper {
    grid-area: header;
    display: flex;
}

div#wrapper header {
    align-self: center;
}

div#wrapper a#title {
    color: var(--color-text);
    text-decoration: underline solid transparent;
    transition: text-decoration 0.2s ease;
    font-size: 150%;
}

div#wrapper a.header {
    color: var(--color-text);
    text-decoration: underline solid transparent;
    transition: text-decoration 0.2s ease;
}

div#wrapper a#title:hover, div#wrapper a.header:hover {
    text-decoration: underline solid var(--color-text);
}

div#wrapper h1 {
    font-weight: bold;
}

div#wrapper h2 {
    font-weight: 500;
}

div#wrapper div#text-wrapper {
    grid-area: content;
    max-width: 50vw;
    min-height: 555px;
    margin-right: 2rem;
}

div#wrapper div#aside-wrapper {
    grid-area: aside;
    max-width: 50vw;
    min-height: 555px;
    justify-self: left;
    align-self: center;
}

div#wrapper footer {
    grid-area: footer;
}

div#wrapper ul#carousel {
    display: flex;
    list-style: none;
    overflow: auto;
    scroll-snap-type: x mandatory;
    max-width: 800px;
    margin-left: 3vw;
}

div#wrapper ul#carousel li {
    align-self: self-end;
    flex-shrink: 0;
    scroll-snap-align: center;
}

div#wrapper nav {
    align-self: center;
}

div#wrapper nav ul {
    list-style: none;
    font-size: xx-large;
    font-weight: bold;
    margin-left: 30px;
}

div#wrapper nav ul li {
    display: inline;
    margin-right: 3px;
}

div#wrapper nav ul li a.active {
    display: none;
}

div#wrapper code {
    background-color: #333;
}

div#wrapper footer {
    display: flex;
}

div#wrapper footer p {
    color: var(--color-text-light);
    padding-right: 0.5em;
}

div#wrapper footer p a {     
    color: var(--color-text-light);
}

div#wrapper footer a:hover {
    text-decoration: underline solid var(--color-text-light);
}