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

body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(to right, #bbd2c5, #536976);
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  transition: 0.5s ease-in;
}

body #overlay {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  top: 0;
}

body .spinner {
  width: 80px;
  height: 80px;
  border: 2px solid #f3f3f3;
  border-top: 3px solid #f25a41;
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

#form__block {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: baseline;
  margin: auto;
  width: 100%;
  height: 100vh;
}

#form__block form {
  width: 50%;
}

input {
  padding: 20px 15px !important;
}

label {
  font-size: 2.5rem;
  font-weight: 200;
}

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

button {
  transition: 0.3s ease-in;
  font-size: 2rem !important;
  padding: 10px 15px !important;
  background-color: #e18702;
  color: #fff !important;
}

button:hover {
  background-color: #2c09aa;
}

@media only screen and (max-width: 600px) {
  #form__block form {
    width: 100%;
  }
}

.form__title {
  color: #fff;
  border-radius: 60px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
}

.fa {
  color: #fff;
}

label {
  color: #fff;
}