* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  transition: all 0.4s ease-in-out;
}

body {
  background-color: #96c3ec;
}

.caixa {
  position: relative;
  max-width: 80%;
  background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
  box-shadow: 10px 10px 10px #aaaaaa;
  padding: 2rem;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1,
p {
  margin: 1rem 0rem;
  cursor: default;
}

input[type="email"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid #111111;
  padding: 0.5rem;
  background: none;
}

input[type="email"]:focus {
  width: 100%;
  border: none;
  border-bottom: 1px solid #111111;
  padding: 0.5rem;
  outline: 0;
}
input[type="submit"] {
  position: absolute;
  bottom: 0;
  right: 1.87em;
  bottom: 1em;
  background-color: #005da6;
  color: #ffffff;
  padding: 0.5rem;
  border: none;
  scale: 1.3;
  padding: 5px 20px;
}

/* Estilo para a div de animação de carregamento */

#loader {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 46%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #005da6 94%, #0000) top/16px 16px
      no-repeat,
    conic-gradient(#0000 30%, #005da6);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 16px), #000 0);
  animation: s3 0.5s infinite linear;
  display: none;
}

@keyframes s3 {
  100% {
    transform: rotate(1turn);
  }
}

#fundo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #cccccccc;
  /* opacity: 80%; */
  display: none;
}

@media (max-width: 720px) {
  .caixa {
    max-width: 98%;
    width: 100%;
  }
  #loader {
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 40%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #005da6 94%, #0000) top/16px 16px
        no-repeat,
      conic-gradient(#0000 30%, #005da6);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 16px), #000 0);
    animation: s3 0.5s infinite linear;
  }
}