body
{
font-family: Arial, sans-serif;
background: rgb(47,47,47);
background: radial-gradient(circle, rgb(0 0 0) 0%, rgba(9, 9, 9, 1) 50%, rgba(0, 0, 0, 1) 100%);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}

html,body
{
overflow: hidden;
}

html
{
background: black;
}

.preloader
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #171f30;
z-index: 999;
}

.preloader > .content
{
width: 100%;
height: 100vh;
background-color: #171f30;
display: flex;
justify-content: center;
align-items: center;
}

.preloader > .content > .continue
{
display: none;
}

.preloader > .content > .continue > div
{
position: relative;
display: inline-block;
padding: 25px 30px;
margin: 40px 0;
color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
font-family: "Rajdhani", sans-serif;
font-weight: 600;
letter-spacing: 4px;
overflow: hidden;
margin-right: 50px;
cursor: pointer;
}

.preloader > .content > .continue > div:hover
{
background: #03e9f4;
color: #171f30;
box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

.preloader > .content > .continue > div
{
}

.preloader > .content > .continue > div span
{
position: absolute;
display: block;
}

.preloader > .content > .continue > div span:nth-child(1)
{
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#03e9f4);
animation: pre-animate1 1s linear infinite;
}

@keyframes pre-animate1
{
0%
{
left: -100%;
}

50%,100%
{
left: 100%;
}
}

.preloader > .content > .continue > div span:nth-child(2)
{
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#03e9f4);
animation: pre-animate2 1s linear infinite;
animation-delay: 0.25s;
}

@keyframes pre-animate2
{
0%
{
top: -100%;
}

50%,100%
{
top: 100%;
}
}

.preloader > .content > .continue > div span:nth-child(3)
{
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#03e9f4);
animation: pre-animate3 1s linear infinite;
animation-delay: 0.50s;
}

@keyframes pre-animate3
{
0%
{
right: -100%;
}

50%,100%
{
right: 100%;
}
}

.preloader > .content > .continue > div span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#03e9f4);
animation: pre-animate4 1s linear infinite;
animation-delay: 0.75s;
}

@keyframes pre-animate4
{
0%
{
bottom: -100%;
}

50%,100%
{
bottom: 100%;
}
}

.preloader > .content > .loading
{
width: 80px;
height: 50px;
position: relative;
}

.preloader > .content > .loading p
{
top: 0;
padding: 0;
margin: 0;
color: #5389a6;
animation: preloader_text 3.5s ease both infinite;
font-size: 13px;
letter-spacing: 1px;
}

@keyframes preloader_text
{
0%
{
letter-spacing: 1px;
transform: translateX(0px);
}

40%
{
letter-spacing: 2px;
transform: translateX(26px);
}

80%
{
letter-spacing: 1px;
transform: translateX(32px);
}

90%
{
letter-spacing: 2px;
transform: translateX(0px);
}

100%
{
letter-spacing: 1px;
transform: translateX(0px);
}
}

.preloader > .content > .loading span
{
background-color: #5389a6;
border-radius: 50px;
display: block;
height: 16px;
width: 16px;
bottom: 0;
position: absolute;
transform: translateX(64px);
animation: preloading 3.5s ease both infinite;
}

.preloader > .content > .loading span:before
{
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #a6dcee;
border-radius: inherit;
animation: preloading2 3.5s ease both infinite;
}

@keyframes preloading
{
0%
{
width: 16px;
transform: translateX(0px);
}

40%
{
width: 100%;
transform: translateX(0px);
}

80%
{
width: 16px;
transform: translateX(64px);
}

90%
{
width: 100%;
transform: translateX(0px);
}

100%
{
width: 16px;
transform: translateX(0px);
}
}

@keyframes preloading2
{
0%
{
transform: translateX(0px);
width: 16px;
}

40%
{
transform: translateX(0%);
width: 80%;
}

80%
{
width: 100%;
transform: translateX(0px);
}

90%
{
width: 80%;
transform: translateX(15px);
}

100%
{
transform: translateX(0px);
width: 16px;
}
}

.coming_soon_content
{
padding: 20px;
border-radius: 10px;
}

.coming_soon_content > .coming_soon_subtitle
{
font-family: "Rajdhani", sans-serif;
color: transparent;
text-shadow: none;
font-size: 34px;
text-transform: uppercase;
line-height: 1;
margin-top: 10px;
animation: subtitle-neon-animation 0.8s linear forwards;
animation-delay: 1s;
}

@keyframes subtitle-neon-animation
{
0%
{
color: #141c21;
text-shadow: none;
}

10%
{
color: #b0f1ff;
text-shadow: 0 0 8px #1BCCF1, 0 0 13px #1BCCF1, 0 0 18px #1BCCF1, 0 0 34px #1BCCF1;
}

20%
{
color: #141c21;
text-shadow: none;
}

30%
{
color: #b0f1ff;
text-shadow: 0 0 8px #1BCCF1, 0 0 13px #1BCCF1, 0 0 18px #1BCCF1, 0 0 34px #1BCCF1;
}

40%
{
color: #141c21;
text-shadow: none;
}

100%
{
color: #b0f1ff;
text-shadow: 0 0 8px #1BCCF1, 0 0 13px #1BCCF1, 0 0 18px #1BCCF1, 0 0 34px #1BCCF1;
}
}

.line_break
{
display: block;
opacity: 0;
position: relative;
}

.line_break > span
{
background: #898989;
display: inline-block;
height: 1px;
width: 300px;
background: linear-gradient(90deg, transparent, #898989, transparent);
background-size: 200% 100%;
animation: moveWhiteLight 2s linear infinite;
border-radius: 50px;
}

@keyframes moveWhiteLight
{
0%
{
background-position: 0% 50%;
}

50%
{
background-position: 100% 50%;
}

100%
{
background-position: 0% 50%;
}
}

.background
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.background > .desktop
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.background > .arrows > .left
{
background: url('../files/images/desktop_left.png');
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center left;
}

.background > .arrows > .right
{
background: url('../files/images/desktop_right.png');
position: absolute;
right: 0px;
width: 100%;
height: 100%;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center right;
}

.background > .arrows > .top
{
display: none;
background: url('../files/images/mobile_top.png');
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top;
}

.background > .arrows > .bottom
{
display: none;
background: url('../files/images/mobile_bottom.png');
position: absolute;
bottom: 0px;
width: 100%;
height: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom center;
}

.coming_soon_heading
{
position: relative;
transition: 0.5s ease-in-out;
}

.coming_soon_heading > h3
{
color: #fff;
font-size: 80px;
font-family: "Racing Sans One", sans-serif;
line-height: 0.8;
text-transform: uppercase;
margin: 0px;
}

.coming_soon_heading > h3 > span
{
display: block;
}

.coming_soon_heading > h3:nth-child(1)
{
color: transparent;
-webkit-text-stroke: 2px #8338ec;
}

.coming_soon_heading > h3:nth-child(2)
{
color: #ae2be2;
animation: wave_animation 8s ease-in-out infinite;
position: absolute;
top: 0px;
width: 100%;
background: linear-gradient(90deg, #ff14ff 30.55%, #6c67ff 49.36%, #19f8ff 70.62%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

@keyframes wave_animation
{

0%
{
clip-path: polygon(0 2%, 20% 2%, 42% 11%, 70% 10%, 74% 13%, 90% 11%, 99.75% 16.8%, 99.75% 98.83%, 100% 100%, 0% 99.75%);
}

50%
{
clip-path: polygon(0 69%, 25% 64%, 36% 74%, 53% 79%, 65% 70%, 84% 75%, 100% 65%, 99.75% 98.83%, 100% 100%, 0% 99.75%);
}

100%
{
clip-path: polygon(0 2%, 20% 2%, 42% 11%, 70% 10%, 74% 13%, 90% 11%, 99.75% 16.8%, 99.75% 98.83%, 100% 100%, 0% 99.75%);
}
}

.game_intro
{
font-family: "Viga", sans-serif;
}

.game_intro > .heading
{
}

.game_intro > .heading > h3
{
color: #F8778D;
text-transform: uppercase;
line-height: 1;
margin-bottom: 0px;
font-size: 24px;
}

.game_intro > .heading > h3 > span
{
display: block;
}

.game_intro > .heading > h3 > span.highlight
{
font-size: 49px;
-webkit-background-clip: text;
background: linear-gradient(90deg, #E933FD 44%, #3E34EC 49%, #29CFFB 55%);
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
animation: gradientAnimation 0.3s linear infinite;
}

@keyframes gradientAnimation
{
0%
{
background: linear-gradient(90deg, #E933FD 44%, #3E34EC 49%, #29CFFB 55%);
-webkit-text-fill-color: transparent;
background-clip: text;
}

100%
{
background: linear-gradient(90deg, #3E34EC 44%, #29CFFB 49%, #E933FD 55%);
-webkit-text-fill-color: transparent;
background-clip: text;
}
}

.game_intro > .human_brain
{
}

.game_intro > .human_brain > video
{
width: 150px;
margin-bottom: 7px;
}

.black_bg
{
background: radial-gradient(circle, rgba(47,47,47,1) 0%, rgba(9,9,9,1) 50%, rgba(0,0,0,1) 100%);
animation: black_bg_animation 0.1s forwards;
}

@keyframes black_bg_animation
{
0%
{
background: radial-gradient(circle, rgb(0 0 0) 0%, rgba(9, 9, 9, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

100%
{
background: #000;
 /* Pure black */
;
}
}

.game_intro > .human_brain > img
{
width: 163px;
margin-bottom: 25px;
animation: brain_parallaxAnimation 6s linear infinite alternate;
}

@keyframes brain_parallaxAnimation
{
0%
{
transform: perspective(100px) rotateY(-10deg) rotateX(0deg);
}

100%
{
transform: perspective(3500px) rotateY(5deg) rotateX(-5deg);
}
}

.game_intro > .email_register
{
margin-top: 23px;
}

.game_intro > .email_register > form
{
margin-top: 31px;
text-align: center;
}

.game_intro > .email_register > form > .email_field
{
}

.game_intro > .email_register > form > .email_field > div
{
background: linear-gradient(115deg, #E933FD, #3E34EC, #29CFFB);
width: 260px;
display: inline-block;
padding: 2px;
border-radius: 5px;
position: relative;
}

.game_intro > .email_register > form > .email_field > div > label
{
color: white;
position: absolute;
top: -9px;
left: 8px;
font-size: 13px;
margin-top: -3px;
background: black;
text-align: left;
margin: 0px;
padding: 0px 5px;
border-radius: 6px;
}

.game_intro > .email_register > form > .email_field > div > input
{
display: block;
width: 100%;
background: black;
outline: none;
border: 0px;
overflow: hidden;
border-radius: 5px;
color: white;
padding: 9px 14px;
padding-right: 0px;
}

.game_intro > .email_register > form > .start_game
{
background: linear-gradient(115deg, #E933FD, #3E34EC, #29CFFB);
-webkit-appearance: none;
border: 0pc;
margin-top: 20px;
font-size: 16px;
color: white;
border-radius: 34px;
padding: 4px 13px;
}

.game_intro > .email_register > form > .email_field > div > label > span
{
-webkit-background-clip: text;
background: linear-gradient(90deg, #E933FD 33%, #3E34EC 41%, #29CFFB 55%);
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: block;
}

.gameplay
{
font-family: "Viga", sans-serif;
}

.gameplay > h3
{
color: #AF19AB;
text-transform: uppercase;
line-height: 1;
margin-bottom: 18px;
font-size: 21px;
font-weight: 500;
-webkit-background-clip: text;
background: linear-gradient(90deg, #9e09b5 29%, #6735e6 51%, #f13676 61%);
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.gameplay > div
{
position: relative;
}

.gameplay > div > .number
{
background: url('../files/images/number_frame.png');
background-repeat: no-repeat;
width: 303px;
display: inline-block;
height: 168px;
text-align: center;
margin-bottom: 0px;
position: relative;
}

.gameplay > div > .number > h4
{
margin: 0px;
font-size: 53px;
margin-bottom: 0px;
margin-top: 50px;
color: #ffffff;
-webkit-background-clip: text;
background: linear-gradient(90deg, #9e09b5 29%, #6735e6 51%, #f13676 61%);
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}

.gameplay > div > .input
{
margin-top: 18px;
}

.gameplay > div > .input > form
{
background: linear-gradient(115deg, #E933FD, #3E34EC, #f13676);
width: 260px;
display: inline-block;
padding: 2px;
border-radius: 5px;
position: relative;
}

.gameplay > div > .input > form > label
{
color: white;
position: absolute;
top: -9px;
left: 8px;
font-size: 13px;
margin-top: -3px;
background: black;
text-align: left;
margin: 0px;
padding: 0px 5px;
border-radius: 6px;
}

.gameplay > div > .input > form > label > span
{
-webkit-background-clip: text;
background: linear-gradient(90deg, #E933FD 35%, #3E34EC 76%, #cc3569 38%);
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: block;
}

.gameplay > div > .input > form > input
{
display: block;
width: 100%;
background: black;
outline: none;
border: 0px;
overflow: hidden;
border-radius: 5px;
color: white;
padding: 7px 13px;
padding-right: 0px;
text-align: left;
}

.gameplay > h5
{
color: transparent;
text-transform: uppercase;
line-height: 1;
margin-top: 48px;
font-size: 21px;
font-weight: 500;
margin-bottom: 0px;
font-family: "Rajdhani", sans-serif;
}

.gameplay > h5.animate
{
animation: subtitle-neon-animation 0.8s linear forwards;
}

.gameplay > div > .submit
{
margin-top: 19px;
}

.gameplay > div > .submit > input
{
background: linear-gradient(115deg, #E933FD, #3E34EC, #f13676);
-webkit-appearance: none;
border: 0pc;
font-size: 18px;
color: white;
border-radius: 5px;
padding: 5px 24px;
}

.gameover
{
}

.gameover > .gameover_text
{
}

.gameover > .gameover_text > div.tease_image > img
{
width: 185px;
}

.gameover > .gameover_text > div.tease_image
{
}

.gameover > .gameover_text > div
{
display: block;
}

.gameover > .gameover_text > div > p
{
font-size: 74px;
line-height: 0.8;
text-transform: uppercase;
margin: 0px;
position: relative;
color: white;
font-family: "Rajdhani", sans-serif;
}

.gameover > .gameover_text > div > p > span
{
display: block;
}

.gameover > .gameover_text > div > p > span:nth-child(1), 
.gameover > .gameover_text > div > p > span:nth-child(2)
{
position: absolute;
transform: translate(-50%, -50%);
z-index: -1;
}

.gameover > .gameover_text > div > p > span:nth-child(1)
{
top: 49.5%;
left: 49.5%;
color: rgba(233, 30, 99, 0.8);
animation: distort1 300ms linear infinite;
}

.gameover > .gameover_text > div > p > span:nth-child(2)
{
top: 50.5%;
left: 50.5%;
color: rgb(126 36 255 / 80%);
animation: distort2 300ms linear infinite;
}

@keyframes distort1
{
0%
{
top: 49.5%;
left: 49.5%;
}

12.5%
{
top: 49.5%;
left: 50%;
}

25%
{
top: 49.5%;
left: 50.5%;
}

37.5%
{
top: 50%;
left: 50.5%;
}

50%
{
top: 50.5%;
left: 50.5%;
}

62.5%
{
top: 50.5%;
left: 50%;
}

75%
{
top: 50.5%;
left: 49.5%;
}

87.5%
{
top: 50%;
left: 49.5%;
}

100%
{
top: 49.5%;
left: 49.5%;
}
}

@keyframes distort2
{
0%
{
top: 50.5%;
left: 50.5%;
}

12.5%
{
top: 50%;
left: 50.5%;
}

25%
{
top: 49.5%;
left: 50.5%;
}

37.5%
{
top: 49.5%;
left: 50%;
}

50%
{
top: 49.5%;
left: 49.5%;
}

62.5%
{
top: 50%;
left: 49.5%;
}

75%
{
top: 50.5%;
left: 49.5%;
}

87.5%
{
top: 50.5%;
left: 50%;
}

100%
{
top: 50.5%;
left: 50.5%;
}
}

.gameover > .gameover_text > div.retry_game
{
margin-top: 19px;
}

.gameover > .gameover_text > div.retry_game > span:hover
{
box-shadow: 0px 3px 0px #4d085b;
margin-top: 5px;
}

.gameover > .gameover_text > p
{
color: #cfcfcf;
font-family: "Rajdhani", sans-serif;
margin-top: 10px;
font-size: 19px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 10px;
}

.gameover > .gameover_text > div.retry_game > span
{
display: inline-block;
font-size: 18px;
border-radius: 11px;
padding: 5px 30px;
text-transform: uppercase;
color: white;
font-family: "Rajdhani", sans-serif;
cursor: pointer;
background-image: linear-gradient(360deg, #9e09b5 0%, #6735e6 101%, #f13676 68%);
box-shadow: 0px 7px 0px #4d085b;
transition: 0.3s;
}

.game_completed
{
font-family: "Viga", sans-serif;
}

.game_completed > .image
{
}

.game_completed > .image > img
{
width: 210px;
margin-bottom: 0px;
}

.game_completed > .heading
{
padding: revert;
}

.game_completed > .heading > h4
{
color: #8c5eff;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 0px;
font-size: 21px;
max-width: 228px;
display: inline-block;
}

.game_completed > .heading > h3 > span
{
display: block;
}

.game_completed > .heading > h3 > span:nth-child(1)
{
color: transparent;
-webkit-text-stroke: 2px #8338ec;
}

.game_completed > .heading > h3 > span:nth-child(2)
{
color: #ae2be2;
animation: wave_animation 8s ease-in-out infinite;
position: absolute;
top: 0px;
width: 100%;
background: linear-gradient(90deg, #ff14ff 30.55%, #6c67ff 49.36%, #19f8ff 70.62%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.game_completed > .heading > h4 > span
{
display: block;
color: #ff44d8;
font-size: 22px;
margin-top: 6px;
margin-bottom: 1px;
}

.game_completed > .heading > h3
{
color: #fff;
font-size: 80px;
font-family: "Racing Sans One", sans-serif;
line-height: 0.8;
text-transform: uppercase;
margin: 0px;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}

.game_completed > .social_share
{
margin-top: 20px;
display: block;
}

.game_completed > .social_share > p
{
font-family: "Rajdhani", sans-serif;
color: transparent;
text-shadow: none;
font-size: 22px;
text-transform: uppercase;
line-height: 1;
margin-top: 35px;
animation: subtitle-neon-animation 0.8s linear forwards;
animation-delay: 1s;
text-align: center;
margin-bottom: 19px;
}

.game_completed > .social_share > div
{
}

.game_completed > .social_share > div > ul
{
list-style: none;
display: flex;
gap: 15px;
align-items: center;
justify-content: center;
margin: 0px;
padding: 0px;
}

.game_completed > .social_share > div > ul > li
{
}

.game_completed > .social_share > div > ul > li img
{
width: 30px;
}

.game_completed > .social_share > div > ul > li:last-child
{
margin-right: 0px;
}

@media only screen and (max-width: 800px)
{
.background > .arrows > .left,.background > .arrows > .right
{
display: none;
}

.gameplay > h3
{
font-size: 18px;
}

.background > .arrows > .top,.background > .arrows > .bottom
{
display: block;
}

.coming_soon_heading > h3
{
font-size: 60px;
}

.coming_soon_content > .coming_soon_subtitle
{
font-size: 28px;
}

.coming_soon_heading > h3
{
font-size: 60px;
}

.game_intro > .human_brain > img
{
width: 120px;
margin-bottom: 10px;
}

.game_intro > .heading > h3
{
font-size: 22px;
}

.game_intro > .heading > h3 > span.highlight
{
font-size: 42px;
}

.game_intro > .email_register > form
{
margin-top: 25px;
}

.game_intro > .email_register > form > .email_field > div
{
width: 240px;
}

.game_intro > .email_register > form > .email_field > div > label
{
font-size: 12px;
top: -8px;
}

.gameplay > div > .number
{
width: 270px;
background-size: 270px;
height: 150px;
}

.gameplay > div > .number > h4
{
font-size: 40px;
}

.gameover > .gameover_text > div > p
{
font-size: 60px;
}

.gameover > .gameover_text > div.tease_image > img
{
width: 145px;
margin-top: -10px;
margin-bottom: -10px;
}

.game_completed > .heading > h3
{
font-size: 57px;
margin-top: 10px;
margin-bottom: 10px;
}

.game_completed > .image > img
{
width: 165px;
}

.game_completed > .heading > h4
{
font-size: 17px;
}

.game_completed > .heading > h4 > span
{
font-size: 18px;
}

.game_completed > .social_share > p
{
font-size: 18px;
}

.game_completed > .social_share > div > ul > li img
{
width: 25px;
}

.game_completed > .social_share > div > ul
{
gap: 10px;
}
}