/* FONTS */
@font-face {
  font-family: Overpass;
  src: url(fonts/Overpass-Regular.ttf);
}

@font-face
{
	font-family: Pokemon Classic;
	src: url(fonts/Pokemon-Classic.ttf);
}
@font-face
{
	font-family: IBM Plex Sans;
	src: url(fonts/IBMPlexSans-Regular.ttf);
}
@font-face
{
	font-family: IBM Plex Sans Bold;
	src: url(fonts/IBMPlexSans-Bold.ttf);
}



body
{
	font-family: IBM Plex Sans;
	background-color: #F5F5F5;
}

#background1
{
	position: fixed;
	z-index: 0;
	width: 100vw;
	height: 100vh;
/*	background-color: blue; */


background-color: #18188d;
opacity: 1;
background-image: linear-gradient(0deg, #A086C1 30%, #9FF0F9 10%);
background-size: 50px 60px;
}
#background2
{
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	background-color: #A086C1; 


   
      
      
      border-radius: 0% 50% 0% 50% / 60% 60% 40% 40%;
    
}


/* TITLE */
#title 
{
	text-align: center;
	z-index: 2;
}
#title h1
{
	font-family: IBM Plex Sans;
	font-size: 8em ;
	text-shadow: 4px 4px #9FF0F9;
	color: white;
} 


/* DESCRIPTION */
#zone_test_score
{
	text-align: center;
	color: white;
	z-index: 2;
	margin-top: 10px;
}
#score
{
	font-size: 3.5em;
	z-index: 2;

	/*font-family: Pokemon Classic;*/
	color: white;
}

/* Start the Game */
#start_the_game, #restart_the_game
{
	text-align: center;
	z-index: 2;
	font-size: 1.3em;
	background-color: #9FF0F9;
	border: 3px #9FF0F9 solid;
	color: white;
	padding: 15px;
	transition: background-color ease-in-out 500ms, color ease-in-out 500ms;
}
#start_the_game:hover, #restart_the_game:hover
{
	cursor: pointer;
	background-color: #A086C1;
	border: ;
	color: #9FF0F9;
}
#restart_the_game
{
	display: none;
}


/* GAME */
#game
{
	z-index: 2;
	text-align: center;
}
#game_here
{
	z-index: 2;
	border: 2px #9FF0F9 solid;
	background-color: white;
	margin-top: 10px;
}

#buttons
{
	display: none;
}

#up
{ transform: rotate(270deg);}
#go_left
{ transform: rotate(180deg);}
#down
{ transform: rotate(90deg);}
#go_left, #go_right, #up, #down
{
	text-align: center;
	z-index: 2;
	font-size: 2em;
	color: white;
	text-shadow: 2px 2px #9FF0F9;
}


/* FOOTER*/
#footer
{
	text-align: center;
	z-index: 2;
	font-size: 0.8em;
	color: white;
}