@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap");
@font-face { font-family: "Keroine"; src: url("../fonts/Keroine-DouxExtreme.eot"); src: url("../fonts/Keroine-DouxExtreme.woff2") format("woff2"), url("../fonts/Keroine-DouxExtreme.woff") format("woff"); font-weight: 400; font-style: normal; }

@font-face { font-family: "Keroine"; src: url("../fonts/Keroine-IntenseLegere.eot"); src: url("../fonts/Keroine-IntenseLegere.woff2") format("woff2"), url("../fonts/Keroine-IntenseLegere.woff") format("woff"); font-weight: 400; font-style: italic; }

html { box-sizing: border-box; font-size: 16px; }

*, *:before, *:after { box-sizing: inherit; }

body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img { max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

a:hover { filter: blur(2px); transform: translate3d(0, 0, 0); -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); }

html, body { background-color: #fff; }

body { font-family: "Keroine", "Playfair Display", serif; font-weight: 400; color: #fff; padding: 0.001rem; min-height: 100vh; height: 100%; background-image: url("../img/bg.gif"); background-image: linear-gradient(11deg, #5072c3 0%, #8892d7 35%, #938de3 100%); background-position: center center; padding-top: 3.5rem; background-attachment: fixed; overflow-x: hidden; }

iframe { margin-top: 3.5rem; width: 100%; }

#main-nav { font-family: "Inter", sans-serif; font-weight: 300; width: 100vw; height: 3.5rem; position: fixed; text-transform: lowercase; top: 0; left: 0; display: flex; align-items: center; z-index: 1000; font-size: 1.3rem; }

#main-nav a:hover { text-decoration: none; filter: blur(2px); transform: translate3d(0, 0, 0); -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); }

#main-nav.closed { justify-content: flex-start; }

#main-nav.closed button span { display: inline; }

#main-nav.closed ul { display: none; }

#main-nav.open { justify-content: space-between; }

#main-nav.open button span { display: none; }

#main-nav.open ul { display: flex; }

#main-nav button { font-weight: 300; padding: 0 0 0 1.5rem; font-size: 1.3rem; border: none; background: none; color: #fff; line-height: 0; display: flex; height: 100%; align-items: center; }

#main-nav button span { font-size: 1.3rem; font-weight: 300; margin-left: 0.4rem; line-height: 0; text-transform: lowercase; }

#main-nav button span:empty { display: none; }

#main-nav button:first-of-type { padding-right: 0.5rem; }

#main-nav button:last-of-type { padding-left: 0; margin-left: -0.1rem; padding-right: 1.5rem; }

#main-nav button:hover { cursor: pointer; }

#main-nav ul { width: 100%; height: 100%; margin: 0; padding: 0; align-items: center; justify-content: space-around; }

h1 { font-size: 3rem; font-weight: 400; margin-bottom: 3rem; }

h5 { text-align: center; text-transform: uppercase; font-family: "Inter", sans-serif; font-weight: 300; font-size: 1.5rem; }

h5:not(:first-of-type) { margin-top: 3.5rem; }

#blob { position: absolute; left: 0; top: 0; height: 100%; width: 100%; filter: blur(10px); transform: translate3d(0, 0, 0); -webkit-filter: blur(10px); -webkit-transform: translate3d(0, 0, 0); pointer-events: none; margin-bottom: 2rem; z-index: 1000; }

#grain { pointer-events: none; width: 120vw; height: 120vh; position: fixed; top: -10vh; left: -10vw; animation: grain 3s steps(2) infinite; background-image: url("../img/grain.jpg"); z-index: 1000; opacity: 0.3; mix-blend-mode: soft-light; }

@keyframes grain { 0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-9%, 5%); }
  30% { transform: translate(7%, -5%); }
  40% { transform: translate(-5%, 8%); }
  50% { transform: translate(-2%, 3%); }
  60% { transform: translate(6%, 0%); }
  70% { transform: translate(0%, 9%); }
  80% { transform: translate(3%, 3%); }
  90% { transform: translate(-8%, 3%); } }

#intro { margin-top: 100vh; flex-direction: column; }

#intro a { color: #e3e3c3; text-decoration: underline; }

#intro a:hover { filter: none; transform: none; -webkit-filter: none; -webkit-transform: none; color: #ffb392; text-decoration: none; }

#intro footer { display: flex; align-items: center; justify-content: space-between; margin-top: 5rem; }

#intro footer ul { flex-grow: 1; font-family: "Inter", sans-serif; font-weight: 300; color: #ffb392; }

#intro footer img { flex-grow: 1; width: 200px; height: auto; }

section { width: 60vw; margin: 0 auto; margin-top: 2rem; margin-bottom: 7rem; display: flex; justify-content: space-between; }

section article h1 { margin: 1rem 0; font-size: 2rem; }

section p { font-size: 1.5rem; }

section.full-width { width: 100vw; }

section.full-width article { width: 60vw; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

section.full-width article .content { width: 60%; }

section.full-width article h2 { font-family: "Inter", sans-serif; font-weight: 300; font-size: 2.5rem; text-align: center; text-transform: uppercase; line-height: 1em; margin-bottom: 0.3em; }

section.full-width article h2:not(:first-of-type) { margin-top: 3.5rem; }

section.two-columns article { width: auto; flex-grow: 1; }

aside { font-family: "Inter", sans-serif; font-weight: 300; padding: 0 1.5rem; font-size: 1.3rem; flex-basis: 15vw; position: -webkit-sticky; position: sticky; top: 5.5rem; align-self: flex-start; margin-bottom: -100vh; bottom: 0; }

aside li { margin-bottom: 1rem; }

aside:first-of-type li { margin-bottom: 0.3rem; text-transform: lowercase; }

aside:last-of-type li { text-transform: uppercase; font-size: 1rem; }

.text-space { display: inline-block; width: 10rem; }

.text-horizontal-space { height: 5rem; }

p { font-size: 2rem; margin-bottom: 1rem; }

ol { font-size: 2rem; counter-reset: li; }

ol li { margin-bottom: 10rem; counter-increment: li; }

ol li:before { content: "[" counter(li) "]"; display: inline-block; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 300; transform: translateX(-200%); }

#manifesto .init-hidden { opacity: 0; }

#clock-wrapper { display: block; position: relative; margin-bottom: 2rem; }

#clock-wrapper aside { width: 20%; margin-bottom: 0; position: initial; }

#clock-wrapper aside :not(#start-clock) { transition: opacity 300ms linear; }

#clock-wrapper aside p { font-family: "Keroine", "Playfair Display", serif; font-weight: 400; }

#clock-wrapper aside p:last-of-type { margin-bottom: 3rem; }

#clock-wrapper aside h6 { font-weight: 300; }

#clock-wrapper aside p, #clock-wrapper aside h6 { font-size: 1.2rem; }

#clock-wrapper aside button { font-family: "Inter", sans-serif; font-weight: 300; background: none; color: white; border-radius: 0; padding: 0; font-size: 1.2rem; border: none; display: block; margin-top: 0.2rem; text-transform: lowercase; }

#clock-wrapper aside button.active { filter: blur(2px); transform: translate3d(0, 0, 0); -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); }

#clock-wrapper aside button:hover { cursor: pointer; }

#clock-wrapper aside #start-clock { border: 1px solid white; padding: 0.5rem 1.5rem; margin-top: 1.5rem; text-transform: capitalize; }

#clock { width: 550px; height: 550px; position: absolute; flex-grow: 2; filter: blur(10px); transform: translate3d(0, 0, 0); -webkit-filter: blur(10px); -webkit-transform: translate3d(0, 0, 0); margin: 0 auto; top: 0; left: calc(50% - 275px); }

#yellow-snail, #salmon-snail, #grey-snail, #salmon-ball, #clock-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }

#clock-mask { background-image: url("../img/clock/donut.svg"); }

#yellow-snail { background-image: url("../img/clock/yellow-snail.svg"); animation: rotate 79.68s linear infinite; }

#salmon-snail { background-image: url("../img/clock/salmon-snail.svg"); animation: rotate 127.68s linear infinite reverse; }

#grey-snail { background-image: url("../img/clock/grey-snail.svg"); animation: rotate 48s linear infinite; }

#salmon-ball { background-image: url("../img/clock/salmon-ball.svg"); animation: rotate 96s linear infinite reverse; }

@keyframes rotate { from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); } }

#mute { height: 2.5rem; width: 2.5rem; position: fixed; bottom: 1.5rem; right: 1.5rem; border: none; background-repeat: no-repeat; background-image: url("../img/mute-on.png"); background-color: transparent; background-position: left center; background-size: 2.5rem auto; }

#mute.is-mute { background-image: url("../img/mute-off.png"); }

#mute:hover { cursor: pointer; }

.protocols { display: flex; flex-direction: column; align-items: center; }

.protocols li { width: 50%; margin-bottom: 3rem; position: relative; }

.protocols li a:hover { filter: none; transform: none; -webkit-filter: none; -webkit-transform: none; }

.protocols li span { opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; font-size: 2rem; text-align: center; padding: 1rem; }

.protocols li:hover img { opacity: 0; }

.protocols li:hover span { opacity: 1; }

#protocols-filter li a.active { filter: blur(2px); transform: translate3d(0, 0, 0); -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); }

.protocol .hero { width: 100%; }

.protocol p { font-size: 1.5rem; }

.protocol .back-button { position: fixed; left: 1.5rem; font-size: 1.3rem; font-family: "Inter", sans-serif; font-weight: 300; text-transform: lowercase; }

.protocol .back-button:hover { text-decoration: none; filter: blur(2px); transform: translate3d(0, 0, 0); -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); }

@media screen and (max-width: 920px) { #main-nav { z-index: 10000; } #main-nav.closed { justify-content: center; height: 5rem; } #main-nav.open { background: white; color: #8892d7; width: 100vw; height: 100vh; font-size: 2.5rem; padding: 0 1.5rem; position: fixed; } #main-nav.open button { position: absolute; right: 1.5rem; top: 1.5rem; align-self: center; height: 2.5rem; width: 2.5rem; padding: 0; color: transparent; } #main-nav.open button:after { content: "X"; display: inline-block; color: #938de3; } #main-nav.open button:last-of-type { display: none; } #main-nav button { font-size: 2rem; } #main-nav button span { font-size: 2rem; } #main-nav ul { flex-direction: column; justify-content: center; text-align: center; } #main-nav ul li { margin-bottom: 2.5rem; line-height: 1em; } #intro footer { flex-direction: column; text-align: center; font-size: 1.5rem; } #intro footer ul { margin-bottom: 3.5rem; } html { font-size: 12px; } section { width: 75vw; flex-direction: column; align-items: stretch; } section p { font-size: 1.7rem; } section.full-width { flex-direction: column; align-items: stretch; width: 75vw; } section.full-width aside { margin-bottom: initial; flex-basis: initial; align-self: initial; text-align: center; position: initial; } section.full-width aside li { display: inline-block; font-size: 1.5rem; } section.full-width aside li:not(:last-of-type) { margin-right: 0.5em; } section.full-width article { margin-top: 2.5rem; } section.full-width article .content { width: 100%; } ol { font-size: 1.7rem; } ol li:before { transform: translateX(-100%); } .protocols li { width: 100%; } .protocol p { margin-right: 0; } .protocol .back-button { position: initial; text-align: center; font-size: 1.5rem; margin-bottom: 2.5rem; } #clock-wrapper { padding: 1px; } #clock-wrapper aside { width: 100%; margin-top: 250px; padding: 0; } #clock-wrapper aside p, #clock-wrapper aside h6, #clock-wrapper aside button { font-size: 1.7rem; } #clock-wrapper aside h6 { margin-bottom: 1rem; } #clock-wrapper aside button { display: inline-block; } #clock-wrapper aside #start-clock { display: block; margin: 3.5rem auto; } #clock { width: 200px; height: 200px; left: calc(50% - 100px); } }

/*# sourceMappingURL=styles.css.map */