body{
    backdrop-filter: blur(10px);
   
    
}


h1{
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
h2{
    font-size: 25px;
    color: rgb(255, 255, 255);
}

form{
    
    margin: 35px;
    width: 50%;
    height: 80%;
    padding: 32px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: stretch;

 backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: rgba(53, 54, 58, 0.35) 0 8px 32px;
    

}
p{
    color: whitesmoke;
}
.box {
  width: 120vmin;
  height: auto;
  display: grid;
  place-content: center;
  color: white;
background-color: rgba(240, 255, 255, 0.244);
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      rgba(0, 0, 0, 0.785),
      rgba(0, 0, 0, 0.779) 5%,
      rgba(0, 0, 0, 0.776) 60%,
      rgba(0, 0, 0, 0.982) 95%
    );
  border: solid 5px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, rgb(57, 6, 6), rgb(9, 62, 21) 99%,  transparent, rgb(255, 255, 255)99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}