.main{
  width: 350px;
  height: 500px; 
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
  animation-name: style;
  animation-duration: 70s; 
  
}

.signup{
  
  position: relative;
  width:100%;
  height: 100%;
}
label{
  color: #fff;
  font-size: 2.3em;
  justify-content: center;
  display: flex;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}
input{
  width: 60%;
  height: 20px;
  background: #e0dede;
  justify-content: center;
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 5px;
}
button{
  width: 55%;
  height: 50px;
  margin: 10px auto;
  justify-content: center;
  display: block;
  color: black;
  background: #blue;
  font-size: 1em;
  font-weight: bold;
  margin-top: 20px;
  border-radius: 5px;
  transition: .2s ease-in;
  cursor: pointer;
}
button:hover{
 background: antiquewhite;
  color: black;
}

@keyframes style {
    0% {border: 5px groove blue;}
  2% {border: 7px groove red;}
  4% {border: 9px groove orange;}
  6% {border: 10px groove yellow;}
  8% {border: 5px groove gray;}
  10% {border: 7px groove blue;}
  12% {border: 9px groove yellow;}
  14% {border: 10px groove black;}
  16% {border: 5px groove blue;}
  18% {border: 7px groove red;}
  20% {border: 9px groove orange;}
  22% {border: 10px groove yellow;}
  24% {border: 5px groove gray;}
  26% {border: 7px groove blue;}
  28% {border: 9px groove yellow;}
  30% {border: 10px groove black;}
  32% {border: 5px groove blue;}
  34% {border: 7px groove red;}
  36% {border: 9px groove orange;}
  38% {border: 10px groove yellow;}
  40% {border: 5px groove gray;}
  42% {border: 7px groove blue;}
  44% {border: 10px groove black;}
  46% {border: 5px groove blue;}
  48% {border: 7px groove red;}
  50% {border: 9px groove orange;}
  52% {border: 10px groove yellow;}
  54% {border: 5px groove gray;}
  56% {border: 7px groove blue;}
  58% {border: 9px groove yellow;}
  60% {border: 10px groove black;}
  62% {border: 5px groove blue;}
  64% {border: 7px groove red;}
  66% {border: 9px groove orange;}
  68% {border: 10px groove yellow;}
  70% {border: 5px groove gray;}
  72% {border: 7px groove blue;}
  74% {border: 9px groove yellow;}
  76% {border: 10px groove black;}
  78% {border: 5px groove blue;}
  80% {border: 7px groove red;}
  82% {border: 9px groove orange;}
  84% {border: 10px groove yellow;}
  86% {border: 5px groove gray;}
  88% {border: 7px groove blue;}
  90% {border: 9px groove yellow;}
  92% {border: 10px groove black;}
  94% {border: 5px groove blue;}
  95% {border: 7px groove red;}
  96% {border: 9px groove orange;}
  97% {border: 10px groove yellow;}
  98% {border: 5px groove gray;}
  99% {border: 7px groove blue;}
  100% {border: 9px groove yellow;}
  101% {border: 10px groove black;}