@charset "UTF-8";

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


:root{
    --rosa01: #FFD9DA;
    --rosa02: #D895B1;
    --rosa03: #AC274F;
    --cinza1: #382E31;
    --cinza2: #191516;
    --font-poppins: "Poppins", sans-serif;
    --font-logo: "DM Serif Text", serif;
}

/*
    --rosa01: #E6BED2;
    --rosa02: #D895B1;
    --rosa03: #BF7896;
    --rosa04: #9B5372;
    --cinza: rgb(39, 35, 39);
*/

body{
    font-family: var(--font-poppins);
    background-color: var(--cinza2);
}

/*Header*/

div#header{
    display: grid;
    grid-template-areas: "header nav";
    align-items: center;
    justify-content: space-between;
    background-color: var(--cinza1);
    border-bottom: 1px solid rgb(48, 44, 44);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.336);
}

header{
    grid-area: header;
}

header > h1{
    font-family: var(--font-logo);
    padding: 20px;
    color: var(--rosa03);
}

nav{
    grid-area: nav;
    position: relative;
    padding: 20px;
    color: var(--rosa03);
}

nav > a{
    padding: 6px 10px;
    color: var(--rosa03);
}

nav > a:hover{
    border-radius: 3px;
    color: var(--cinza1);
    background-color: var(--rosa03);
}

span#nav-simbol{
    display: none;
    margin-right: 10px;
    padding: 10px;
    color: var(--rosa03);
}

@media (max-width: 500px) {
    nav > a{
        display: none;

    }

    span#nav-simbol{
        display: block;
    }

}

main{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  background-color: var(--cinza1);
  padding: 20px;
  border-radius: 10px;
  color: var(--rosa02);
  text-align: center;
}

main > h1{
  text-align: center;
  margin: 10px;
}

p{
  font-size: 15px;
  margin: 5px;
}

input#letra{
  margin-top: 10px;
}

input#enviar{
  font-family: var(--font-poppins);
  background-color: var(--cinza1);
  border: 1px solid var(--rosa02);
  padding: 1px 4px;
  color: var(--rosa01);
  border-radius: 3px;
}

input#enviar:hover{
  background-color: var(--rosa01);
  color: var(--cinza1);
}

span.mark{
  background-color: #FFD9DA;
  color: var(--rosa03);
  padding: 2px 3px;
  border-radius: 3px;
}

main > div{
  margin: 10px;
}