@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --font-family: "Poppins", sans-serif;
}

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

header {
  width: 100%;
  height: 8.125rem;
  padding: 0.625rem 3.125rem;
  background: #003d7c;
  background: linear-gradient(180deg, #003d7c 6%, rgb(54, 97, 216) 81%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  width: 18.75rem;
}

header .logo img {
  width: 100%;
}

header .header_descript {
  text-align: right;
  font-family: var(--font-family);
  color: #fff;
}

header .header_descript p {
  font-size: 1.875rem;
  font-weight: bold;
  margin-bottom: 0.3125rem;
}

header .header_descript span {
  font-size: 1.25rem;
}

/* -------------------------------------------------------- */

main {
  width: 100%;
  min-height: calc(100vh - 130px - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://sfo3.digitaloceanspaces.com/e-fuente/e-fuentedevida.net/inventario2_0/img/bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

main form {
  position: relative;
  padding: 5rem 2.5rem 2.5rem 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  flex-direction: column;
  background: rgb(46, 82, 179);

  -webkit-box-shadow: inset 0px -1px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -1px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -1px 14px 0px rgba(0, 0, 0, 0.75);
}

main form .form_logo {
  width: 9.375rem;
  position: absolute;
  top: -90px;
  transform: rotate(-5deg);
}

main form .form_logo img {
  width: 100%;
  filter: drop-shadow(5px 5px 10px #000000);
}

main form .inputBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.25rem 0;
}

main form .inputBox input {
  padding: 0.625rem 0.9375rem;
  margin-left: 1.25rem;
  border-radius: 0.625rem;
  border: none;
  transition: 0.3s;
  font-family: var(--font-family);
  width: 16.25rem;
}

main form .inputBox input:hover {
  box-shadow: 1px 1px 7px #fff;
}

main form .inputBox button {
  padding: 0.625rem 0.9375rem;
  border-radius: 0.625rem;
  border: none;
  transition: 0.3s;
  font-family: var(--font-family);
  cursor: pointer;
}

main form .inputBox button:hover {
  transform: scale(1.1);
  box-shadow: 1px 1px 7px #fff;
}

main form .inputBox i {
  font-size: 20px;
  color: #fff;
}

/* -------------------------------------------------------- */

footer {
  width: 100%;
  height: 2.5rem;
  background: rgb(74, 117, 231);
  background: linear-gradient(180deg, rgb(54, 97, 216) 6%, #004385 81%);
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .footer_contents {
  color: #fff;
  font-family: var(--font-family);
  text-align: center;
}

footer .footer_contents p span {
  color: rgb(122, 206, 255);
}

/* -------------------Medias-------------------- */

@media screen and (max-width: 800px) {
  header {
    padding: 1.5625rem;
  }

  header .logo {
    width: 14.375rem;
  }

  header .header_descript p {
    font-size: 1.375rem;
  }

  header .header_descript span {
    font-size: 0.9375rem;
  }

  footer .footer_contents p {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 590px) {
  header {
    padding: 1.25rem;
  }

  header .logo {
    width: 13.75rem;
  }

  header .header_descript p {
    font-size: 1.25rem;
  }

  header .header_descript span {
    font-size: 0.8125rem;
  }

  footer .footer_contents p {
    font-size: 0.625rem;
  }
}

@media screen and (max-width: 500px) {
  header {
    padding: 1.125rem;
  }

  header .logo {
    width: 12.5rem;
  }

  header .header_descript p {
    font-size: 1.125rem;
  }

  header .header_descript span {
    font-size: 0.625rem;
  }

  main form {
    padding: 5rem 1.25rem 2.5rem 1.25rem;
  }

  main form .inputBox input {
    width: 15.625rem;
  }
}

@media screen and (max-width: 380px) {
  main form .form_logo {
    width: 6.25rem;
    top: -2.5rem;
  }
}

@media screen and (max-width: 340px) {
  main form {
    padding: 5rem 0.625rem 2.5rem 0.625rem;
  }

  main form .inputBox input {
    width: 14.375rem;
  }
}

@media screen and (max-width: 340px) {
  header {
    flex-direction: column;
  }

  header .header_descript {
    margin-top: 1.25rem;
    text-align: center;
  }

  main form {
    padding: 5rem 0.625rem 2.5rem 0.625rem;
  }

  main form .inputBox input {
    width: 12.5rem;
  }
}

@media screen and (max-width: 280px) {
  main form .form_logo {
    width: 6.25rem;
    top: -2.5rem;
  }
}