@font-face {
    font-family: 'Prometo_Ultra_Bold';
    src: url("../fonts/Prometo_Trial_XBd.ttf") format('truetype');
}

@font-face {
    font-family: 'Prometo_Bold';
    src: url("../fonts/Prometo_Trial_Bd.ttf") format('truetype');
}

@font-face {
    font-family: 'Prometo_Medium';
    src: url("../fonts/Prometo_Trial_Md.ttf") format('truetype');
}

@font-face {
  font-family: 'Prometo_Regular';
  src: url("../fonts/Prometo_Trial_Rg.ttf") format('truetype');
}

@font-face {
  font-family: 'Prometo_Ligth';
  src: url("../fonts/Prometo_Trial_Lt.ttf") format('truetype');
}


:root {
  --cor_branca: #f1eadbff;
  --cor_laranja: #ec4226ff;
  --cor_preta: #292522ff;
}


body {
  height: 100vh;
  width: 100vw;
  font-family: 'Prometo_Medium';
  color: var(--cor_preta);
  background-color: var(--cor_preta);
}

main {
  height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main > img {
  width: 30vw;
}

main > label {
  height: 2.5vh;
  width: 30vw;
  margin-top: 10vh;
  margin-bottom: 2.5vh;
  font-family: 'Prometo_Ligth';
  font-size: 2.5vh;
  text-align: center;
  color: var(--cor_branca);
}

main > input {
  border: none;
  padding: none;
  border-radius: 5vh;
  margin-bottom: 2vh;
  height: 7.5vh;
  width: 30vw;
  font-family: 'Prometo_Ligth';
  font-size: 2.5vh;
  text-align: center;
  outline: none;
  color: var(--cor_preta);
  background-color: var(--cor_branca);
}

main > div {
  height: 5vh;
  width: 20vw;
  display: none;
  border: solid var(--cor_laranja) 0.25vh;
  border-radius: 5vh;
}

main > div > p {
  font-family: 'Prometo_Regular';
  text-align: center;
  color: var(--cor_laranja);
  display: table-cell;
  vertical-align: middle;
}

main > button {
  border: none;
  padding: none;
  border-radius: 5vh;
  margin-top: 2vh;
  margin-bottom: 15vh;
  height: 5vh;
  width: 20vw;
  font-family: 'Prometo_Ligth';
  letter-spacing: 0.1vw;
  font-size: 2vh;
  color: var(--cor_branca);
  background-color: var(--cor_laranja);
}

main > button:hover {
  border: solid var(--cor_branca);
}

main > button:active {
  background: var(--cor_branca);
  color: var(--cor_laranja);
}

footer {
  height: 5vh;
  font-size: 2vh;
  color: var(--cor_branca);
  font-family: 'Prometo_Medium';
  display: grid;
  justify-content: center;
  align-items: center;
}


@media screen and (max-width: 480px) {
  main > img {
    width: 60vw;
  }

  main > label {
    height: 2.5vh;
    width: 75vw;
    margin-top: 7.5vh;
    margin-bottom: 1.5vh;
    font-family: 'Prometo_Ligth';
    font-size: 1.75vh;
    text-align: center;
    color: var(--cor_branca);
  }

  main > input {
    border: none;
    padding: none;
    border-radius: 5vh;
    height: 5vh;
    width: 75vw;
    font-family: 'Prometo_Ligth';
    font-size: 1.75vh;
    text-align: center;
    outline: none;
    color: var(--cor_preta);
  }

  main > div {
    height: 5vh;
    width: 60vw;
    display: none;
    font-size: 1.75vh;
    border: solid var(--cor_laranja) 0.25vh;
    border-radius: 5vh;
  }
  
  main > div > p {
    font-family: 'Prometo_Regular';
    text-align: center;
    color: var(--cor_laranja);
    display: table-cell;
    vertical-align: middle;
  }

  main > button {
    border: none;
    padding: none;
    border-radius: 5vh;
    margin-top: 2.5vh;
    margin-bottom: 10vh;
    height: 5vh;
    width: 60vw;
    font-family: 'Prometo_Ligth';
    letter-spacing: 0.1vw;
    font-size: 1.75vh;
    color: var(--cor_branca);
    background-color: var(--cor_laranja);
  }

}