*{
	margin: 0;
	padding: 0;
}

html{
	--gameWidth: 300px;
	--hotBarHeight : 40px;
}

.pos{
	
	position: absolute;	
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	
	padding: 5px;
	
	border-radius: 10px;
	
	background-color: #eee;
	
}

/*-----------------------------------gameField----------------------------------------*/

#gameField {
	
	position: relative;	
	
	width : var(--gameWidth);
	height: var(--gameWidth);
}


[id="0"] { border-radius: 10px 0 0 0; }	
[id="2"] { border-radius: 0 10px 0 0; }
[id="6"] { border-radius: 0 0 0 10px; }
[id="8"] { border-radius: 0 0 10px 0; }
[id="0"]::after { border-radius: 10px 0 0 0; }	
[id="2"]::after { border-radius: 0 10px 0 0; }
[id="6"]::after { border-radius: 0 0 0 10px; }
[id="8"]::after { border-radius: 0 0 10px 0; }

/*WinLoseInfo*/

#gameField div {
	
	border:1px solid #000;
	width : calc(100%/3);
	height: calc(100%/3);
	box-sizing: border-box;
	float:left; 
	background-color: white;
	
	transition: 0.5s ease-out;	
	
}

#gameField div[class="lose"]{ background-color: #ffdede; }
#gameField div[class="win"]{  background-color: #dfffde; }

/*darkenWhenHover*/

#gameField div::after { 

	content: '';  
	position: absolute;
    width: calc(100%/3);
    height: calc(100%/3);
	background-color : rgba(50,50,50,0); 
	transition: 0.3s ease-out;	
}

#gameField div:hover::after { 

	background-color : rgba(50,50,50,0.2); 
}

/*XO-Image*/

#gameField div::before { 

	content: '';  
	position: absolute;
    width: calc(100%/3);
    height: calc(100%/3);
	background-size: cover;
	opacity: 0; 
	transition: 0.3s ease-out;
}

#gameField div[class="X"]::before { background-image: url(img/X.png); opacity: 1; }
#gameField div[class="O"]::before { background-image: url(img/O.png); opacity: 1; }

/*-----------------------------------HotBar----------------------------------------*/

.hotBar{
	
	position: relative;
	
	width: var(--gameWidth);
	height: var(--hotBarHeight);
	
	margin-bottom: 5px;	
}

/*InfoText*/

.status{
	
	font-size: calc(var(--hotBarHeight)*0.9);
	text-align: center;
	line-height: (--hotBarHeight);
}

.status::before{
	
	content: "";
	color: rgba(0,0,0,0);
	background-size: cover;	
}

.iX::before{ content: "m."; background-image: url(img/X.png); }
.iO::before{ content: "m."; background-image: url(img/O.png); }

/*resetButton*/

.reset{
	
	position: absolute;
	top: 0;
	bottom: 0;	
	padding-left: 10px;
	padding-right: 10px;
	border: none;
	outline: none;
	font-size: calc(var(--hotBarHeight)*0.5);
	background-color: #eee;
	border-radius: 5px;
	transition: 0.3s ease-out;	
}

.reset:hover{
	
	background-color: lightGreen;
	cursor: pointer;
}

/*backButton*/

.back{
	
	position: absolute;
	top: 0;
	right: 0;
	
	width : var(--hotBarHeight);
	height: var(--hotBarHeight);
	
	border-radius: 5px;
	
	background-image: url(img/back.png);
	background-size: cover;
	filter: brightness(100%);
	transition: 0.3s ease-out;
}

.back:hover{ filter: brightness(150%); }