:root{
	--timeCounterColor: #fefe86;
	--playerOneColor: #dfaa04;
	--optionsBorderColor: #576089;

}

html, html *{
	cursor: url("/assets/smash/icons/pointerGlove_sm.png") 70 40, auto
}

body{
	display: flex;
	background-image: url('/assets/smash/background-texture.jpg');
	height: 100vh;
	margin: 0;
}


#characterSelect{
	width: 50vw;
	height: 100%;
	margin: auto;
	display: grid;
	grid-template-rows: 0fr 0fr 0fr;	

	border-left: 1px solid #fff;
	border-right: 1px solid #fff;

}


#header_pattern {
    display: grid;
    grid-template: 50px / 1fr 1fr 1fr;
    margin-bottom: 7px;
    margin-top: 10px;
}

#playerText h1{
	color: var(--playerOneColor);
}

#timeCounter{
	border-radius: 100px;
	background-color: var(--timeCounterColor);
	color: red;
	display: flex;
	justify-content: space-evenly;
}
.timeCounter__btn--sub, .timeCounter__btn--add{
	background: transparent;
}

#backBtn{
	display: flex;
	margin: auto;
}


#charHolder_pattern{
	display: grid;
	grid-template: 150px 150px / 1fr 1fr 1fr 1fr 1fr 1fr;
}

.charThumbnail{
	background-size: cover;
	background-repeat: no-repeat;
}

#playerData{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 500px;
	height: 100%;
	padding: 10px;
	align-items: center;
}
#playerData .container{
	height: 80%;
	width: 80%;
	background: green;
	border-radius: 11px;
	background-image: url(/assets/smash/icons/cardBg.png);
	position: relative;
}

#playerOne{
	position: absolute;
	left: 20px;
	font-size: 3em;
	letter-spacing: 30px;
}
#playerOne h1{
	color: rgba(0,0,0,0.5);	
	margin: 0;
}

#stage{
	position: absolute;
    width: 150px;
    height: 150px;
    left: 30%;
    top: 50%;
    background: blue;
}

#options_pattern{

}