* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #ffdd00, rgb(231, 107, 231));
    }

    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .login-box {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 40px;
        width: 320px;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
        position: relative;
    }

    .icon {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .user-icon {
        background-color: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: relative;
    }

    .user-icon::before {
        content: '';
        background-color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
    }

    form input {
        display: block;
        width: 100%;
        padding: 15px;
        margin: 30px 0 10px;
        border: none;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, 0.2);
        color: rgb(0, 0, 0);
        font-size: 16px;
    }

    form input::placeholder {
        color: rgba(136, 133, 133, 0.671);
    }

    form .options {
        align-items: center;
        margin: 15px 0;
        color: rgb(255, 217, 0);
        font-size: 14px;
    }

    form button {
        margin-top: 20px;
        width: 100%;
        padding: 15px;
        background-color: #4f88b6;
        color: white;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        font-size: 18px;
        transition: background-color 0.3s ease;
    }

    form button:hover {
        background-color: #2673ca;
    }

    p {
        font-size: large;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }