body {
  font-family: "Poppins", sans-serif;
  height: 100vh;
 /* background:pink;*/
  background-color: #f9f9f9;
  background: linear-gradient(-45deg,rgba(238,119,82,0.5),rgba(231,60,126,0.5),rgba(35,166,213,0.5),rgba(35,213,171,0.5));
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
}

50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}

/* STRUCTURE */
 .wrapper {
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%);
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     min-height: 100%;
     padding: 20px;
}
 #formContent {
     padding: 5rem 4rem 0 4rem;
     -webkit-border-radius: 10px 10px 10px 10px;
     border-radius: 10px 10px 10px 10px;
     padding: 30px;
     /*width: 90%;*/
     max-width: 450px;
     position: relative;
     -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
     box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
     background-color: #ffffff20;
}
 #formFooter {
     background-color: #f6f6f6;
     border-top: 1px solid #dce8f1;
     padding: 25px;
     text-align: center;
     -webkit-border-radius: 0 0 10px 10px;
     border-radius: 0 0 10px 10px;
}
/* OTHERS */
 *:focus {
     outline: none;
}
 #icon {
     text-align: center;
     max-width: 200px;
     width: 100%;
     margin: 1em auto 2em;
}
 * {
     box-sizing: border-box;
}
 .form-login {
     position: relative;
     z-index: 1;
     padding-bottom: 4.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
 .login__label {
     display: block;
     padding-left: 1rem;
}
 .login__label, .login__label--checkbox {
     color: white;
     text-transform: uppercase;
     font-size: .75rem;
     margin-bottom: 0rem;
}
 .login__input {
     color: white;
     font-size: 1.15rem;
     width: 100%;
     padding: .5rem 1rem;
     border: 2px solid transparent;
     outline: none;
     border-radius: 1.5rem;
     background-color: rgba(255, 255, 255, 0.25);
     letter-spacing: 1px;
}
 .login__input:hover, .login__input:focus{
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.5);
     background-color: transparent;
}
 .login__input + .login__label {
     margin-top: 1.5rem;
}
 .login__submit {
     color: #ffffff;
     font-size: 1rem;
     font-family: 'Montserrat', sans-serif;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-top: 1rem;
     padding: .75rem;
     border-radius: 2rem;
     display: block;
     width: 100%;
     background-color: #039F9B;
     border: none;
     cursor: pointer;
}
 .login__submit:hover {
     background-color: #066255;
}

.button {
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 36px;
  width: 100%;
  margin-top: 1.5rem;
  padding: .78rem;
  font-size: 1rem;
  letter-spacing: 1px;
  min-width: 8em;
  text-align: center;
  color: #fff;
  background-image: 
    linear-gradient(to bottom, #f12828, #a00332, #9f0f31),
    linear-gradient(to bottom, #ae0034, #6f094c);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: 
    inset 0 1px rgb(255 255 255 / .25),
    inset 0 -1px rgb(0 0 0 / .1),
    0 2px 4px rgb(0 0 0 / .25);
  transition: .2s;
  will-change: transform;
   
  &:active {
    transform: scale(.92);
    filter: brightness(.8);
  }
}

.button-hat {
  position: absolute;
  top: -15px;
  left: -17px;
  height: 44px;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / .25));
}

.canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}