inxcss.css

body {
   margin:0;
   justify-content: center;
   align-items: center;
   background-color: black;
   padding: 3%;
   background-repeat: no-repeat;
   
   }
   h3,h2,h4{
    
   color:white;
   
   }
   
   div {
   
   margin:20% 0% 20% 0%;
   width: 300px;
   padding: 20px;
   background-color: transparent;
   border-radius: 50px;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   animation-name: ani;
   transition:1s;
   animation-duration: 2.5s;
   animation-iteration-count: infinite;
   border: 2px solid rgba(0, 217, 255, 0);
   animation-timing-function: ease-in-out;
   }

div h2 {
    text-align: center;
    color: white;
    }
    
    
    div input[type="text"],
    div input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    }
    
    div input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: rgba(76, 175, 80, 0.7);
    color: white;
    border: none;
    border-radius: 30px;
    }
    
    div input[type="submit"]:hover {
    background-color: rgba(255, 0, 0, 0.7);
    }
    
    
    @keyframes ani{
    0% { border-color: rgb(4, 246, 250); }
    50% { border-color: black; }
    100% { border-color: rgb(0, 255, 255); }
    }