*{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

/* CSS for heading and bold text */
h1, h2, h3 , h4 , h5 ,h6 , strong{
	font-family: 'Russo One', sans-serif;
	color: var(--mainText);
	font-weight: 500;
   }
   
   /* CSS Secondary Text*/
   p, li , label , input , textarea {
	   font-family: 'Roboto Mono', monospace;
	   color: var(--secondaryText);
	   font-size: 15px;
   }
   
   span {
	font-family: 'Roboto Mono', monospace;
	color: var(--secondaryText);
	font-size: 26px;
   }
   
   a {
	   text-decoration: none;
	   color: #17a2b8;
   }
   
   h1 {font-size: 32px;}
   h2 {font-size: 28px;}
   h3 {font-size: 22px;}
   h4 {font-size: 20px;}
   h5 {font-size: 18px;}
   h6 {font-size: 16px;}


/* # Hash to get id*/
#game{
    width: 850px;
    height: 200px;
    border: 5px solid black;
    margin: auto;

	border-radius: 5%;

	box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	-webkit-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	-moz-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);

}	

.Score_Screen{
	border: 4px solid black;
	border-radius: 10%;

 	display: grid;

	 width: 200px;
	 height: 100px;

	 padding: 20px;

	 box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	 -webkit-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	 -moz-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);

}

.Two_colomn{
	display: flex;
	justify-content:space-evenly;

	padding-top: 20px;
	padding-bottom: 20px;

	margin-left: 20%;
	margin-right: 20%;

	
}

.HighScores{

	border: 4px solid black;
	border-radius: 5%;

	 /* Shadow Generated from cssgenerator.org*/
	

	 display: grid;


	 padding: 20px;

	 box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	 -webkit-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);
	 -moz-box-shadow: 1px 11px 5px 0px rgba(0,0,0,0.73);


}

#character{
	/*to move the starting position to bottom*/
	position: relative; 
	top: 150px;

	/*characters properties*/
	background-color: red;
	width: 20px;
	height: 50px;	
}

.animate{
    animation: jump 0.3s linear;
}

@keyframes jump{
	0%{top: 150px;}
	30%{top: 100px;}
	70%{top: 100px;}
	100%{top: 150px;}
}


#block{
	width: 20px;
	height: 20px;
	background-color: blue;

	position: relative;
	top: 130px;
	left: 0px;
	
	/*Add animation to block*/
	animation: block 5s infinite linear;
}

/*Create an animation*/
@keyframes block{
	0%{left:500px;}
	100%{left: -20px;}
}

p{
    text-align: center;
}


#audio-container{
	padding-top: 20px;
	margin: 0 auto; display: block;
	background-color: cadetblue;
}