body {

    background-color: #000;

    color: #fff;

    font-family: Arial, sans-serif;

    overflow: hidden; /* Prevents scrollbars */

    margin: 0; /* Remove default body margin */

    padding: 0; /* Remove default body padding */

}



.container {

    max-width: 600px;

    margin: 250px auto;

    padding: 20px;

    border-radius: 15px;

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */

    backdrop-filter: blur(5px); /* Apply blur effect to container background */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    animation: slide-up 0.5s ease-in-out;

}



@keyframes slide-up {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.card {

    margin-top: 20px;

    animation: fade-in 0.5s ease-in-out;

}



@keyframes fade-in {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.card-title {

    font-size: 32px;

    font-weight: bold;

    margin-bottom: 10px;

    text-align: center;

}



.btn-primary {

    background-color: #282928;

    border-color: #4CAF50;

    color: #fff;

    border-radius: 5px;

    padding: 10px 20px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.btn-primary:hover {

    background-color: #0062cc;

}



.alert {

    margin-top: 20px;

    padding: 10px;

    border-radius: 5px;

}



.alert-invalid {

    background-color: #bf2000;

    color: #fff;

    margin-top: 20px;

    padding: 10px;

    border-radius: 5px;

}



.line {

    border: 0;

    background-color: #6a6a6a;

    height: 2px;

    margin: 8px 0 18px 0;

    cursor: pointer;

}