* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: 20px; scroll-behavior: smooth; overscroll-behavior: none;}
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-large); }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: system-ui;
    --headerFont: "Bunch";

    /* Font weights */
    --font-regular: 300; 
    --font-medium: 500; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: clamp(1.8rem, 6vw, 4rem);
    --font-size-h2: clamp(1.4rem, 4vw, 3rem);
    --font-size-h3: clamp(1.2rem, 3vw, 1.5rem);
    --font-size-h4: 1rem; 
    --font-size-body: 0.8rem; 
    --font-size-kicker: 0.8rem; 


    /* Colors */  
    --mainColor: ;
    --ownColor: ;
    --backgroundColor: ;
    --highlightColor: ;

    --myWhite: #FFF;
    --myGreen: #77AC35; 
    --odfPink: #EAA0A5;

    /* Line heights */
    --line-height-small: 1;
    --line-height-regular: 1.2;
    --line-height-large: 1.4; 

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 65rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 35rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));

    /* Margins */
    --margin: var(--marginSingular) auto;
    --marginSingular: clamp(3rem, 15vw, 10rem);
    --marginSingularTop: clamp(5rem, 15vw, 10rem);
    --btnPadding: 0.5em 1.4em;
    --btnPaddingNarrow: 0.5em 1em;
    --btnPaddingWide: 0.5em 2.1em;

    /* Transitions */
    --myEaseOut: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --borderRadius: 2.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 1em; 

    /* Logos */
    --logoWidth: 5rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3 ,h4,.h4  {font-weight: var(--font-medium); font-family: var(--headerFont);  line-height: var(--line-height-regular); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 
.kicker { font-size: var(--font-size-kicker); }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
main section:first-of-type { margin-top: 0; }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
.container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section.fullscreen { max-width: 100%; width: 100%; }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }

body.home main { position: fixed; overflow: hidden; width: 100%; max-width: 430px; max-height: 932px; min-height: 670px; min-width: 340px; height: 100%; box-shadow: var(--blurShadow); background: #ddd;  }
body.home footer { display: none; }
body:not(.touch-device) main { border-radius: var(--borderRadius);}

/* IMAGES */
figure, picture { position: relative;}
picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* SELECTION */
*::selection { background: var(--mainColor); color: var(--backgroundColor); }

/* NO VISIBLE SCROLLBAR */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center;}
button,label { cursor: pointer;  }
.btn { background: var(--mainColor); color: var(--backgroundColor); padding: var(--btnPadding); border-radius: var(--btnBorderRadius); text-align: center;  }


/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; }
header img { max-width: 100%;}
nav#mobile, .burger, .mobile { display: none;  }


/* --------------- GAME --------------- */
/* Devtools */
body.home.dev main {  overflow: hidden;} 
#indicator { position: fixed; top: 1rem;   display: flex; flex-direction: column; align-items: center; font-size: 3rem; }
#indicator::before{ content: "Frame"; font-size: 1rem;}
body.home.dev section.game::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; outline: 5px solid white;  border-radius: var(--borderRadius);}
/* end */

section.game { position: relative; height: 100%; 
    --moveTransition: 1250ms; 
    --lastTextDelay: 1250ms;
    --twoStepAnimationDelay: 0;
    --lightTransition: calc(var(--moveTransition) * 1.666);
    --donateButtonColorDelay: 1500ms;
    --buttonColorTransitionTime: 250ms; 
    --standingStillTime: 3000ms; 
    --flashSteps: 4; 
    --flashTime: calc(var(--moveTransition) / var(--flashSteps));
 }
/* Background elements */
section.game > img { position: absolute; top: 0; left: 0; width: 100%; opacity: .2; }
section.game > .background { position: relative; height: 100%; width: max-content;  bottom: 0; left: 0;  transition: transform var(--moveTransition) ease-in-out; transform: translate3d(calc(var(--x, 0%) * -1), 0, 0);  }
section.game > .background .full  { position: relative; height: 100%; width: auto; margin-bottom: auto; left: 0;  }
section.game > .background .full svg { position: absolute; left: 0; width: auto; height: 100%;  bottom: 0;  min-height: 932px; overflow: visible;}
section.game > .background .full > .box { position: relative;  opacity: 0;}  
section.game > .background .full > .mika { z-index: 13; } 
section.game > .background .full > .top-rock { z-index: 12; } 
section.game > .background > .baobab { position: absolute; bottom: 24%; left: 67.2%; height: 48%; width: auto;  } 
section.game > .background > .school { position: absolute; bottom: 29%; left: 88.8%; z-index: 2;  } 
section.game > .background > .outside-ground { position: absolute; bottom: 0; left: 0; width: 100%; height: auto;  } 

section.game .light { position: absolute; height: 85%; width: 20%; left: 52%; z-index: 5; top: -5%; background: white linear-gradient(194.42deg, #FFDF60 19.66%, rgba(255, 251, 239, 0.9) 71.36%); filter: blur(60px); transform: rotate(20deg);  transition: width calc(var(--lightTransition) - 750ms) ease, transform var(--lightTransition) ease,  opacity var(--moveTransition) ease-in-out 750ms; }


/* PROGRESS BAR */
section.game .progressbar { position: absolute; top: 9.1%; width: calc(100% - 3.5rem); border-radius: 100vmin; margin: 0 auto; left: 0; right: 0; height: 1rem; border: 3px solid var(--myWhite); overflow: hidden; transition: transform var(--moveTransition) ease-in-out;}
section.game .progressbar::before { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--myGreen); width: var(--perc, 20%); content: ""; border-radius: 100vmin 0 0 100vmin; border-right: 3px solid var(--myWhite);  transition: width var(--moveTransition) ease-in-out;}

/* TEXTS */
section.game .texts { position: absolute; top: calc(9.1% + 2rem); text-align: center; margin: 0 auto; left: 0; right: 0; justify-content: center; display: flex; }
section.game .texts li { position: absolute;  color: var(--myWhite); font-family: var(--headerFont); font-size: 1.7rem; padding: 0 1rem; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate3d(300%, 0, 0) scale(.8); transition: opacity 0s, transform var(--moveTransition) ease-in-out; width: 100%;  line-height: var(--line-height-small);}
section.game .texts li[data-position=active]{ opacity: 1; transform: translate3d(0, 0, 0);}
section.game .texts li[data-position=left]{ opacity: 1; transform: translate3d(-300%, 0,0) scale(.8);}
section.game .texts li:last-of-type { transform: translate3d(0, -14rem, 0); font-size: 1.5rem; transition: opacity var(--moveTransition) ease-in-out, transform var(--moveTransition) ease var(--lastTextDelay);   top: .5rem;}
section.game .texts li:is(:nth-of-type(2),:nth-of-type(4))[data-position="active"] { transition-delay: var(--twoStepAnimationDelay);}

span.stop { position: absolute; bottom: 7.5rem; font-size: 1.4rem;  font-family: var(--headerFont); left: 0; right: 0; margin: 0 auto; color: var(--myWhite); text-transform: uppercase;  pointer-events: none; text-align: center; opacity: 0; transform: translateY(.5rem);  transition: opacity var(--moveTransition) ease-in-out calc(var(--moveTransition) + 750ms), transform var(--moveTransition) ease-in-out calc(var(--moveTransition) + 750ms); }

/* DONATE BUTTON */
a.donate { position: absolute; bottom: 3rem; font-size: 1.7rem; border: 3px solid var(--myWhite);   padding: .4em  1.2em .6em; border-radius: 100vmin;  width: max-content; left: 0; right: 0; margin: 0 auto;  font-family: var(--headerFont); color: var(--myWhite); text-transform: uppercase; line-height: var(--line-height-small); pointer-events: none; opacity: 0; transform: translateY(.5rem) scale(.9); transition: opacity var(--moveTransition) ease-in-out calc(var(--moveTransition) + 750ms),  transform var(--moveTransition) ease-in-out calc(var(--moveTransition) + 750ms), background var(--buttonColorTransitionTime) ease calc(var(--moveTransition) + var(--moveTransition) + var(--donateButtonColorDelay)), color var(--buttonColorTransitionTime) ease calc(var(--moveTransition) + var(--moveTransition) + var(--donateButtonColorDelay)); z-index: 500; }

section.game .eric.sit { position: absolute; height: auto; z-index: 15; left: 8%; bottom: 8%; }
section.game .eric svg { will-change: transform, visiblity; }
section.game .eric > div > svg { position: relative; transform: translate3d(0%, 0%, 0); bottom: 0;  }
section.game .eric .spot { position: absolute; width: 5rem; height: 3rem; top: -.65rem; right: 3.9rem;  transform: rotate(16deg);  transform-origin:  center right; filter: blur(2px);  z-index: -1; animation: spot 8s ease infinite; }
section.game .eric .spot::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, rgba(255, 237, 182, 1), rgba(255, 237, 182, 0)); clip-path: polygon(0 0, 100% 46%,  100% 54%,0 100%);   animation: flicker 8s linear infinite; }
section.game .eric .spot:after { content: ""; position: absolute; top: .25rem; height: 2.5rem; width: 2.5rem; background: rgba(244,242,222, 0.4);  border-radius: 50%; filter: blur(5px);  transform: translate3d(-25%, 0, 0); animation: flicker 8s linear infinite; }

section.game .eric.crouch { position: absolute; height: auto; z-index: 15; left: 6%; bottom: 7%; }
section.game .eric.crouch { transform: translateX(-50%); transform-origin: bottom; }
section.game .eric.crouch svg:is(:nth-of-type(2), :nth-of-type(4)) { position: absolute; left: -5%; top: 4%; }
section.game .eric.crouch .spot { transform-origin: center left; right: unset; left: 9.7rem; top: 0rem;  animation: spot-right 8s ease infinite; z-index: 2; }
section.game .eric.crouch .spot::before { background: linear-gradient(to right, rgba(255, 237, 182, 1), rgba(255, 237, 182, 0) );   clip-path: polygon(0% 46%,  0% 54%, 100% 100%, 100% 0);  }
section.game .eric.crouch .spot::after { right: 0; transform: translateX(25%);}

section.game .eric.walk { position: absolute; height: auto; z-index: 15; left: 42%; bottom: 22%; }
section.game .eric.walk { transform: translateX(-50%); transform-origin: bottom; }
section.game .eric.walk svg:nth-of-type(2) { position: absolute; left: 3%; top: -2%; }
section.game .eric.walk svg:nth-of-type(3) { position: absolute; left: -10%; top: 3%; opacity: 0; transition: opacity 0s linear 0ms; }
section.game .eric.walk svg .hairband { transition: opacity calc(var(--moveTransition) / 3) ease calc(var(--moveTransition) / 2);}


@keyframes spot { 
    0% { transform: rotate(-16deg); width: 12rem; }
    25% { transform: rotate(-23deg); width: 10.5rem; }
    50% { transform: rotate(-16deg); width: 10.5rem; }
    75% { transform: rotate(-23deg); }
    100% { transform: rotate(-16deg); width: 12rem; }
 }
@keyframes spot-right { 
    0% { transform: rotate(25deg); width: 12rem; }
    25% { transform: rotate(40deg); width: 10.5rem; }
    50% { transform: rotate(25deg); width: 10.5rem; }
    75% { transform: rotate(40deg); }
    100% { transform: rotate(25deg); width: 12rem; }
 }

 @keyframes flicker {
	0%, 18%, 23%, 60%, 64%, 64.9%, 70%, 100% {
		opacity: 1;
	}
	20%, 22%, 63%, 65%, 65%, 69.9% {
		opacity: 0.7;
	}
}

/* FRAME MOVEMENT */
section.game[data-frame="1"] { --x: 0%; --perc: 20% }
section.game[data-frame="2"] { --x: 17%; --perc: 40%  }
section.game[data-frame="3"] { --x: 32%; --perc: 60%  }
section.game[data-frame="4"] { --x: 45%; --perc: 80%  }
section.game[data-frame="5"] { --x: 63%; --perc: calc(100% + .5rem);   }
section.game[data-frame="6"] { --x: 84%; --perc: calc(100% + .5rem);   }

/* ANIMATION EVENTS PER FRAME */
/* GENERAL KEYFRAMES */
section.game .eric  { display: none; }
@keyframes flash { 
    0% { visibility: visible;}
    49.99% { visibility: visible;}
    50% { visibility: hidden;}
    100% { visibility: hidden; }
}

/* FRAME 1 */
section.game[data-frame="1"] .eric.sit { display: block; }


/* FRAME 1 > FRAME 2 */
section.game[data-frame="2"][data-firsthalf=true] .eric.sit { display: block;}
section.game[data-frame="2"][data-firsthalf=false] .eric.crouch {  animation: crawl-1 var(--moveTransition) linear forwards }
section.game[data-frame="2"][data-firsthalf=false] .eric.crouch svg.ok { display: none;  }
section.game[data-frame="2"][data-firsthalf=false] .eric.crouch svg:nth-of-type(1) { animation: flash var(--flashTime) linear reverse var(--flashSteps); }
section.game[data-frame="2"][data-firsthalf=false] .eric.crouch svg:nth-of-type(2) { animation: flash var(--flashTime) linear forwards var(--flashSteps); }

@keyframes crawl-1 { 
    0% {   transform: translate3d(-50%,0,0) rotate(0deg); } 
    20% {   transform: translate3d(-0%, 0 ,0) rotate(-3deg);} 
    40% {   transform: translate3d(45%, -15%, 0) rotate(-10deg);} 
    60% {   transform: translate3d(80%, -35%, 0) rotate(-18deg);} 
    80% {   transform: translate3d(120%, -60%, 0) rotate(-11deg);} 
    100% {   transform: translate3d(160%, -75%, 0) rotate(-5deg);} 
}

/* FRAME 2 */
section.game[data-frame="2"][data-firsthalf=false] .eric.crouch { display: block; }

/* FRAME 2 > FRAME 3 */
section.game[data-frame="3"] .eric.crouch { display: block; animation: crawl-2 var(--moveTransition) linear forwards; }
section.game[data-frame="3"] .eric.crouch svg.ok { display: block; }
section.game[data-frame="3"] .eric.crouch svg.sad { display: none; }
section.game[data-frame="3"] .eric.crouch svg:nth-of-type(3) { animation: flash var(--flashTime) linear forwards var(--flashSteps); }
section.game[data-frame="3"] .eric.crouch svg:nth-of-type(4) { animation: flash var(--flashTime) linear reverse var(--flashSteps); }

@keyframes crawl-2 { 
    0%  { transform: translate3d(160%, -80%, 0) rotate(-5deg);} 
    20% { transform: translate3d(198%, -80%, 0) rotate(0deg);} 
    40% { transform: translate3d(236%, -85%, 0) rotate(9deg) ;} 
    60% { transform: translate3d(274%, -75%, 0) rotate(0deg); } 
    80% { transform: translate3d(312%, -75%, 0) rotate(-5deg); } 
    100% { transform: translate3d(330%, -80%, 0) rotate(-13deg); } 
}

/* FRAME 3 */
section.game[data-frame="3"][data-firsthalf=false] .eric.crouch svg:nth-of-type(3) { animation: none; opacity: 0; }
section.game[data-frame="3"][data-firsthalf=false] .eric.crouch svg:nth-of-type(4) { animation: none; }
section.game[data-frame="3"][data-firsthalf=false] .eric.crouch .spot { opacity: 0; animation: none; }
section.game[data-frame="3"][data-firsthalf=false] .eric.crouch .spot::before { opacity: 0; animation: none; }
section.game[data-frame="3"][data-firsthalf=false] .eric.crouch .spot::after { opacity: 0; animation: none; }

/* FRAME 3 > FRAME 4 */
section.game[data-frame="4"] .eric.crouch { display: block; animation: crawl-3 calc(var(--moveTransition) / 3 * 2) linear forwards; }
section.game[data-frame="4"] .eric.crouch svg.ok { display: block; }
section.game[data-frame="4"] .eric.crouch svg.sad { display: none; }
section.game[data-frame="4"] .eric.crouch svg:nth-of-type(3) { animation: flash calc(var(--moveTransition) / 3) linear forwards 2; }
section.game[data-frame="4"] .eric.crouch svg:nth-of-type(4) { animation: flash calc(var(--moveTransition) / 3) linear reverse 2; }
section.game[data-frame="4"] .eric.crouch .spot { opacity: 0; animation: none; }
section.game[data-frame="4"] .eric.crouch .spot::before { opacity: 0; animation: none; }

section.game[data-frame="4"][data-firsthalf=false] .eric.crouch svg:nth-of-type(3) { animation: none; }
section.game[data-frame="4"][data-firsthalf=false] .eric.crouch svg:nth-of-type(4) { animation: none; }


@keyframes crawl-3 { 
    0% { transform: translate3d(330%, -80%, 0) rotate(-13deg); } 
    25% { transform: translate3d(330%, -80%, 0) rotate(-13deg); }
    50% { transform: translate3d(335%, -85%, 0) rotate(-14deg); }
    75% { transform: translate3d(340%, -90%, 0) rotate(-16deg); }
    99.9% { transform: translate3d(352%, -95%, 0) rotate(-19deg); opacity: 1; }
    100% { transform: translate3d(352%, -95%, 0) rotate(-19deg); opacity: 0; }
}

section.game[data-frame="4"][data-firsthalf=false] .eric.walk { display: block; animation: walk-1 var(--moveTransition) linear forwards; }
section.game[data-frame="4"][data-firsthalf=false] .eric.walk svg:nth-of-type(1) { animation: flash var(--flashTime) linear forwards var(--flashSteps); }
section.game[data-frame="4"][data-firsthalf=false] .eric.walk svg:nth-of-type(2) { animation: flash var(--flashTime) linear reverse var(--flashSteps); }
@keyframes walk-1 { 
    0%   { transform: translate3d(-50%, 0%, 0);}
    25%  { transform: translate3d(10%, -20%, 0);}
    50%  { transform: translate3d(75%, -40%, 0);}
    75%  { transform: translate3d(175%, -50%, 0);}
    100% { transform: translate3d(250%, -55%, 0); }
}

/* FRAME 4  */
section.game[data-frame="4"][data-firsthalf=false] .eric.walk { transform: translate3d(250%, -55%, 0)}
section.game[data-frame="4"][data-animating=false] .eric.walk svg:nth-of-type(1) { animation: none; opacity: 0; }
section.game[data-frame="4"][data-animating=false] .eric.walk svg:nth-of-type(2) { animation: none; }

/* FRAME 4 > 5 */
section.game[data-frame="5"] .eric.walk { display: block; animation: walk-2 var(--moveTransition) linear forwards; }
section.game[data-frame="5"] .eric.walk svg:nth-of-type(1) {  animation: flash var(--flashTime) linear forwards var(--flashSteps); }
section.game[data-frame="5"] .eric.walk svg:nth-of-type(2) {  animation: flash var(--flashTime) linear reverse var(--flashSteps); }
section.game[data-frame="5"] .eric.walk svg .hairband {opacity: 0;}

@keyframes walk-2 { 
    0% { transform: translate3d(250%, -55%, 0);}
    25%  { transform: translate3d(325%, -55%, 0); }
    50%  { transform: translate3d(400%, -50%, 0); }
    75%  { transform: translate3d(475%, -40%, 0); }
    100% { transform: translate3d(590%, -20%, 0);}
}


/* FRAME 5 */
section.game[data-frame="5"] .light { transform: rotate(0deg) translateY(-10%); opacity: 0; }
section.game[data-frame="5"][data-animating=false] .eric.walk svg:nth-of-type(1) { opacity: 0; animation: none;}
section.game[data-frame="5"][data-animating=false] .eric.walk svg:nth-of-type(2) { opacity: 0; animation: none;}
section.game[data-frame="5"][data-animating=false] .eric.walk svg:nth-of-type(3) { opacity: 1;}

/* FRAME 5 > 6 */
section.game[data-frame="6"] .eric.walk svg:nth-of-type(1) { animation: flash var(--flashTime) linear reverse var(--flashSteps); }
section.game[data-frame="6"] .eric.walk svg:nth-of-type(2) { animation: flash var(--flashTime) linear forwards var(--flashSteps); }
section.game[data-frame="6"] .eric.walk svg .hairband {opacity: 0;}

section[data-frame="6"] .eric.walk { display: block; animation: walk-3 var(--moveTransition) linear forwards; }

@keyframes walk-3 { 
    0% { transform: translate3d(590%, -20%, 0);}
    20% { transform: translate3d(690%, 0%, 0);}    
    40% { transform: translate3d(790%, 10%, 0);}
    60% { transform: translate3d(890%, 15%, 0);}
    80% { transform: translate3d(990%, 10%, 0);}
    100% { transform: translate3d(1060%, -0%, 0);}
}


/* FRAME 6 */
section.game[data-frame="6"] .progressbar { transform: translateX(calc(-300% ));  }
section.game[data-frame="6"] .texts li:last-of-type { transform: translateY(-3rem);  opacity: 1; }
section.game[data-frame="6"] a.donate { opacity: 1; pointer-events: all; background: var(--myWhite); color: #232231; transform: scale(1);}
section.game[data-frame="6"] span.stop { opacity: 1; transform: none;}









/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center  }


/* --------------- STANDARD SECTION --------------- */
section.standard article { max-width: 40rem; margin: 3rem auto; font-size: 0.8rem;}
section.standard article img { width: 100%;  border-radius: var(--borderRadius); }

section.standard article h1 { margin-bottom: 1rem;}
section.standard article h1 em { pointer-events: none;}
section.standard article h2 { font-size: clamp(1.2rem, 1.3vw, 1.6rem); margin-top: 2rem; text-transform: none; font-weight: var(--font-medium); }
section.standard article h3:not(.kicker) { font-size: clamp(0.9rem ,1vw, 1.1rem); text-transform: none; font-weight: var(--font-medium); }
section.standard article h4 { font-size: clamp(1rem, 1vw, 1.2rem);}

section.standard article ul { list-style: initial;  padding-left: 1em; margin-bottom: 1rem;}
section.standard article ul li { margin-bottom: 0.25rem; }
section.standard article ol { list-style: numeric;  padding-left: 1em; margin-bottom: 1rem;}
section.standard article ol li {margin-bottom: 0.5rem;}
section.standard article :is(ul, ol) li::marker { font-weight: var(--font-medium); font-size: 0.9em;  }
section.standard blockquote { padding-left: 1em; border-left: .25rem solid var(--ownColor); font-size: 1.2rem;  margin: 1.5rem 0;}

/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: #232231; 
}
section.odf__cookies.odf__cookies p { font-size: .8rem;}
section.odf__cookies.odf__cookies p:not(:last-of-type) {  margin-bottom: 1em; }
section.odf__cookies.odf__cookies p a { text-decoration: underline;}
.odf__sticky__bottom.odf__sticky__bottom { padding-top: 10px; }
     
/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
.landscape { display: none; }
@media only screen and (orientation: landscape) and (max-height: 450px) {
    .landscape { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #232231;  color: var(--myWhite); display: grid; place-items: center; font-family: var(--headerFont); font-size: 2rem; text-align: center; }
    .landscape span { max-width: 10em;}
}

@media only screen and (max-height: 750px) {
    section.game .progressbar { top: 2rem;  }
    section.game .texts { top: 4rem;}
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */