<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <style>
            
            *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 1px;
        background-color: white;
    }
    .login_form_container{
        position: relative;
        width: 400px;
        height: 470px;
        max-width: 400px;
        max-height: 470px;
        background: #040717;
        border-radius: 50px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-top: 70px;
    }

    .login_form_container::before{
        
        position: absolute;
        width: 170%;
        height: 170%;
        content: '';
        background-image: conic-gradient(transparent, transparent, transparent, #ee00ff);
        animation: rotate_border 6s linear infinite;
    
    }
    .login_form_container::after{
        
        position: absolute;
        width: 170%;
        height: 170%;
        content: '';
        background-image: conic-gradient(transparent, transparent, transparent, #00ccff);
        animation: rotate_border 6s linear infinite;
        animation-delay: -3s;
    }
    @keyframes rotate_border{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    .login_form{
        position: absolute;
        content: '';
        background-color: #0c1022;
        border-radius: 50px 5px;
        inset: 5px;
        padding: 50px 40px;
        z-index: 10;
        color: #00ccff;
    
    } 
    h2{
        font-size: 40px;
        font-weight: 600;
        text-align: center;
    }
    .input_group{
        margin-top: 40px;
        position:relative;
        display:flex;
        align-items: center;
        justify-content: start;
    }
    .input_text{
        width: 95%;
        height: 30px;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 1px solid #00ccff;
        font-size: 20px;
        padding-left: 10px;
        color: #0c1022;
    
    }
    ::placeholder{
        font-size: 15px;
        color: #0c1022;
        letter-spacing: 1px;
    
    }
    .fa{
        font-size: 20px;
    
    }
    #login_button{
        position: relative;
        width: 300px;
        height: 40px;
        transition: 1s;
        margin-top: 70px;
    
    
    }
    #login_button a{
        position: absolute;
        width: 100%;
        height: 100%;
        text-decoration: none;
        z-index: 10;
        cursor: pointer;
        font-size: 22px;
        letter-spacing: 2px;
        border: 1px solid #00ccff;
        border-radius: 50px;
        background-color: #0c1022;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .glowIcon {
        text-shadow: 0 0 10px #00ccff;
    
    }
    .btn{
        color: #00ccff;
        width: 25rem;
        border-radius: 2rem;
    }
    .text-center{
    margin-top: 8rem;
}
    </style>
    </head>
<body>
    <div class="box">  
        <div class="container">
            <div class="text-center">
                <h1>Login</h1>


            <form method="POST" action="/login">
                <div class="input_group">
                    <input type="text" name="username" id="username" class="input_text" placeholder="Username" required>
                </div>
            
                <div class="input_group">
                    <input type="password" name="password" id="password" class="input_text" placeholder="Password" required>
                </div>
            
                <div class="button_group" id="login_button">
                    <a><button type="submit" class = "btn">Submit</button></a>
                </div>
            </form>
        </div>
    </div>
</div>  

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    
    <style>
        #limca {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</body>
</html>
