:root {
--x0:  0; 
--x1:  4px; 
--x2:  8px; 
--x3:  12px; 
--x4:  16px; 
--x5:  20px; 
--x6:  24px; 
--x7:  28px;
--x8:  32px; 
--x9:  36px; 
--x10: 40px;
--x11: 44px;
--x12: 48px;
--x13: 52px;
--x14: 56px;
--x15: 60px;

--header-height: var(--x12);
--sidebar-width: 200px;

--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
--shadow-bg: 0 var(--x2) var(--x4) var(--z0);
--shadow: 0 var(--x2) var(--x4) rgba(0,0,0,0.2);
--serif: Georgia, Times, serif;
--sans-serif: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--transition-duration: 300ms;
--transition-duration-long: 1000ms;
--shadow-bg: 0 var(--x2) var(--x4) var(--z3);
}

:root { 
  --z0:  29,  24 , 5;
  --z1:  39,  35 , 22;   
  --z2:  52,  47 , 33; 
  --z3:  64,  60 , 46; 
  --z4:  77,  72 , 59; 
  --z5:  90,  85 , 72; 
  --z6:  104, 99 , 86; 
  --z7:  117, 113, 100;
  --z8:  131, 127, 114;
  --z9:  146, 141, 128; 
  --z10: 160, 156, 143; 
  --z11: 175, 171, 159; 
  --z12: 190, 186, 174; 
  --z13: 205, 201, 190; 
  --z14: 220, 217, 207; 
  --z15: 236, 233, 223;

  --a0: 30,24,2; 
  --a1: 40,35,20; 
  --a2: 53,47,31; 
  --a3: 65,60,44; 
  --a4: 78,72,57; 
  --a5: 91,85,70; 
  --a6: 105,99,84; 
  --a7: 118,113,98; 
  --a8: 132,127,112; 
  --a9: 147,141,127; 
  --a10: 161,156,142; 
  --a11: 176,171,158; 
  --a12: 191,186,173; 
  --a13: 206,201,189; 
  --a14: 221,217,206; 
  --a15: 237,233,222; 
  --b0: 49,29,13; 
  --b1: 73,34,21; 
  --b2: 99,38,29; 
  --b3: 125,41,36; 
  --b4: 153,42,44; 
  --b5: 181,41,53; 
  --b6: 210,37,61; 
  --b7: 240,30,70; 
  --b8: 255,52,82; 
  --b9: 255,87,98; 
  --b10: 255,113,115; 
  --b11: 255,136,132; 
  --b12: 255,157,150; 
  --b13: 254,178,168; 
  --b14: 250,198,187; 
  --b15: 244,217,206; 
  --c0: 48,38,9; 
  --c1: 72,55,14; 
  --c2: 97,73,16; 
  --c3: 124,92,17; 
  --c4: 151,111,17; 
  --c5: 180,131,15; 
  --c6: 209,152,12; 
  --c7: 240,173,5; 
  --c8: 255,187,35; 
  --c9: 255,192,68; 
  --c10: 255,198,93; 
  --c11: 255,204,117; 
  --c12: 253,210,139; 
  --c13: 250,216,161; 
  --c14: 247,222,182; 
  --c15: 242,228,204; 
  --d0: 35,40,16; 
  --d1: 40,60,26; 
  --d2: 44,80,36; 
  --d3: 46,102,47; 
  --d4: 46,124,58; 
  --d5: 44,147,69; 
  --d6: 37,170,81; 
  --d7: 21,195,93; 
  --d8: 49,209,107; 
  --d9: 88,213,121; 
  --d10: 116,217,136; 
  --d11: 140,220,151; 
  --d12: 162,223,165; 
  --d13: 182,226,180; 
  --d14: 202,229,195; 
  --d15: 221,231,210; 
  --e0: 38,36,29; 
  --e1: 46,51,54; 
  --e2: 53,66,82; 
  --e3: 57,83,110; 
  --e4: 58,100,141; 
  --e5: 56,117,172; 
  --e6: 48,135,204; 
  --e7: 29,154,238; 
  --e8: 55,167,253; 
  --e9: 97,175,250; 
  --e10: 126,183,246; 
  --e11: 149,191,242; 
  --e12: 170,200,238; 
  --e13: 189,208,234; 
  --e14: 207,217,230; 
  --e15: 223,226,226; 
  --f0: 44,33,29; 
  --f1: 63,43,54; 
  --f2: 82,54,82; 
  --f3: 101,65,111; 
  --f4: 120,77,141; 
  --f5: 140,88,172; 
  --f6: 160,100,205; 
  --f7: 180,112,238; 
  --f8: 194,125,253; 
  --f9: 201,140,250; 
  --f10: 208,153,246; 
  --f11: 214,167,242; 
  --f12: 220,181,238; 
  --f13: 225,195,234; 
  --f14: 229,208,230; 
  --f15: 234,222,226; 
  --g0: 48,32,29; 
  --g1: 71,42,54; 
  --g2: 96,52,82; 
  --g3: 121,61,111; 
  --g4: 147,70,141; 
  --g5: 174,79,172; 
  --g6: 201,88,205; 
  --g7: 229,97,238; 
  --g8: 244,112,253; 
  --g9: 244,130,250; 
  --g10: 245,147,246; 
  --g11: 245,163,242; 
  --g12: 244,178,238; 
  --g13: 243,193,234; 
  --g14: 242,207,230; 
  --g15: 239,221,226; 
  --h0: 48,31,23; 
  --h1: 73,40,42; 
  --h2: 98,47,62; 
  --h3: 125,54,83; 
  --h4: 152,61,105; 
  --h5: 181,67,128; 
  --h6: 210,73,151; 
  --h7: 240,78,175; 
  --h8: 255,94,189; 
  --h9: 255,116,193; 
  --h10: 254,136,198; 
  --h11: 253,154,202; 
  --h12: 251,171,206; 
  --h13: 248,188,210; 
  --h14: 245,204,214; 
  --h15: 241,220,219; 
  --base0: rgb(var(--z0)); 
  --base1: rgb(var(--z1)); 
  --base2: rgb(var(--z2)); 
  --base3: rgb(var(--z3)); 
  --base4: rgb(var(--z4)); 
  --base5: rgb(var(--z5)); 
  --base6: rgb(var(--z6)); 
  --base7: rgb(var(--z7)); 
  --base8: rgb(var(--z8)); 
  --base9: rgb(var(--z9)); 
  --base10: rgb(var(--z10)); 
  --base11: rgb(var(--z11)); 
  --base12: rgb(var(--z12)); 
  --base13: rgb(var(--z13)); 
  --base14: rgb(var(--z14)); 
  --base15: rgb(var(--z15));
  --red: #BE1622;
  --red0: rgb(var(--b0)); 
  --red1: rgb(var(--b1)); 
  --red2: rgb(var(--b2)); 
  --red3: rgb(var(--b3)); 
  --red4: rgb(var(--b4)); 
  --red5: rgb(var(--b5)); 
  --red6: rgb(var(--b6)); 
  --red7: rgb(var(--b7)); 
  --red8: rgb(var(--b8)); 
  --red9: rgb(var(--b9)); 
  --red10: rgb(var(--b10)); 
  --red11: rgb(var(--b11)); 
  --red12: rgb(var(--b12)); 
  --red13: rgb(var(--b13)); 
  --red14: rgb(var(--b14)); 
  --red15: rgb(var(--b15));
  --yellow: #FFCA00;
  --yellow0: rgb(var(--c0)); 
  --yellow1: rgb(var(--c1)); 
  --yellow2: rgb(var(--c2)); 
  --yellow3: rgb(var(--c3)); 
  --yellow4: rgb(var(--c4)); 
  --yellow5: rgb(var(--c5)); 
  --yellow6: rgb(var(--c6)); 
  --yellow7: rgb(var(--c7)); 
  --yellow8: rgb(var(--c8)); 
  --yellow9: rgb(var(--c9)); 
  --yellow10: rgb(var(--c10)); 
  --yellow11: rgb(var(--c11)); 
  --yellow12: rgb(var(--c12)); 
  --yellow13: rgb(var(--c13)); 
  --yellow14: rgb(var(--c14)); 
  --yellow15: rgb(var(--c15)); 
  --green0: rgb(var(--d0)); 
  --green1: rgb(var(--d1)); 
  --green2: rgb(var(--d2)); 
  --green3: rgb(var(--d3)); 
  --green4: rgb(var(--d4)); 
  --green5: rgb(var(--d5)); 
  --green6: rgb(var(--d6)); 
  --green7: rgb(var(--d7)); 
  --green8: rgb(var(--d8)); 
  --green9: rgb(var(--d9)); 
  --green10: rgb(var(--d10)); 
  --green11: rgb(var(--d11)); 
  --green12: rgb(var(--d12)); 
  --green13: rgb(var(--d13)); 
  --green14: rgb(var(--d14)); 
  --green15: rgb(var(--d15)); 
  --blue0: rgb(var(--e0)); 
  --blue1: rgb(var(--e1)); 
  --blue2: rgb(var(--e2)); 
  --blue3: rgb(var(--e3)); 
  --blue4: rgb(var(--e4)); 
  --blue5: rgb(var(--e5)); 
  --blue6: rgb(var(--e6)); 
  --blue7: rgb(var(--e7)); 
  --blue8: rgb(var(--e8)); 
  --blue9: rgb(var(--e9)); 
  --blue10: rgb(var(--e10)); 
  --blue11: rgb(var(--e11)); 
  --blue12: rgb(var(--e12)); 
  --blue13: rgb(var(--e13)); 
  --blue14: rgb(var(--e14)); 
  --blue15: rgb(var(--e15)); 
  --purple0: rgb(var(--f0)); 
  --purple1: rgb(var(--f1)); 
  --purple2: rgb(var(--f2)); 
  --purple3: rgb(var(--f3)); 
  --purple4: rgb(var(--f4)); 
  --purple5: rgb(var(--f5)); 
  --purple6: rgb(var(--f6)); 
  --purple7: rgb(var(--f7)); 
  --purple8: rgb(var(--f8)); 
  --purple9: rgb(var(--f9)); 
  --purple10: rgb(var(--f10)); 
  --purple11: rgb(var(--f11)); 
  --purple12: rgb(var(--f12)); 
  --purple13: rgb(var(--f13)); 
  --purple14: rgb(var(--f14)); 
  --purple15: rgb(var(--f15)); 
  --violet0: rgb(var(--g0)); 
  --violet1: rgb(var(--g1)); 
  --violet2: rgb(var(--g2)); 
  --violet3: rgb(var(--g3)); 
  --violet4: rgb(var(--g4)); 
  --violet5: rgb(var(--g5)); 
  --violet6: rgb(var(--g6)); 
  --violet7: rgb(var(--g7)); 
  --violet8: rgb(var(--g8)); 
  --violet9: rgb(var(--g9)); 
  --violet10: rgb(var(--g10)); 
  --violet11: rgb(var(--g11)); 
  --violet12: rgb(var(--g12)); 
  --violet13: rgb(var(--g13)); 
  --violet14: rgb(var(--g14)); 
  --violet15: rgb(var(--g15)); 
  --pink0: rgb(var(--h0)); 
  --pink1: rgb(var(--h1)); 
  --pink2: rgb(var(--h2)); 
  --pink3: rgb(var(--h3)); 
  --pink4: rgb(var(--h4)); 
  --pink5: rgb(var(--h5)); 
  --pink6: rgb(var(--h6)); 
  --pink7: rgb(var(--h7)); 
  --pink8: rgb(var(--h8)); 
  --pink9: rgb(var(--h9)); 
  --pink10: rgb(var(--h10)); 
  --pink11: rgb(var(--h11)); 
  --pink12: rgb(var(--h12)); 
  --pink13: rgb(var(--h13)); 
  --pink14: rgb(var(--h14)); 
  --pink15: rgb(var(--h15)); 
}



* {
  box-sizing: border-box;
  -webkit-touch-callout:none;                
  -webkit-text-size-adjust:none;             
  -webkit-tap-highlight-color:rgba(0,0,0,0); 
  -webkit-user-select:none;                  
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    user-select: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
  background-color: var(--base15);
  font-size: 16px;
  line-height: 150%;
  color: var(--base1); 
  padding: 0;
  margin: 0;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; 
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 64px;
}

a, a:link {
  color: var(--z13)
}
a:hover {
  color: var(--z15);
}
a:active { color: white; }


.no-transition {
  transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}


.font-ui {
  font: 16px/150% var(--sans-serif);
}


.flex-grow {
  flex-grow: 1;
  display: flex;
}

@media screen and (max-width: 320px), 
(max-width: 1024px) and (orientation: landscape) {
  .desk-only {
    display: none;
  }
}

@media (min-width: 1023px) {
  .mobile-only {
    display: none;
  }
}

.start-button-container {
  margin: 5vh 0;
}

.button-container {
  display: inline-flex;
  gap: 10px;
  flex-direction: column;
}

.actions-container .button-container {
  flex-direction: column;
  flex-wrap: no-wrap;
}

@media screen and (min-width: 1024px) {
  .button-container {
    flex-direction: column;
    flex-wrap: no-wrap;
  }
}


.button-container .button {
  flex-basis: 0;
}

#button-practice {
  margin-top: 1vh;
}

.button {
  font-size: min(4vw, 24px);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
  background: var(--red);
  display: block;
  text-decoration: none;
  line-height: min(12vw, 64px);
  padding: 0 32px;
  border-radius: 32px;
  height: min(12vw, 64px);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.button svg {
  vertical-align: baseline;
}

.button.small {
  font-size: 16px;
  padding: 0 var(--x6) 0 var(--x4);
  line-height: 44px;
  letter-spacing: 0;
  height: auto;
  text-align: left;
}

.button.small svg {
  position: relative;
  top: 3px;
  margin-right: 4px;
}

.button.small.whatsapp svg,
.button.small.email svg {
  top: 6px;
}

.ready .button {
  display: block;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.button.yellow {
  background: var(--yellow);
  color: var(--yellow2);
}

.button.white {
  background: rgba(255,255,255,0.7);
  color: var(--yellow2);
}

.button:hover,
.button:active {
  opacity: 0.9;
}

.button.facebook { background: #4267B2; }
.button.linkedin { background: #0e76a8; }
.button.twitter { background: #000; }
.button.twitter:hover { opacity: 0.8; }
.button.whatsapp { background: #25d366; }
.button.email { background: #555555; }

#button-go,
#button-start,
#button-result {
  margin-top: 1em;
}
.game-logo {
	flex-direction: column;
}

.game-logo .drop-svg svg {
	height: min(25vw, 210px);
	width: min(20vw, 210px);;
}

.game-logo h1 {
	font-size: min(10vw, 90px);
	font-weight: 600;
	transform: scaleX(0.9);
	margin: 0.5em 0;
}

.welcome h2 {
	font-size: min(8vw, 38px);
	color: var(--yellow3);
	line-height: 140%;
}



.header-drop,
.header-h1 {
	position: absolute;
	font-size: 10vw;
	z-index: 100;
}


.logo-circle-svg {
	margin: 0 auto;
  z-index: 100;
  transform-origin: 50% 70%;
  display: flex;
  align-items: center;
  justify-content: center;
	background: white;
	border-radius: 100%;
	width: min(30vw, 200px);
	height: min(30vw, 200px);
}

.logo-circle-svg img {
	width: 60%;
}

@media screen and (orientation: landscape) {



}
.screen {
	text-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.screen-underlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity var(--transition-duration) ease;
}

.screen-underlay.yellow {
	background: var(--yellow);
}

.screen-underlay.base {
	background: var(--base15);
}

.screen-underlay.white {
	background: white;
}

.screen-underlay.visible {
	opacity: 1;
}

.screen-underlay.anime {
	transition: none;
}


.screen-top,
.screen-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 100%;
}

.screen-top {
	height: 75%;
	align-items: center;
}

.screen-bottom {
	height: 25%;
	align-items: center;
}

.welcome .screen-top {
	height: 70%;
}

.welcome .screen-bottom {
	height: 30%;
}

.fixed {
	position: fixed;
}

.bottom {
	bottom: var(--x4);
}

.flush {
	left: var(--x4);
	right: var(--x4);
}

.welcome {
	z-index: 10;
}

.cookie-notice {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--base15);
	transform: translateY(100%);
	transition: transform 333ms ease;
}

.cookie-notice.visible {
	transform: translateY(0%);
}

.cookie-notice-container {
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--x4) var(--x6);
	max-width: 800px;
}

.cookie-notice-container p {
	margin: 0;
	color: var(--base4);
	font-size: 15px;
	line-height: 145%;
}

.cookie-notice-container .flex {
	display: flex;
}

.cookie-notice-container .button.small {
	margin-right: var(--x2);
	padding-left: var(--x6);
	height: 44px;
}

.cookie-notice-container .button:first-child {
	margin-right: 0;
}

.cookie-notice-container .flex-col {
	display: flex;
}

.cookie-button-container {
	flex-direction: row-reverse;
	justify-content: center;
	margin-left: var(--x4);
}

@media screen and (max-width: 600px) {
	.cookie-notice-container {
		margin-left: var(--x4);
		margin-right: var(--x4);
	}
	.cookie-notice-container .flex {
		flex-direction: column;
	}
	.cookie-button-container {
		margin-top: var(--x4);
	}
}

@media screen and (max-width: 460px) {
	.cookie-button-container {
		flex-direction: column-reverse;
		margin-left: 0;
	}
	.cookie-button-container .button.small {
		text-align: center;
		margin: var(--x1) auto;
	}
}


@media screen and (max-height: 600px) {
	.welcome .screen-top {
		justify-content: flex-end;
	} 
}

/* MENU BUTTON */

.menu-button {
	position: absolute;
	width: var(--x12);
	height: var(--x12);
	top: 2px;
	left: var(--x2);
	cursor: pointer;
	display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 130;
}

.language-button {
	right: var(--x2);
	left: auto;
  flex-direction: row;
  fill: var(--yellow2);
  color: var(--yellow2);
  width: 100px;
}

.language-icon {
	width: 24px;
	height: 24px;
	transition: opacity var(--transition-duration);
}

.language-label {
	padding-left: var(--x1);
	font-weight: 600;
	transition: opacity var(--transition-duration);
}

.menu-caret {
	width: 8px;
	height: 8px;
	border-bottom: solid var(--yellow2) 2px;
	border-right: solid var(--yellow2) 2px;
	transform: rotate(45deg);
	margin-left: 10px;
	transition: transform var(--transition-duration) ease;
}


.menu-button:hover .app-menu-icon {
	border-color: var(--yellow3);
}

.menu-icon {
	border-bottom: solid var(--yellow2) 2px;
	width: 50%;
	margin-bottom: 3px;
	transform-origin: 20%;
}

.menu-icon.top,
.menu-icon.bottom {
	transition: transform var(--transition-duration) ease;
}

.menu-icon.mid {
	transition: opacity var(--transition-duration) ease;
}

/* MENU */

.menu {
	position: absolute;
	top: 0;
	left: var(--x2);
	padding: var(--x8) 0 var(--x2) 0;
	background: var(--yellow15);
	box-shadow: var(--shadow);
	transition: all var(--transition-duration) ease;
	transform: translateY(0);
	pointer-events: none;
	opacity: 0;
	border-radius: var(--x2);
	z-index: 99;
	display: flex;
  flex-direction: column;
  max-height: calc(100% - 16px);
  overflow-y: scroll;
}

.menu-language {
	left: auto;
	right: var(--x2);
}

.menu-separator {
	border-bottom: solid rgba(var(--c4), 0.3) 1px;
	margin: var(--x2) 0;
}

.menu-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.menu-item a {
	display: block;
	text-decoration: none;
	padding: var(--x2) var(--x6) var(--x2) var(--x8);
	cursor: pointer;
	position: relative;
	width: 100%;
}

.menu-item a.active:before {
  content: '';
  display: block;
  width: var(--x2);
  height: var(--x4);
  transform: rotate(45deg) scale(0.7);
  position: absolute;
  left: var(--x3);
  z-index: 10;
  border-bottom: solid var(--yellow2) 3px;
  border-right: solid var(--yellow2) 3px;
}

.menu-item a:hover {
	background: var(--yellow13);
}

/* MENU FOOTER */

.menu-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.home{
	font-weight: 600;
   font-size: 13px;
   text-indent: -16px;
   line-height: 135%;
}

/* MENU OVERLAY */

.menu-overlay {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 110;
}


/* MENU OPEN */ 

.menu-open .menu {
	z-index: 120;
}

.menu-open .menu-overlay {
	display: block;
}

.menu-open .language-icon,
.menu-open .language-label {
	opacity: 0;
}

.menu-open .menu-button {
	transform: scale(0.7);
}

.menu-language.menu-open .menu-button {
	transform: scale(1);
}

.menu-open .menu-caret {
	transform: rotate(225deg);
}


.menu-open .menu-icon.top {
	transform: rotate(45deg);
}

.menu-open .menu-icon.bottom {
	transform: rotate(-45deg);
}

.menu-open .menu-icon.mid {
	opacity: 0;
}

.menu-open .menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(var(--x2));
}


/* MOBILE */
.modal-overlay {
  background:  rgba(255,202,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 350ms ease;
  z-index: 110;
}

.modal-overlay.modal-overlay-no-transition {
  transition: none;
}

.inverted .modal-overlay {
  background:  rgba(0,0,0,0.8);
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: flex;
}

.modal-overlay .modal {
  width: 90%;
  max-width: 400px;
  max-height: 520px;
  background: white;
  box-shadow: var(--shadow);
  border-radius: var(--x4);
  position: relative;
  overflow: hidden;
}

.modal-overlay .modal .text-center {
  text-align: center;
}

.modal-overlay .modal.modal-transition {
  transition: transform var(--transition-long) ease;
  transform: translateY(16px);
}

.modal-overlay .modal.modal-animate {
  transform: translateY(0);
}

.modal-content {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  max-height: 440px;
  padding: var(--x8) var(--x8) var(--x8) var(--x8);
  font-size: 18px;
  color:  var(--base6);
}

.modal {
  color: var(--base1);
}


.modal h2 {
  margin: 0;
  font-size: min(24px, 4vw);
  line-height: 140%;
  font-weight: 600;
  color: var(--base0);
}

.modal p {
  font-size: min(18px, 4vw);
  margin: 0 0 24px 0;
  line-height: 145%;
}

.modal-close {
  font-family:  "Helvetica Neue", "Helvetica", sans-serif;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 400;
  padding: var(--x4) var(--x6);
  color: var(--base10);
  line-height: 100%;
  font-size: var(--x7);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--base3);
}

.modal-footer {
  position: absolute;
  bottom:  0;
  left:  var(--x8);
  right:  var(--x8);
  background:  var(--basey);
  padding:  var(--x5) 0 var(--x8) 0;
}

.modal-footer .button {
  font-size: 16px;
  line-height: 36px;
  margin-right: var(--x2);
}


.list {
	position: absolute;
	top: 48px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	padding: 0 var(--x2);
}

.list-item {
	text-decoration: none;
	display: flex;
	padding: var(--x4);
	background: rgba(255,255,255,0.3);
	margin: var(--x2);
	border-radius: 16px;
	font-size: 16px;
}

.list-item.you {
	background: white;
}

.list-item-left {
	margin-right: var(--x4);
}

.list-item-center {
	flex-grow: 1;
}

.list-item-right {
	display: flex;
	justify-content: center;
	align-items: center;
}

.list-item-score {
	font-size: 18px;
	font-weight: bold;
	padding: 0 var(--x2);
}

.list-item-name {
	font-weight: bold;
}

.list-item-avatar img {
	display: block;
	border-radius: 100%;
}

.score-container,
.actions-container {
	height: 100%;
	width: 100%;
	transform: translateY(100%);
	position: relative;
}

.actions-container {
	display: none;
}

.score-container .stages {
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: flex;
	margin-bottom: 5vw;
	gap: 3vw;
	display: none;
}

.score-container .stages.stages-practice {
	display: flex;
}

.stages .stage {
	background: white;
	opacity: 0.3;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	height: min(20vh, 25vw, 180px);
	width: min(20vh, 25vw, 180px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.stages .stage.current {
	opacity: 1;
}

.stage-score {
	font-size: min(44px, 6vw, 5vh);
	font-weight: bold;
	line-height: 140%;
}

.stage-title {
	text-transform: uppercase;
	color: var(--base8);
	line-height: 140%;
	font-size: min(14px, 1.5vw);
}

.practice .score-container .button {
	width: auto;
}

@media screen and (orientation: landscape) {


}
.screen .unsure-logo-container {
	width: min(800px, 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
}

.unsure-logo {
	width: min(800px, 80vw);
	display: block;
	overflow: visible;
}

.unsure-logo-bladder,
.unsure-logo-drop,
.unsure-logo-clock,
.unsure-logo-button,
.unsure-logo-bg,
.unsure-logo-dot,
.unsure-logo-track {
	opacity: 0;
	transform-origin: 50%;
	transform-box: fill-box;
}

.unsure-logo-drop {
	transform-origin: 50% 73%;
}

.unsure-logo-drop path:first-child {
	fill: #E30613;
}

.unsure-logo-drop path:last-child {
	fill: var(--red);
}

.unsure-logo-drop.dimmed,
.unsure-logo-dot.dimmed {
	opacity: 1;
}

.unsure-logo-dot.dimmed,
.unsure-logo-drop.dimmed path:first-child,
.unsure-logo-drop.dimmed path:last-child  {
	fill: var(--base15);
}

.unsure-logo-drop.dimmed.active path:first-child {
	fill: #E30613;
}

.unsure-logo-drop.dimmed.active path:last-child,
.unsure-logo-dot.dimmed.active {
	fill: var(--red);
}

.unsure-logo-track.active {
	opacity: 1;
}

.unsure-logo-track {
	fill: none;
	stroke: var(--red);
	stroke-width: 14;
	stroke-linecap: round;
}

.unsure-logo-button {
	opacity: 1;
}
h1, h2, h3, h4, h5, h5 {
	margin: 0 0 0 0;
	padding: 0;
}


/*
h1 {
	font-size: min(10vw, 72px);
	color: var(--yellow1);
	font-weight: 600;
	margin: 2vh 0 4vh 0;
}
*/

.title-container h3 {
	font-size: min(4.5vw, 32px);
	line-height: 130%;
	font-weight: 600;
	margin: 0;
	color: var(--yellow6);
	text-transform: uppercase;
	font-weight: 600;
}

.title-container h2 {
	font-size: min(5vw, 36px);
	line-height: 140%;
	margin: 0;
	color: var(--yellow3);
}

.title-container, .continue-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
}

.title-container > * {
	opacity: 0;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44%;
	max-width: 400px;
	pointer-events: none;
}

.tap-to-continue {
	position: absolute;
	bottom: 5vh;
	left: 0;
	right: 0;
	text-align: center;
	font-size: min(4.5vw, 32px);
	color: rgba(0,0,0,0.3);
	font-weight: 400;
	opacity: 0;
	transform: translateY(100%);
}

.title-container > .when-caught-early,
.title-container > .blood-in-your-urine {
	width: 60%;
	max-width: 500px;
}

.title-container .visible {
	opacity: 1;
}


.title-container img {
	width: 80%;
}

.title-container .visible .button {
	pointer-events: auto;
}

.title-container .button {
	display: inline-block;
}

.title-container .final-score h1 {
	font-weight: bold;
  font-size: min(12vw, 72px);
  color: var(--yellow1);
  margin: 0.4em 0;
}

.text-red {
	color: var(--red);
}



@media screen and (orientation: landscape) {

	.title-container > * {

		width: 40%;
	}

.title-container > .when-caught-early,
.title-container > .blood-in-your-urine {
	width: 50%;
}



}
.rotation-notice {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.9);
  z-index: 200;
  padding: 10vw;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.rotation-notice h2 {
  color: white;
  line-height: 150%;
}

.rotation-notice .image {
  width: 15%;
  margin-right: 5%;
}

.rotation-notice .image img {
  width: 100%;
}

.rotation-notice p {
  color: var(--base10);
  font-size: 3vw;
  line-height: 130%;
  font-weight: 400;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
  .rotation-notice {
    display: flex;
  }
}