html, body {
	text-align: center;
	color: white;
	background: linear-gradient(90deg, #3498db, #e74c3c);
}
#chose {
	z-index: 2;
}
#choseHeader {
	height: 10vh;
	background-color: #1abc9c;
	position: relative;
	vertical-align: middle;
	text-align: center;
	line-height: 10vh;
}
#x, #o {
	height: 90vh;
	position: relative;
	vertical-align: middle;
	text-align: center;
	line-height: 90vh;
}
#x:hover, #o:hover {
	animation: lift 0.5s ease-in-out forwards;
}
@keyframes lift {
	100% {text-shadow: 0px 0px 15px black; transform: scaleX(1.1);}
}
#x, #sideX {
	background-color: #3498db;
	left: 0%;
}
#o, #sideO {
	background-color: #e74c3c;
	right: 0%;
}
#game {
	z-index: 1;
	text-align: center;
	position: relative;
}
#status {
	background-color: #2ecc71;
	height: 10vh;
	position: relative;
	display: none;
	vertical-align: middle;
	text-align: center;
	line-height: 10vh;
}
#sideX, #sideO {
	height: 80vh;
	position: relative;
	display: none;
	vertical-align: middle;
	text-align: center;
	line-height: 80vh;
}
#comment {
	background-color: #9b59b6;
	height: 10vh;
	position: relative;
	bottom: 0;
	display: none;
	vertical-align: middle;
	text-align: center;
	line-height: 10vh;
}
a, a:hover, a:visited, a:active {
	color: white;
	text-decoration: none;
}
#gameboard{
	display: none;
	background-color: #f39c12;
	height: 80vh;
	vertical-align: middle;
	position: relative;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
}
span {
	color: red;
	animation: heart 1s ease-in-out infinite;
}
@keyframes heart {
	0% {transform: scale(1);}
	50% {transform: scale(1.1); text-shadow: 0px 0px 5px darkred;}
	100% {transform: scale(1);}
}
#gameboard > div > div {
	height: 50px;
	width: 50px;
	background-color: #f39c12;
	position: relative;
	padding-top: 10px;
}
#grid0, #grid1, #grid2 {
	margin-top: 20vh;
}
#grid0, #grid3, #grid6 {
	margin-left: -2vw;
}
#grid0 {
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
#grid1 {
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}
#grid2 {
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}
#grid3 {
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
#grid4 {
	border: 1px solid black;
}
#grid5 {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}
#grid6 {
	border-top: 1px solid black;
	border-right: 1px solid black;
}
#grid7 {
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
}
#grid8{
	border-top: 1px solid black;
	border-left: 1px solid black;
}

@media only screen and (min-width: 320px) {
	#grid0, #grid3, #grid6 {
		margin-left: 6vw;
	}
	#status {
		font-size: 20px;
	}
	#comment {
		font-size: 17px;
	}
	#choseHeader {
		font-size: 20px;
	}
	#x, #o {
		font-size: 100px;
	}
	#sideX, #sideO{
		font-size: 30px;
	}
	#gameboard > div > div {
		font-size: 20px;
	}
}
@media only screen and (min-width: 375px) {
	#grid0, #grid3, #grid6 {
		margin-left: 11vw;
	}
	#status {
		font-size: 20px;
	}
	#comment {
		font-size: 17px;
	}
	#choseHeader {
		font-size: 20px;
	}
	#x, #o {
		font-size: 100px;
	}
	#sideX, #sideO{
		font-size: 33px;
	}
	#gameboard > div > div {
		font-size: 20px;
	}
}
@media only screen and (min-width: 425px) {
	#gameboard > div > div {
		width: 60px;
		height: 60px;
	}
	#grid0, #grid3, #grid6 {
		margin-left: 10vw;
	}
	#status {
		font-size: 20px;
	}
	#comment {
		font-size: 17px;
	}
	#choseHeader {
		font-size: 20px;
	}
	#x, #o {
		font-size: 100px;
	}
	#sideX, #sideO{
		font-size: 35px;
	}
	#gameboard > div > div {
		font-size: 20px;
	}
}
@media only screen and (min-width: 768px) {
	#grid0, #grid3, #grid6 {
		margin-left: 12vw;
	}
	#gameboard > div > div {
		width: 100px;
		height: 100px;
	}
	#status {
		font-size: 30px;
	}
	#comment {
		font-size: 20px;
	}
	#choseHeader {
		font-size: 25px;
	}
	#x, #o {
		font-size: 120px;
	}
	#sideX, #sideO{
		font-size: 50px;
	}
	#gameboard > div > div {
		font-size: 50px;
	}
}
@media only screen and (min-width: 1024px) {
	#grid0, #grid3, #grid6 {
		margin-left: 17vw;
	}
	#status {
		font-size: 30px;
	}
	#comment {
		font-size: 20px;
	}
	#choseHeader {
		font-size: 25px;
	}
	#x, #o {
		font-size: 150px;
	}
	#sideX, #sideO{
		font-size: 70px;
	}
	#gameboard > div > div {
		font-size: 48px;
	}
}
@media only screen and (min-width: 1440px) {
	#grid0, #grid3, #grid6 {
		margin-left: 17vw;
	}
	#gameboard > div > div {
		width: 140px;
		height: 140px;
	}
	#status {
		font-size: 30px;
	}
	#comment {
		font-size: 25px;
	}
	#choseHeader {
		font-size: 30px;
	}
	#x, #o {
		font-size: 200px;
	}
	#sideX, #sideO{
		font-size: 100px;
	}
	#gameboard > div > div {
		font-size: 80px;
	}
	#gameboard > div {
		margin-top: -30px;
	}
}