#title-span{
    background-color: black;

    display: flex;
    align-items: center;

    position: relative;
    z-index: 7;

    min-height: 66px;
    height: 7vh;
    padding: 7px;
}

nav{
    transform-origin: top;

    position: absolute;
    z-index: 1;
    width: 100%;

    padding: 0;
}
.nav-open {
    transform: scale(1, 1);
    transition: transform 0.4s cubic-bezier(0.04, 0.73, 0.38, 1);
}
.closed-nav{
    transform: scale(1, 0);
    pointer-events: none;
    transition: none;
}

nav > a{
    display: block;
    background-color: #5A6896;
    color: white;
    padding: 1em 1em 1em 1em;
    font-size: max(2vh, 0.8em);

    transition: 0.2s ease-in-out;
}
nav > a:hover{
    background-color: white;
    color: black;
}
nav > a:active{
    transition: 0.07s ease-out;
    box-shadow: inset 0 0 5em 0.3em black;

    color: white;
    background-color: #5A6896;
}

.nav-open ~ span{
    filter: blur(11px);

    transition: 0.4s cubic-bezier(0.04, 0.73, 0.38, 1);
}

h1, h2, h3, h4{
    margin: 0;
    padding: 0;
    color: white;

    font-family: sans-serif;
}
h1{
    font-size: min(7vw, 3em);

    text-align: center;
    margin-top: 1.5em;
    margin: auto;
}
h2{
    font-size: 2em;
}
h3{
    font-size: 1.4em;
}

body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    font-family: sans-serif;
}
body *{
    box-sizing: border-box;

    transition: 0.2s ease-in-out;
}

.text-section{
    background-color: RGB(25, 25, 25);
    color: white;
    width: 100%;
    display: block;
    padding: 1em 1em 1em 1em;

    will-change: filter;
}
.text-section:nth-of-type(even){
    background-color: RGB(223, 223, 223);
    color: black;
}

.text-section:nth-of-type(even) h2, .text-section:nth-of-type(even) h3{
    color: black;
}

.text-section:nth-of-type(odd) a:not(.anchor-button, .fa-bars), .image-section a:not(.anchor-button){
    color: lightskyblue
}
.text-section:nth-of-type(odd) a:visited:not(.anchor-button, .fa-bars), .image-section a:visited:not(.anchor-button){
    color: plum
}

.image-section{
    background-color: black;
    color: RGB(222, 222, 222);
    width: 100%;
    height: max-content;
    display: block;
    padding-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .666); */
}
.image-section h2, .image-section h3{
    color: white;
}

.boxed-text-section{
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 3vh;
}
.text-section > .boxed-text-section:nth-of-type(even){
    flex-wrap: wrap-reverse;
}

.logo, .logo-small{
    height: 100%;
    aspect-ratio: 1/1;
}
.logo{
    display: none;
}
.logo-small{
    display: inline-block;
    text-align: left;
    margin: 0;
    margin-right: 0.3em;
}

.fa-bars{
    position: absolute;
    right: 0.3em;
    top: 0.3em;
    font-size: 11vw;

    text-decoration: none;
    color: white;
}

iframe{
    display: block;
    margin: auto;
    margin-bottom: 1em;
    width: 98%;
	max-width: max(53em, 103vh);
    aspect-ratio: 16 / 9;
    max-height: 43vh;
}

img, figure{
    width: 100%;
    max-width: 777px;
    display: block;
    margin: auto;
}
figcaption{
    font-style: italic;
}

.anchor-button{
    font-size: 1.1em;
    padding: 0.8em 1.1em 0.8em 1.1em;

    background-color: #5A6896;
    color: white;

    border-radius: 0.2em;
}
.anchor-button:hover{
    background-color: #40538a;
}
.anchor-button:active{
    background-color: #001554;
}

.footer{
    text-align: center;
    background-color: black;
}
.footer a{
    font-size: 3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    text-decoration: none;
}
.footer p{
    font-size: smaller;
}

.vegan-burger {
    position: relative;
    display: inline;
    float: right;

    background: none;
    border: none;
    cursor: pointer;

    width: 33pt;
    height: 66px;

    margin-right: 13px;
    margin-left: auto;
    margin-top: -3px;
    margin-bottom: 6px;

    padding: 0;
}

.vegan-burger-line {
    display: block;
    position: absolute;

    width: 100%;
    height: 6px;

    border-radius: 2px;

    background-color: white;
    transition: ease-in 0.4s;
}
.nav-open .vegan-burger-line{
    transition: transform 0.4s cubic-bezier(0.04, 0.73, 0.38, 1);
}

.vegan-burger-line:nth-child(1) {
    top: 25%;
}
.nav-open .vegan-burger-line:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
}

.vegan-burger-line:nth-child(2) {
    top: 50%;

    transition: ease-in 0.4s;
}
.nav-open .vegan-burger-line:nth-child(2) {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.04, 0.73, 0.38, 1);
}

.vegan-burger-line:nth-child(3) {
    top: 75%;
}
.nav-open .vegan-burger-line:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
}

a.fa-brands:hover, a.fa:hover{
    transform: scale(1.3);
    transition: ease-out 0.1s;
}
a.fa-brands:active, a.fa:active{
    transform: scale(0.7);
    transition: ease-out 0.1s;
}

@media screen and (min-width: 777px) {
    .logo{
        display: inline-block;
    }
    .logo-small{
        display: none;
    }

    #title-span{
        display: inline-flex;
        flex-wrap: nowrap;

        height: 15vh;
        max-height: 333px;
    }

    .fa-bars{
        display: inline;
        margin-left: 0.3em;
    
        float: right;
        position: relative;
        top: 0;
        right: 0;

        font-size: min(7vw, 3em);

        margin-top: 1.5em;
    }
}

@media screen and (min-width: 77em){
    .boxed-text-section{
        display: inline-flex;
        flex-wrap: nowrap;
    }

    .text-section > .boxed-text-section:nth-of-type(even){
        flex-wrap: nowrap;
    }

    .boxed-text-section figure:last-child, .boxed-text-section span:last-child{
        margin-left: 2.5em;
    }
}