:root {
    --type-8: clamp(3.059rem, 1.5315rem + 7.6375cqi, 7.4506rem);
    --type-7: clamp(2.66rem, 1.512rem + 5.7399cqi, 5.9605rem);
    --type-6: clamp(2.3131rem, 1.459rem + 4.2701cqi, 4.7684rem);
    --type-5: clamp(2.0114rem, 1.3841rem + 3.1362cqi, 3.8147rem);
    --type-4: clamp(1.749rem, 1.2959rem + 2.2657cqi, 3.0518rem);
    --type-3: clamp(1.5209rem, 1.2007rem + 1.6009cqi, 2.4414rem);
    --type-2: clamp(1.3225rem, 1.1032rem + 1.0967cqi, 1.9531rem);
    --type-1: clamp(1.15rem, 1.0065rem + 0.7174cqi, 1.5625rem);
    --type-0: clamp(1rem, 0.913rem + 0.4348cqi, 1.25rem);
    --type--1: clamp(0.8696rem, 0.8242rem + 0.2268cqi, 1rem);
    --type--2: clamp(0.7561rem, 0.7409rem + 0.0763cqi, 0.8rem);
}

/*
  Fonts obtained with https://gwfh.mranftl.com/
*/
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('static/fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('static/fonts/roboto-v49-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* monoton-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: url('static/fonts/monoton-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    width: 100%;
    text-align: center;
    background-image: url(static/img/background.jpg);
    background-attachment: fixed;
    color: oklch(0.92 0.004 286.32);
    padding-bottom: 3em;
}

nav {
    background-color: rgb(20 20 22);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: end;
    width: 100%;
    z-index: 10;
}

nav ul {
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    border-color: rgb(245 245 243);
    margin: 20px;
    padding: 0 20px;
    z-index: 11;
}

nav li {
    padding: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 12;
}

nav a {
    color: rgb(245 245 243);
    text-decoration: none;
}

header .tag-line {
    font-size: 1.5em;
    font-weight: 800;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1.5em;
}

header .tag-line span {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    height: 1.3em;
    padding: 0;
}

header .tag-line li {
    padding: 0.25em 0.50em;
}

header .tag-line span ul {
    padding: 0;
    margin: 0;
    line-height: 1em;
    font-weight: 300;
    display: block;
    text-align: center;
    animation: text-slide-8 15s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}

@keyframes text-slide-8 {
  0%, 10% {transform: translateY(0%);
  }
  12.5%, 22.5% {transform: translateY(-11.11%);
  }
  25%, 35% {transform: translateY(-22.22%);
  }
  37.5%, 47.5% {transform: translateY(-33.33%);
  }
  50%, 60% {transform: translateY(-44.44%);
  }
  62.5%, 72.5% {transform: translateY(-55.55%);
  }
  75%, 85% {transform: translateY(-66.66%);
  }
  87.5%, 97.5% {transform: translateY(-77.77%);
  }
  100% {transform: translateY(-88.88%);
  }
}

body {
    background-color: rgb(245 245 243);
}

section.odd, section.even {
    max-width: 800px;
}
section.odd {
    padding-top: 2em;
    background-image: linear-gradient(178deg in oklab, rgb(245, 245, 243) 30px, rgb(158, 181, 156) 31px);
}
section.even {
    padding-top: 2em;
    background-image: linear-gradient(178deg in oklab, rgb(158, 181, 156) 30px, rgb(245, 245, 243) 31px);
}

h1 {
    font-family: Monoton, sans-serif;
    font-size: var(--type-7);
    padding-top: 1em;
    line-height: 0em;
    font-weight: 400;
    text-transform: uppercase;
}

h2 {
    font-weight: normal;
    text-align: center;
    font-family: Lato, sans-serif;
    font-size: var(--type-4);
    text-transform: uppercase;
    color: rgb(96, 94, 94);
}

h3 {
    font-family: Lato, sans-serif;
    font-size: var(--type-0);
    text-transform: uppercase;
    color: rgb(96, 94, 94);
}

section p, section ul {
    text-align: justify;
    font-family: Roboto;
    font-size: var(--type--1);
    color: rgb(80 80 84);
}

p {
    padding: 0.5em 2em;
    line-height: 1.6em;
}

p u {
    text-decoration-thickness: 3px;
}

li, footer ul span {
    padding: 0.25em 1em;
    text-align: left;
    list-style-type: none;
    text-decoration-style: solid;
}
section.odd li:before, section.even li:before {
    content: '>>';
    color: rgb(53 105 80);
    padding-right: 10px;
}

section a {
    transition-property: color,text-decoration-color;
    transition-duration: 750ms;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    color: rgb(53 105 80);
    stroke: rgb(53 105 80);
}

section a:hover {
    transition-property: color,text-decoration-color;
    transition-duration: 200ms;
    color: rgb(53 75 50);
    text-decoration-color: rgb(53 75 50);
}

section a::after {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-top;

    content: url(static/svg/link.svg) ;
}

.team, .centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--type-2);
}


.team-member {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5%;
    background-color: rgb(187, 204, 186);
    padding: var(--type-2) 0;
}

.team-member p {
    margin: 0;
}

.team-member img {
    padding: 0;
    width: 200px;
    height: 200px;
}

.boxgroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2em 0;
    gap: 1em 3em;
}

.box {
    max-width: 40%;
}

.box > * {
    margin: 0;
    padding: .10em;
}

.box h3 {
    padding-bottom: 1em;
}

.box h3.number:before {
    content: '/ ';
    color: rgb(119, 205, 72);
    font-size: var(--type-3);
}

.box p.number {
    font-family: Lato, sans-serif;
    font-size: var(--type-3);
    text-transform: uppercase;
    color: rgb(119, 205, 72);
    line-height: 1em;
}

footer {
    background-image: url(static/img/background.jpg);
    background-attachment: fixed;
    width: 100%;
    margin: auto;
    margin-top: 20px;
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 3px;
    padding: 6px;
    justify-content: center;
    color: oklch(0.92 0.004 286.32);
}

footer ul a {
    color: rgb(89, 165, 72);
}