*::selection{
  color: #FFF;
  background-color: #5D0C1D;
}
.imagem{
  width:200px;
  height:120px;
  margin-left:50px;
  margin-top:50px;
}
h1, h2, h3, h4{
align-items: center;
}
html{
  scroll-behavior: smooth;
}
/* -------------------- Página do vencedor --------------------*/
.vencedor{
  padding: 5% 8%;
  margin: 5% 10%;
  text-align: center;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}
.vencedor a{
  text-decoration: none;
  color: #FFF;
}
.vencedor button{
  text-transform: uppercase;
  font-weight: 300;
  background: #5D0C1D;
  color: #DDD9CE;
  width: 10rem;
  height: 2.25rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.vencedor button:hover{
  background-color: #741127;
  color: #999;
  transition: .3s;
}

/* ---------------------- Escolhendo nome de usuário e avatar para jogar ----------------------- */
.selecao{
margin: 2% 10% 5% 10%;
padding: 20px 40px;
background-color: #EAD3C1;
font-size: 16px;
height: 570px;
width: 80%;
border: 8px double;
border-radius: 10px;
-webkit-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
}
.text-username input {
color: #5D0C1D;
font-weight: 500;
background: transparent;
border: none;
border-bottom: 1px solid #5D0C1D;
padding: 0.5rem 0;
margin-bottom: 1rem;
outline: none;
}
.avatar img{
  border: 2px solid #5D0C1D;
  border-radius: 100%;
  cursor:pointer;
}
.avatar img:hover{
  border: 4px solid #5D0C1D;
}
.info{
position: static;
}
.sobre{
  position:absolute;
  width:28%;
  border-left: 2px solid #5D0C1D;
  margin-left: 250px;
  margin-top:-200px;
  padding-left: 15px;
  position: absolute;
  left: 32%;
  top: 62%;
  bottom: 35%;
  text-align: justify;
}
.button{
  text-transform: uppercase;
  font-weight: 300;
  background: #5D0C1D;
  color: #DDD9CE;
  width: 10rem;
  height: 2.25rem;
  border: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  position: relative;
  bottom: 80px;
}
.button:hover{
  background-color: #741127;
  color: #999;
  transition: .3s;
}
#escolher_1{
  position:relative;
  width: 150px;
  left: 350px;
  bottom: 170px;
  cursor:pointer;
  font-size: x-large;
  background-color:#430A20;
  padding:10px;
  border: 2px solid white;
  border-radius:10px;
  color:white;
}
#escolher_1:hover{
  color: rgb(214, 202, 202);
  border: 3px inset rgb(228, 207, 207);
  transition: .3s;
}
#escolher_2{
  position:relative;
  width: 150px;
  left: 350px;
  bottom: 160px;
  cursor:pointer;
  font-size: x-large;
  background-color:#9A825F;
  padding:10px;
  border: 2px solid white;
  border-radius:10px;
  color:white;
}
#escolher_2:hover{
  color: black;
  border: 3px inset rgb(43, 41, 41);
  transition: .3s;
}
#chibi{
  position:absolute;
  margin-left: 82%;
  margin-top:-50px;
  width:30%;
}

/* ----------------------- Footer ----------------------- */
*, *:before, *:after {
box-sizing: border-box;
}
.footer html {
font-size: 100%;
}
body {
font-family: acumin-pro, system-ui, sans-serif;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
font-size: 14px;
background-color: #EAD3C1;
color: #5D0C1D;
align-items: start;
min-height: 100vh;
}
.footer {
display: flex;
flex-flow: row wrap;
padding: 30px 30px 20px 30px;
color: #FFF;
background-color: #5D0C1D;
border-top: 1px solid #e5e5e5;
}
.footer > * {
flex:  1 100%;
}
.logo {
margin-right: 1.25em;
margin-bottom: 2em;
}
.titulo {
font-weight: 500;
font-size: 15px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
.contato_nav {
display: flex;
  flex-flow: row wrap;
}
.contato_nav > * {
flex: 1 50%;
margin-right: 1.25em;
}
.nome a {
color: #999;
}
.nome a:hover{
  color: #e4c99f;
  transition: 0.2s;
  font-size: 15px;
  font-weight: 500;
}
.legal {
display: flex;
flex-wrap: wrap;
color: #FFF;
}
@media screen and (min-width: 24.375em) {
.legal {
  margin-left: auto;
}
}
@media screen and (min-width: 40.375em) {
.contato_nav > * {
  flex: 1;
}
.logo {
  flex: 1 0px;
}
.contato_nav {
  flex: 2 0px;
}
}

/* ------------------- Barra de Navegação ------------------------ */
header {
  background-color: #5D0C1D;
  width: 100%;
  height: 80px;
}
.nav ul {
display: flex;
list-style-type: none;
justify-content: right;
position: static;
}
.nav li {
margin: 20px;
}
.home img{
width: 200px;
height: 50px;
margin: 15px 30px;
}
.mutar{
width: 48px;
height: 50px;
position: relative;
bottom: 100px;
margin-right: 30px;
}

/*-----O 'X' E A 'O' DO JOGO-----*/
.imagem{
  margin-left:50px;
  margin-top:50px;
}

/* ----------------------- Como jogar --------------------- */
.tutorial{
  border-radius: 15px;
  padding: 2% 5%;
  margin: 4% 20% 5% 20%;
  border: 10px double #9A825F;
  background-color: #741127;
  color: #FFF;
  font-size: 17px;
}
.tutorial h3{
  font-size: 20px;
}
.tutorial li{
  margin-top: 1%;
}