styles.css

h1{
    text-align: center;
    display: block;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
	background: #00AEEA;
	font-size: 2em;
	color: #FFF;
	border: none;
	border-radius: 6px;
    margin-top: 12;
}

body{
    background-color: #b64a47a9;
    background-image: url(Assets/wood_pattern.png);
}

#display-message{
    text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
	font-size: 2em;
	color: black;
}

.flex-game{
    background-image: url(Assets/board.png);
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin: 100 auto;
    background-position: center center;
    display: flex;
    flex-wrap: wrap;
}

.section:hover{
    /* background-image: url(Assets/red.png); */
    background-color: rgb(82, 132, 219);
    cursor: pointer;
    opacity: 0.3;
    /* background-size: 80% 80%;
    background-repeat: no-repeat;
    position: relative;
    background-position: center center; */
}

.red-coin{
    background-image: url(Assets/red.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    position: relative;
    opacity: 1;
    margin: 0 auto;
}


.yellow-coin{
    background-image: url(Assets/yellow.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    position: relative;
    opacity: 1;
    margin: 0 auto;
}

.flex-game > div{ /*Selects all div decendants of class flex-game*/
    margin-top: 3;
    margin-bottom: 5;
    margin-left: 10;
    margin-right: 3;
    width: 100px;
    padding: 10px;
}

#restart {
	display: block;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	background: #00AEEA;
	font-size: 1.5em;
	color: #FFF;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

#restart:hover {
	background: #1DC5FF;
}

#restart:active {
	background: #0787B3;
}