:root {
    --color1: 104, 137, 0;   /* #688900  */
    --color2: 207, 215, 0;   /* #CFD700; */
    --color3: 231, 226, 248; /* #E7E2F8; */
    --color4: 187, 137, 236; /* #BB89EC; */
    --color5: 105, 15, 173;  /* #690FAD; */

    --accent: 124, 58, 237;
    --accent-gradient: linear-gradient(45deg, rgb(var(--color5)), rgba(var(--color1), 50%) , white 60%);
}

html, body {
    margin: 0;
    height: 100%;
}

html {
    font-family: 'Lato', system-ui, sans-serif;
    color: #F6F6F6;

    /* source: https://css-tricks.com/perfect-full-page-background-image/ */
    background: url(/img/bg/sierras.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /* backdrop-filter: saturate(1.6);
    background-blend-mode: saturation; */
}

body {
    font-family: 'Lato', system-ui, sans-serif;
}

main {
    height: 100%;
}

code {
    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}

.tagline {
    color: #F6F6F6;
    text-align: center;
    left: 0;
    right: 0;
    top: 50vh;
    width: 96%;
    margin: 0 auto 1vw;

    text-shadow: 0.5px 0.5px 0.5px rgba(100,100,100,30%);
}
.tagline p:first-child {
    font-size: 3vw;
}
.tagline p {
    font-size: 2vw;
}

@media screen and (max-width: 500px) {
    .tagline p:first-child {
        font-size: 4.6vw;
    }
    .tagline p {
        font-size: 4vw;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
nav {
    border-bottom: 0.5px solid white;
    backdrop-filter: blur(.9px) brightness(75%);
}

footer {
    backdrop-filter: blur(.9px) brightness(60%);
    width: 100%;
}

footer ul {
    margin-right: 1em;
}
footer li {
    padding: 1em .4em;
    float: right;
}