:root {
	--dull-red: #c10f2f; 
	--dull-green: #69b42d;
	 
	--bright-red: #f00;
	--bright-green: #0f0;
	
	--keys: #21242e;
	--keysShifted: #373b49;
	--inputBG: #21242e; 
	--inputBG_hover: #373b49; 
	
}
body {background: black; color: white; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 18px; padding: 0; margin: 0;  }
input {font-size: inherit; font-family: inherit; background: var(--inputBG); color: white;}
input:hover {background: var(--inputBG_hover); color: white;}
input:focus {background: var(--inputBG_hover); color: white;}
label {font-size: inherit; font-family: inherit; color: white;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0px 40rem var(--inputBG) inset;
}

.container {display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 100vh;}
.container .top {flex-shrink: 0; flex-grow: 0; position: relative; width: 100%; height: 18vh;}
.container .main {position: relative; box-sizing: border-box; width: 100%; min-height: 75vh; padding: 0 5%; }
.container .bottom {flex-shrink: 0; flex-grow: 0; position: relative; height: 18vh; }
.container .bottom .bottom_shape {position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-size: 40px; font-weight: 900; }

#splash_screen {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; background: black; }
#splash_screen .main {display: flex;flex-direction: column; justify-content: space-between;  }
#splash_screen .middle {display: flex; gap: 5%; height: 40vh; margin-top: 5vh; aling-items: top; justify-content: center;}
#splash_screen .middle div:first-child {width: 14%; display: flex; align-items: flex-start; }
#splash_screen .middle .green_light_go {height: 100%; }
#splash_screen .middle div:last-child {width: 14%; display: flex; align-items: flex-end; }
#splash_screen .bottom path {fill: var(--dull-green); }

#game_screen {position: relative;}
#game_screen .main {display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-bottom: 5%; }
#game_screen .main .clock {height: 12vh;}

#form_screen {display: none; z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  }
#form_screen form {position: relative; box-sizing: border-box; top: 0; left: 0; width: 100%; min-height: 100vh; background: rgba(0,0,0,0.97); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-bottom: 3vh; }
#form_screen .formContainer .top {flex-shrink: 0; flex-grow: 0; position: relative; width: 100%; height: 18vh; margin-bottom: 4vh; }
#form_screen .text {font-size: 40px; color: white; font-weight: bold; text-align: center;}
#form_screen .fields {width: 100%; max-width: 800px; }
#form_screen .field {position: relative; margin: 15px 0; }
#form_screen .field .inputContainer {position: relative; }
#form_screen .field .inputContainer label {position: absolute; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; height: 100%; z-index: 1; width: 20%; pointer-events: none;}
#form_screen .field .inputContainer input[type=text]  {display: block; width: 100%; box-sizing: border-box; padding: 15px 15px 15px 25%; outline: none; border: none;  }
#form_screen .field .checkboxContainer {position: relative; }
#form_screen .field .checkboxContainer input[type=checkbox] {position: absolute; top: 0; left: 10px;opacity: 0.01}
#form_screen .field .checkboxContainer label {display: flex; position: relative; align-items: center; gap: 10px; width: auto; pointer-events: all;  }
#form_screen .field .checkboxContainer label a {color: inherit; }
#form_screen .field .checkboxContainer i {width: 25px; height: 0; padding: 12px 0; background: #fff; color: transparent; text-align: center; line-height: 0; cursor: pointer; }
#form_screen .field .checkboxContainer.checked i {color: #000; }

#form_screen .field .error {display: none; }
#form_screen .field .error.active {display: block; color: var(--bright-red); margin: 5px 0; font-size: 14px; }
#form_screen .thankyou {display: none; position: absolute; top: 50%; left: 50%; font-size: 40px; font-weight: 700; text-align: center; line-height: 0; transform: translate(-50%, -50%);}
#form_screen a.close {position: absolute; top: 0; right: 0; padding: 5vh;}
#form_screen a.close b {position: relative; display: block; width: 3vh; height: 3vh; opacity: 0.7;}
#form_screen a.close:hover b {opacity: 1; transform: scale(1.1);}
#form_screen a.close b::after {content: ""; position: absolute; width: 140%; height: 2px; left: 50%; top: 50%; margin-left: -70%; margin-top: -1px; background: white; transform: rotate(45deg)}
#form_screen a.close b::before {content: ""; position: absolute; width: 140%; height: 2px; left: 50%; top: 50%; margin-left: -70%; margin-top: -1px; background: white; transform: rotate(-45deg)}
#form_screen.waiting:before {content: ""; position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
#form_screen.waiting:after {content: ""; position: absolute; z-index: 11; top: 50%; left: 50%; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s infinite linear; }




.top .shape path {fill: var(--dull-red);}

.top_game .shape path {fill: var(--dull-red); transition: all 0.3s linear;}
.top_game .icon path {fill: white; opacity: 1}
.top_game .words path {fill: white; transition: all 0.3s linear;}
.top_game .winner path {fill: transparent; transition: all 0.3s linear;}
.top_game .oops path {fill: transparent; transition: all 0.3s linear;}

.top_game.winner .shape path {fill: var(--dull-green); }
.top_game.winner .words path {fill: transparent;}
.top_game.winner .winner path {fill: white;}
.top_game.oops .words path {fill: transparent;}
.top_game.oops .oops path {fill: white;}

.top_form .shape path {fill: var(--dull-green);}
.top_form .words path {fill: white;}
.top_form .clock .labels path {fill: white;}
.top_form .clock .dots rect {fill: white;}
.top_form .clock .number polygon {fill: rgba(0,0,0,0.1);}
.top_form .clock .number polygon.active {fill: white;}



.countdown {z-index: 10; position: fixed; top: 50%; left: 50%; width:auto; height: 20vh; pointer-events: none; transform: translate(-50%, -50%);} 
.countdown .s0 {opacity: 0; }
.countdown .s1 {opacity: 0; }
.countdown .s2 {opacity: 0; }
.countdown .s3 {opacity: 0; }
.countdown path {fill: white;}
.countdown.go .s3 {animation: zoom 1s forwards; transform-origin: center}
.countdown.go .s2 {animation: zoom 1s forwards; transform-origin: center; animation-delay: 0.8s}
.countdown.go .s1 {animation: zoom 1s forwards; transform-origin: center; animation-delay: 1.6s}
.countdown.go .s0 {animation: zoom 1s forwards; transform-origin: center; animation-delay: 2.4s}

.buttons {display: grid; margin: 0 auto; grid-template-columns: repeat(5, 75px); gap: 20px; }
.buttons svg {position: relative; width: 100%; cursor: pointer; }
.buttons .indicator {fill: #111;}
.buttons svg.red {animation: pulse 200ms; }
.buttons svg.red .indicator {fill: var(--bright-red); }
.buttons svg.green {animation: pulse 200ms; }
.buttons svg.green .indicator {fill: var(--bright-green); }

.green_light_go {}
.green_light_go path {fill: white;}

.logo {}
.logo rect {fill: #c10f2f;}
.logo polygon {fill: white;}
.logo path {fill: white;}

.play_now {cursor: pointer; }
.play_now .letters path {fill: white;}
.play_now .ring {transform-origin: center;}
.play_now .ring {animation: spin 50s linear infinite;}
.play_now .ring circle {fill: var(--bright-green); animation: play_now 2.5s infinite;}
.play_now .ring circle.circle_1 {animation-delay: 0ms;}
.play_now .ring circle.circle_2 {animation-delay: 20ms;}
.play_now .ring circle.circle_3 {animation-delay: 40ms;}
.play_now .ring circle.circle_4 {animation-delay: 60ms;}
.play_now .ring circle.circle_5 {animation-delay: 80ms;}
.play_now .ring circle.circle_6 {animation-delay: 100ms;}
.play_now .ring circle.circle_7 {animation-delay: 120ms;}
.play_now .ring circle.circle_8 {animation-delay: 140ms;}
.play_now .ring circle.circle_9 {animation-delay: 160ms;}
.play_now .ring circle.circle_10 {animation-delay: 180ms;}
.play_now .ring circle.circle_11 {animation-delay: 200ms;}
.play_now .ring circle.circle_12 {animation-delay: 220ms;}
.play_now .ring circle.circle_13 {animation-delay: 240ms;}
.play_now .ring circle.circle_14 {animation-delay: 260ms;}
.play_now .ring circle.circle_15 {animation-delay: 280ms;}
.play_now .ring circle.circle_16 {animation-delay: 300ms;}
.play_now .ring circle.circle_17 {animation-delay: 320ms;}
.play_now .ring circle.circle_18 {animation-delay: 340ms;}
.play_now .ring circle.circle_19 {animation-delay: 360ms;}
.play_now .ring circle.circle_20 {animation-delay: 400ms;}
.play_now .ring circle.circle_21 {animation-delay: 420ms;}
.play_now .ring circle.circle_22 {animation-delay: 440ms;}
.play_now .ring circle.circle_23 {animation-delay: 460ms;}
.play_now .ring circle.circle_24 {animation-delay: 480ms;}
.play_now .ring circle.circle_25 {animation-delay: 500ms;}
.play_now .ring circle.circle_26 {animation-delay: 520ms;}
.play_now .ring circle.circle_27 {animation-delay: 540ms;}
.play_now .ring circle.circle_28 {animation-delay: 560ms;}
.play_now .ring circle.circle_29 {animation-delay: 580ms;}
.play_now .ring circle.circle_30 {animation-delay: 600ms;}
.play_now .ring circle.circle_31 {animation-delay: 620ms;}
.play_now .ring circle.circle_32 {animation-delay: 640ms;}

.techna .group circle {fill: #444; }
.techna .group.red circle {fill: var(--bright-red);}
.techna .group.green circle {fill: var(--bright-green); animation: goGreen 0.25s; animation-iteration-count: 3; }
.techna.winner .group circle {animation: goGreen 0.25s linear forwards; animation-iteration-count: 3;}
.techna.oops .group circle {fill: var(--bright-red); } 

.timer .clock {} 
.timer .clock .title path {fill: #4f4f4f;}
.timer .clock .number polygon {fill: #111;}
.timer .clock .labels path {fill: var(--bright-green);}
.timer .clock .number polygon.active {fill: var(--bright-green);}
.timer .clock .dots rect {fill: #111;}
.timer .clock .dots.active rect {fill: var(--bright-green);}
.timer .clock.danger .number polygon.active {fill: var(--bright-red);}
.timer .clock.danger .dots.active rect {fill: var(--bright-red);}
.timer .clock.danger .labels path {fill: var(--bright-red);}
.timer .clock.danger .dots.active rect {fill: var(--bright-red);}

.keyboard {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center; gap: 10px;  }
.keyboard .row {position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.keyboard button {position: relative; vertical-align:middle; color: white; background: var(--keys); font-size: 25px; line-height: 1; min-width: 45px; margin: 0; border-radius: 4px; text-align: center; font-weight: normal; outline: none; cursor: pointer; border: none; padding: 20px 0 10px 0;}
.keyboard button.middle {padding: 15px 0 15px 0;}			
.keyboard button i {font-style: normal;}
.keyboard button b {font-size: 0.50em; font-weight: 400; position: absolute; top: 6px; left: 0; width: 100%; color: rgba(255,255,255,0.3);}			
.keyboard button.spc {min-width: 334px; }
.keyboard button.symbol {min-width: 110px; }
.keyboard button.go {min-width: 134px; }	
.keyboard.shift button.shift {background: var(--keysShifted);}	
.keyboard.symbol button.symbol {background: var(--keysShifted);}			
.keyboard.shift button span {text-transform: uppercase;}
.keyboard.symbol button span {font-size: 0.55em; font-weight: 400; position: absolute; top: 6px; left: 0; width: 100%; color:rgba(255,255,255,0.4);}
.keyboard.symbol button b {font-size: 1em; position: relative; top: 0; width: 100%; color: white;}


@keyframes play_now {
	0% {fill: var(--bright-green); }
	35% {fill: var(--bright-green); }
	50% {fill: var(--bright-red); }
	85% {fill: var(--bright-red); }
	100% {fill: var(--bright-green); }
}
@keyframes zoom {
	0% {transform: scale(0.2); opacity: 0;}
	48% {transform: scale(0.6); opacity: 1; }
	52% {transform: scale(0.6); opacity: 1; }
	100% {transform: scale(1); opacity: 0 }
}
@keyframes spin {
	0% {transform: rotate(0)}
	100% {transform: rotate(360deg)}
}
@keyframes pulse {
	0% {transform: scale(1)}
	50% {transform: scale(1.1)}
	100% {transform: scale(1)}
}
@keyframes goGreen {
	0% {fill: var(--bright-green);}
	49% {fill: var(--bright-green);}
	50% {fill: #222;}
	99% {fill: #222;}	
	100% {fill: var(--bright-green);}	
}
@keyframes goRed {
	0% {fill: var(--bright-red);}
	49% {fill: var(--bright-red);}
	50% {fill: #222;}
	99% {fill: #222;}	
	100% {fill: var(--bright-red);}	
}