@font-face {
    font-family: inter;
    src: url(Inter_28pt-Medium.ttf);
}


::placeholder {
  color: white;
  opacity: 0.6;
}



body {
    
    background: linear-gradient(95deg,#6916ce,#151690,#7202e7,#782cca);
  background-size: 240% 240%;
  animation: gradient-animation 40s ease infinite;
    font-family: inter;
    min-height: 100vh;
  display: grid;
  place-items: center;
    color: white;
    overflow-y: hidden;

  }


.login p {
    font-size: 3rem;
    color: white;
    
    
  
}




.login form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: auto;
  margin-bottom: 20vh;
  
  color: white;
}
.login input {
    color: rgb(255, 255, 255);
    border-radius: 2rem;
    font-size: 3rem;
    padding-left: 1.5rem;
    
  backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.15);


  transition: ease-in-out 0.2s;

}


.login input:hover {
  
  cursor: pointer;

}

.login input:focus {
  border: solid white 2px;
 outline: none;
  scale: 1.02;
  transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.18);



}


.login {


backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);


    display: flex;

width: 50vw;
height: 50vh;
 position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);

  border-radius: 2rem;
justify-content: center;
align-items: center;

text-align: center;




    
}