:root {
    --background: url(/aesthetic/assets/background.webp);
    --colourA: hsl(240, 100.0%, 98.6%);/*ghostwhite*/
    --colourA1: hsl(140, 100.0%, 98.0%);
    --colourB: hsl(180, 100.0%, 25.1%); /*teal*/
    --colourC: hsl(33, 90.9%, 21.6%); /*a nice brown*/
    --colourD: hsl(3, 6%, 9%); /* nikola tesla black */
    --font_body: 'Inter', sans-serif;
    --font-pt: 20px;
    --reading-width: 40rem;
    /* sizing */
    --xs: 0.5rem;
    --x: 1rem;
    --s: 2rem;
    --m: 3rem;
    --ml: 5rem;
    --l: 8rem;
    --xl: 13rem;
    --xxl: 21rem;
    ;

}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background: var(--colourA);
    font-family: var(--font_body);
    font-size: var(--font-pt);
    color: var(--colourD);
}

a {
    color: var(--colourB);
    text-decoration: none;
}

a.current {
    background: var(--colourB);
    color: var(--colourA)
}

h1 {
    font-weight: 600;
    font-size: calc(var(--xs) + 2vh);
}

.invisible {
    opacity: 0;
}

.swoosh-in {
    animation: swoosh 1s linear;
    --webkit-animation: swoosh 4s linear infinite;

}
header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--xs);
    background: var(--colourA);
    position: fixed;
    width: 100%;
}

.sidebar {
    transform-origin: right;
    transform: rotate(-90deg);
    position: fixed;
    top: 0;
    right: calc(100vw - 2rem);
    background: unset;
    width: 90vh;
    justify-content: center;
    animation: fadein 2s;
}


nav {
    margin-bottom: var(--xs);
}

nav a {
    padding-left: calc(var(--s)/2);
    padding-right: var(--x);
}


nav:hover > a {
    opacity: 0.25;
}

nav:hover > a:hover {
    opacity: 1;
    filter: hue-rotate(90deg);
}

section#introduction {
    background: var(--background), linear-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.33));
    background-blend-mode: overlay;
    height: 100vh;
    max-width: 100%;
    margin-bottom: var(--m);
}

.hero {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.hero p.tagline {
    text-align: center;
    color: var(--colourA);
    text-shadow: var(--colourD) 5px 0 7px;
    font-size: calc(1rem + 5vw);
}

section:not(#introduction){
    font-size: 1.5rem;
    padding-top: var(--s);
    font-weight: 200;
    text-align: right;
}
section:not(#introduction) > * {
    max-width: calc(var(--reading-width) * 1.68 + var(--xs));
    margin: auto;
    padding-left: var(--m);
    padding-right: var(--m);
}

section ul {
    text-align: left;
}

section h2 {
    text-align: right;
    font-weight: 300;
    padding-top: var(--s);
    padding-bottom: var(--xs);
    /* grid-column: 2 / -1; */
}

section img {
    max-width: calc(100% - (var(--s) * 2));
    margin: auto;
}

section div.content {
    text-align: right;
    display: flex;
    padding: var(--xs);
    align-items: flex-start;
}

section strong {
    display: block;
    font-weight: 800;
    text-align: center;
    width: 100%;
    font-variant-caps: small-caps;
    padding-top: calc(var(--s) * 2);
    padding-bottom: var(--ml);
}

section div.content img {
    max-width: 50%;
    padding-left: var(--s);
    padding-right: var(--s);

}

section:nth-child(odd) {
    background: var(--colourA1);
}

section:nth-child(odd) div.content {
    flex-direction: row-reverse;
}

section:nth-child(odd)  h2 ,
section:nth-child(odd)  .words {
    text-align: left;
}

div.content .words {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-flow: column;
    height: 100%;
}

.words ul {
    margin-top: var(--s);
    width: 100%;
    text-align: left;
    padding-left: var(--s);
}

footer {
    background: var(--colourD);
    background-image: url('/aesthetic/assets/background.jpg');
    color: var(--colourA);
    background-position: left;
    font-weight: 600;
    padding: var(--m);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 667px) {
    body {
        --font-pt: 15px;
    }
    header {
        justify-content: center;
    }
    section:not(#introduction) {
        font-size: 1.2rem;
        padding: 0.75rem;
    }
    section:not(#introduction) > * {
        text-align: left;
        padding-left: unset;
        padding-right: unset;
    }
    section:not(#introduction) h2 {
        padding-top: calc(var(--m) + 1rem);
        margin-top: 0;
    }
    div.content {
        flex-flow: column;
    }
    section:nth-child(2n+1) div.content {
        flex-flow: column;
        flex-direction: column;
    }

    section div.content img {
        max-width: 100%;
    }
    div.words {
        margin-top: var(--s);
    }
.sidebar {
    transform-origin: unset;
    transform: unset;
    right: unset;
    background: var(--colourA);
    width: 100%;
    animation: fadein 2s;
}

}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes swoosh {
    from {
        opacity: 0;
        transform: translateY(var(--ml));
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}