@font-face {
    font-family: myFirstFont;
    src: url(./assets/spooky-strikes/Spooky\ Strikes\ -\ TTF.ttf);
}
  

.base{
	display: flex;
	align-items: center;
	align-items: flex-start;
	align-content: center;
	justify-content: center;

}

.title1{
	font-family: myFirstFont;
	position: fixed;
	margin-top: -260px;
	font-size: 90px;
	color: black;
}
.title2{
	font-family: myFirstFont;
	position: fixed;
	margin-top: -150px;
	font-size: 90px;

}
.fixed{
	position:fixed;
}

#counter{
	text-align: center;
	background-color: white;
	opacity: 0.8;
	width: 250px;
}

#advisory{
	margin-top:550px;
	text-align: center;
	background-color: white;
	opacity: 0.5;
	width: 350px;
	font-size: 2px;
	pointer-events: none;
	cursor: default;
	
}
.arrows{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#Leftarrows{
	margin-top: -50px; 
	margin-left: -120px;
	opacity: 0.4;
}

#Rightarrows{
	margin-top: -50px; 
	margin-left: 140px;
	opacity: 0.4;
}
#Toparrows{
	margin-top: -140px;
	margin-left: -10px;
	opacity: 0.4;
}
#Btmarrows{
	margin-top: 110px; 
	opacity: 0.4;
}

span{
	font-size: 30px;
	color: Black;
	opacity: 1;
}

.buttonscreen{
	/* display:flex;		 */
	align-items: center;
	justify-content: center;
	inset: 0px 0px 0px 0px;
	
}

.avatarScreen{	
	margin: 400px;
	justify-content: space-around;

}

.bg-white{
	background-color: gray;
	width: 350px;
	padding: 10px;
	text-align: center;
	opacity: 0.95;
}

.avatar_button{
	width: 350px;
	margin-left: 150px; 
	opacity: 80%;
}
.scoreInbutton{
	font-size: 40px;
	font: bold;
}
p{
	margin-left: 30px;
	color: black;
	font-size: 20px;
	font-weight: bolder;
	
}
p2{	
	color: black;
	font-size: 20px;
	font-weight: bolder;
	
}
.prevent-select {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
  }
.startButton{
	background-color: rgb(30,144,255);
	color: white;
	font-size: 20px;
	border-radius: 20px;
}
.backFirstpgbtn{
	background-color: rgb(30,144,255);
	color: white;
	font-size: 20px;
	border-radius: 20px;
}

#canvas_back{
	width: 840px; 
	height: 770px;
	align-items:center;
	background-size: contain;
	border: 4px solid black; 
	image-rendering: pixelated;
	/* background-image: url("./assets/pokesilenthills.png"); */
	margin-left: auto;
	margin-right: auto;
	position: absolute;
}

@media only screen and (max-width: 600px) {
	#canvas_back {background-color:  red;}
  }

/* playselection */
#canvas_start{
	margin-top: 20px;
	margin-left: 100px;
	width: 200px; 
	height: 200px;
	align-content:center;
	background-size: contain;
	/* border: 4px solid black;  */
	image-rendering: pixelated;
	/* background-image: url("/assets/PokeGoldDemo-SilentHills.png"); */
	/* background-image: url("./assets/halloweenwallpaper.png"); */
	margin-left: auto;
	margin-right: auto;
	position: fixed;
}


.this{
	font-size: 30px;
}

#firstPlayerSelect{
	background-color: transparent;
	transition-duration: 0.4s;
	width: 100px;
	height: 70px;

}
#firstPlayerSelect:hover {
	background-color: transparent;
	border: solid #76F96D;
  }

#secondPlayerSelect{
	background-color: transparent;
	transition-duration: 0.4s;
	width: 100px;
	height: 70px;

}
#secondPlayerSelect:hover{
	background-color: transparent;
	color: black;
	border: solid #FBED64 ;
}


#avatar_startGame{
	background-color: #F8CB63;
	color: black;
	border: solid black;
	transition-duration: 0.4s;
	width: 100px;
	height: 50px;
	border-radius: 20px;
	visibility: hidden;

}

#startGameDiv{
	margin-top: 200px;;
}

.bc {

	display: flex;
	/* justify-content: center; */
	position: fixed;
	margin-top: -330px;
	font-size: 90px;
	color: black;
    
  }
.donate{

	display: flex;
	/* justify-content: center; */
	position: fixed;
	margin-top: -380px;
	font-size: 30px;
	color: rgb(221, 173, 0);
}