body {
  background-color: #bfbfbf;
  color: #eee6ae;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  background: #4c5958;
  border-radius: 10px;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.363);
  display: flex;
  flex-flow: column nowrap;
  padding: 10px;
  flex: 0 1 440px;
  height: 600px;
}

.main__titulo {
  color: white;
  font-size: 1.5em;
  font-family: var(--font-default);
  margin: 5px 0;
}

/*Formulario*/
.form-container {
  display: grid;
  font-size: .9em;
  flex: 0 1 92%;
  grid-template: .5fr .5fr.5fr .5fr .4fr .3fr / 1fr 1fr;
  grid-template-areas:
    "primeiro segundo"
    "rua numero"
    "complemento complemento"
    "cep bairro"
    "cidade estado"
    "botao botao";
  justify-content: space-evenly;
  width: 100%;
}

/*Todos os inputs*/
.form-container input {
    all: unset;
    color: white;
    border-bottom: 1px solid white;
    width: 95%;
}

.form-container input::placeholder {
    padding-left: 5px;
}

.form-container input:focus {
    border-bottom: 1px solid yellow;
}

/*Todos os labels*/
.form-container label {
    display: block;
    margin-bottom: 10px;
}

/*Nome e sobrenome*/
.primeiro-nome {
  grid-area: primeiro;
}

.segundo-nome {
    grid-area: segundo;
}

/*Rua/Avenida*/
.form-item__rua {
  grid-area: rua;
}

/*Numero da casa*/
.form-item__numero {
    grid-area: numero;
}

/*Complemento*/
.form-item__complemento {
    display: flex;
    flex-flow: column nowrap;
    grid-area: complemento;
}

/*Cep e bairro*/
.form-item__cep {
    grid-area: cep;
}

.form-item__bairro {
    grid-area: bairro;
}

/*Cidade*/
.form-item__cidade {
    grid-area: cidade;
}

/*Estado*/
.form-item__estado {
    grid-area: estado;
}

/*Botao de envio*/
.form-item__btn {
    all: unset;
    border: 1px solid white;
    border-radius: 25px;
    margin-right: 8%;
    text-align: center;
    justify-self: right;
    grid-area: botao;
    height: 65%;
    width: 10em;
}

.form-item__btn:active {
    background: white;
    color: black;
    transform: translate(3px, 3px);
    transition: transform .5s ease;
}

/*midia mobile*/
@media (max-width: 768px) {
  body {
    display: block;
  }

  main {
    border-radius: 0;
    box-shadow: none;
    height: 100vh;
    width: 100vw;
  }

  .main__titulo {
    margin: 25px 0;
  }

  .form-container {
    flex: 0 1 62%;
  }
}