*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a
{
	color: black;
	text-decoration: none;
}

body
{
	height: 100vh;
	width: 100%;
	margin: 10 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

header
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 20px;
	text-align: center;
	margin: 20px;
	width: 80%;
}

header > hr
{
	border: 1px dashed black;
	width: 50%;
}

section
{
	width: 630px;
	height: 630px;
	border: 5px solid black;
	border-radius: 5px;
	background-color: white;
}

main
{
	margin: 50px auto;
}

body > hr
{
	width: 70%;
	border: 1px dashed black;
	text-align: center;
}

footer
{
	margin: 20px 20px;
	padding: 10px;
	align-items: center;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 80%;
}

button > span
{
	font-size: 50px;
}

div.grid
{
	display: grid;
	grid-template-rows: 200px 200px 200px;
	grid-template-columns: 200px 200px 200px;
	gap: 10px;
}

body > div.container
{
	width: 100%;
	display: flex;
	justify-content: space-around;
}

aside
{
	padding: 50px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

aside > h2
{
	text-decoration: underline;
	font-size: 40px;
}

aside > p
{
	font-size: 45px;
}

button
{
	height: 200px;
	width: 200px;
	background-color: white;
	border-radius: 5px;
	transition: background-color, 300ms;
}

button:hover
{
	background-color: lightgray;
}

button:active 
{
	background-color: black;
}

button.invis
{
	opacity: 0;
}

button.unvis
{
	opacity: 100%;
}

section.invis
{
	opacity: 100%;
	border: none;
}

button.win
{
	border: 5px solid green;
}

button.lose
{
	border: 5px solid red;
}

button.taken
{
	animation-name: taken;
	animation-duration: 500ms;
}

h1
{
	font-size: 60px;
}

h2#winCon
{
	text-align: center;
	margin: 20px;
	height: 20px;
}

@keyframes taken
{
	0% {border-color: black; transform: scale(1);}
	50% {border:5px solid red; transform: scale(1.2);}
	100%{border-color:black; transform: scale(1);}
}