style.css

/*----------------------------------------------------Index-----------------------------------------------------------*/
body {
	background-color: #ABF8FF;
}

h1 {
	font-size: 50px;
	padding: 10px;
	margin: 50px;
	font-family: 'Gochi Hand', cursive;
}

p {
	font-size: 22px;
	padding: 10px;
	margin-bottom: 50px;
	font-family: 'Saira Semi Condensed', sans-serif;
}

.opcoes img {
	width: 200px;
	border: 2px solid black;
}

.opcoes img:hover {
	opacity: 0.8;
}

.opcoes {
	margin: 20px;
	border: 2px solid black;
	background-color: #C2F9FE;
}

.opcoes-lista li{
	padding: 50px;
}


/*----------------------------------------------------Jogos-----------------------------------------------------------*/
.main-jogo {
	background-color: #AFF5FF;
}

.tabuleiro {
	width: 710px;
	height: 720px;
	border-radius: 10px;
}

.modo {
	position: absolute;
	transition: all 0.5s;
}

#tela-inicio {
	opacity: 0.5;
	z-index: 1; /*ordem de empilhamento*/
}

#tela-inicio img, #tela-final img {
	width: 710px;
	height: 720px;
}

#tela-final {
	opacity: 0;
	z-index: -1; /*ordem de empilhamento*/
}

#container {
	position: relative;
	margin: 50px auto;
	background-color: white;
	border: outset;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.peca {
	width: 220px;
	height: 220px;
	margin: 5px 10px 5px 10px;
	position: absolute;
	transition: left 0.5s, top 0.5s;
}

.peca img {
	width: 100%;
}

.peca:hover {
	border: inset;
	border-radius: 10px;
}

.coluna-imagem img{
	width: 210px;
	border: outset;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	margin-top: 10px;
}

.botao a {
	text-decoration: none;
	color: black;
	background-color: white;
	border: outset white;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 10px;
	font-size: 20px;
}

.botao:hover {
	background-color: #ABF8FF;
	opacity: 0.8;
}