:root {
    --page-margin: 256px;
    --page-width: calc(100vw - 2*var(--page-margin));
    --bg-color: #101010;
    --content-height: calc(100vh - var(--nav-height));
    --image-height: 256px;
    --section-height: min(75vh, var(--content-height));
    --section-spacing: 80px;
    --ease-duration: 400ms;
    --typing-duration: 1500ms;
}

/* RESET BROWSER STYLESHEET */
a {
    text-decoration: none;
    color: inherit;
}
ul, ol {
    list-style: none;
    padding: 0px;
}
h1,h2,h3,h4,h5,h6,p,ul,ol {
    margin: 0px;
}
/* END RESET */

::selection {
    color: var(--text-color);
    background-color: var(--text-color-secondary);
}
html {
    scroll-behavior: smooth;
}
body {
    margin: var(--nav-height) var(--page-margin);
    width: var(--page-width);
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--fonts);
    font-size: var(--font-size-normal);
    letter-spacing: var(--letter-spacing);
}
header {
    min-height: var(--content-height);
}
header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 400;
    text-transform: uppercase;
    /* TODO: remove text-align here and in h2? */
    text-align: left;
    letter-spacing: 4px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
header h2 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    text-align: left;
}
header h2.alternate {
    display: none;
}
header .name {
    text-wrap: nowrap;
}
header .emdash {
    display: inline-block;
    margin: 0px 16px;
    width: 384px;
    height: 4px;
    background-color: var(--text-color);
    flex-grow: 1;
}
header p {
    margin: 32px 0px;
    font-size: var(--font-size-3xl);
}
header, section {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}
section {
    min-height: var(--section-height);
}
section h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
}
section h3 {
    font-size: var(--font-size-2xl);
    font-weight: 400;
}
section hr {
    color: var(--text-color);
    width: 128px;
    margin: 12px auto;
}
.item {
    margin: 128px 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.item .left {
    margin-right: var(--section-spacing);
    flex-grow: 1;
}
.item img {
    max-height: var(--image-height);
}
.item ul {
    list-style: disc;
    margin: 16px 0px;
    padding-left: 16px;
}
.item li {
    margin: 16px 0px;
}
header a, section a, section h2 a:hover {
    color: var(--text-color-secondary);
}
section h2 a {
    color: var(--text-color);
    transition: color ease var(--ease-duration);
}
code, pre {
    font-family: var(--monospace-fonts);
    font-size: var(--font-size-small);
}
canvas#rain {
    position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}
#contact {
    text-align: center;
}


@media screen and (max-width: 700px) {
    :root {
        --page-margin: 24px;
        --image-height: 128px;
    }
    .item {
        flex-direction: column-reverse;
    }
    .item .left {
        margin-right: unset;
    }
    .item .right {
        text-align: center;
        margin-bottom: var(--section-spacing);
    }
    section h2 {
        font-size: var(--font-size-2xl);
        text-align: center;
    }
    section h3 {
        font-size: var(--font-size-xl);
        text-align: center;
    }
    header {
        align-items: center;
    }
    header h1 {
        flex-direction: column;
    }
    header .emdash {
        width: 100%;
        margin: 16px 16px 0px;
    }
    header p {
        font-size: var(--font-size-xl);
        text-align: center;
    }
}