/*
 *  Game: Tic-Tac-Toe 
 *  Preset: style.css
 *  Version: 1.0
 *  Author: DevDJ
 */

:root {
	--dd-game-name: #ff2400;
	--cross: #ff0000;
	--cross-background: #d80000;
	--circle: #13d913;
	--circle-background: #02b92b;
	--dd-game-background: #ffc107;
}
*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	width: 100%;
	height: 100%;
	font-size: 10px;
	background: var(--dd-game-background);
}
header {
	margin-top: 4%;
	text-align: center;
	color: var(--dd-game-name);
	margin-bottom: 2rem;
}
.title {
	font-family: 'Pacifico', cursive;
	font-size: 4.8rem;
	margin-bottom: 2rem;
}
.subtext, .scoreboard span,
.scoreboard p {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.6rem;
	color: rgb(56, 57, 63);
}
.subtext span,
.scoreboard span {
	font-weight: 900;
}
.game-content {
	position: relative;
	background-color: rgb(226, 226, 226);
	width: 600px;
	height: 600px;
	margin: 0 auto;
	padding: 0.5rem;
	border-radius: 6px;
}
.gameboard-container {
	height: 100%;
	display: flex; 
	align-items: center; 
	justify-content: center;
	}
.gameboard {
	width: 100%;
	height: 100%;
	display: flex;  
	flex-wrap: wrap;
}
.scoreboard {
	position: absolute;
	right: 5%;
	top: 40%;
}
@media(max-width: 1362px){
 .scoreboard {
	position: relative;
	right: 0;
	margin-top: 2rem;
 }
}
.box {
	position: relative;
	width: 100%;
	height: 33.3333333%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-basis: 33.3333333%;
	background: #fff;
	border: .5rem solid rgb(226, 226, 226);
	font-size: 8rem;
	padding: 0;
}
.circle, .times {
	font-family: "Font Awesome 5 Free";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
}
.circle:before, .times:before {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 8rem;
}
.times:before {
	background-color: var(--cross-background);
	color: var(--cross);
	font-weight: 900;
	content: "\f00d";
}
.circle:before {
	background: var(--circle-background);
	color: var(--circle);
	font-weight: 400;
	content: "\f111";
}
.btn-game,
.btn-clear {
	margin: 2rem 0;
}