/* crimson-text-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-text-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-text-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-text-600italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-text-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-text-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/crimson-text-v19-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*,
*::before,
*::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

:root {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
    --complementary: #d9d9d9;
    --IA: #ff9d40;
    --IB: #bf9be2;
    --II: #f7f898;
    --IIIA: #f68fa2;
    --IIIB: #e0ccb5;
    --MIMO: rgb(84, 228, 204);
    display: block;
}

body {
    font-size: 5vw;
}

main,
footer,
header {
    display: flex;
    flex-direction: column;
    padding: 0 1em 0 1em;
}

/* COMMON TYPO */

/*a:hover {
    font-size: 110%;
    font-weight: 900;
}*/

a {
    text-decoration: none;
    color: black;
    padding: 0.5rem 1rem;
    margin: 0.2rem 0.2rem;

}

a:not(footer a, #zoom_names a) {
    position: relative;
    display: block;
    background-color: var(--complementary);
    border: none;
    border-radius: 15px;

}

h1 {
    font-weight: 700;
    font-style: bold;
    font-size: 222.5%;
    margin-bottom: 0.1em;
}

hr {
    margin: 3rem 10rem;
}

#zoom_names hr {
    margin: 2rem 2rem
}

/* HEADER */
header a {
    color: color-mix(in srgb, var(--eth), black 50%) !important;
    margin: auto;
    filter: saturate(1000%);
    /*color: lch(from currentColor l calc(c * 0.1) h); */
    /*background-color: color-mix(in srgb, var(--complementary), transparent 30%) !important;*/
}

header {
    text-align: center;
    width: 100%;
    justify-items: center;
}

h4 {
    text-align: center;
    width: 100%;
    font-size: 1.5em;
}

h5 {
    /*color: var(--complementary);*/
    color: color-mix(in srgb, var(--complementary), black 50%);
    /*filter: brightness(70%);*/
}

/* NAVIGATION */
.hamburger {
    position: absolute;
    top: 4rem;
    right: 10vw;
    padding: 0.5em 0.6em;
    background-color: var(--complementary);
    border: none;
    border-radius: 15px;
    font-size: 250%;
    z-index: 1000;
}

.back {
    display: inline-block;
    /*text-align: center;*/
    border-radius: 50%;
    /*line-height: 50px;*/  /** for vertical center - if needed **/
    right: auto;
    left: 10vw;
    z-index: 980;
}

nav {
    font-size: 222.2%;
    display: none;
    background-color: var(--complementary);
    border-radius: 15px;
    padding: 3rem 3rem 1.5rem 1rem;
    position: absolute;
    flex-direction: column;
    right: 10vw;
    top: 4rem;
    z-index: 990;
}


/* FOOTER */
.copy {
    background-color: #676767;
    color: white;
    padding: 1rem 10rem;
    padding-bottom: 3rem;
    font-size: 80%;
}

.sponsors {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 5rem;
}

footer a img {
   width: 100%;
}

footer > hr {
    margin: 3rem 10rem;
}

.sponsors a {
    display: block;
    margin: auto;
    width: 100%;
}

.wof-bg {
    opacity: 0.7;
}


/* media queries */
@media screen and (min-width: 1000px) {
    main,
    footer,
    header {
        font-size: 200%;
        padding: 0 10vw 0 10vw;
    }
    body {
        font-size: 80%;
    }
}

@media screen and (max-width: 1000px) {
    .hamburger {
        font-size: 5vw;
        max-width: max-content;
        right: 2rem;
        top: 2rem
    }

    .back {
        right: auto;
        left: 2rem;
    }

    h1 {
        text-align: center;
    }

    .sponsors {
        flex-direction: column;
    }
    nav {
        font-size: 125%;
        right: 2rem;
        left: 2rem;
        top: 2rem;
    }
    section > div {
        display: flex;
        flex-direction: column !important;
    }
    .copy {
        text-align: center;
        padding: 1rem 1rem;

    }
}

footer {
    padding: 0 0 0 0;
}