.login-btn,
.signup-btn,
.logout-btn {
    padding: 0.5rem 0.75rem; /* Smaller buttons */
    border-radius: 0.3125rem;
    text-decoration: none;
    font-weight: bold;
    color: white;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
}

.login-btn {
    background-color: #66B2FF;
    color: #fff;
}

    .login-btn:hover {
        background-color: #2A6DB5;
    }

.signup-btn {
    background-color: #444444; /* Neutral button color */
    color: #fff;
}

    .signup-btn:hover {
        background-color: #5A636E; /* Darker slate blue for hover */
    }

.logout-btn {
    background-color: #6C757D;
    color: #fff;
}

    .logout-btn:hover {
        background-color: #5A636E;
    }

.submit-btn {
    background-color: #66B2FF;
    color: #fff;
    width: 100%;
    padding: 1rem;
}
    .submit-btn:hover {
        background-color: #2A6DB5;
    }

.submit-buttons {
    margin-left: auto;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between buttons */
}
    .submit-buttons button {
        padding: 0.5rem 1rem;
        border-radius: 5px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.3s ease;
        box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    }

/* Desktop-only authentication buttons (Login, Sign Up, Logout) */
.auth-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between buttons */
}

    .auth-buttons button {
        padding: 0.5rem 1rem;
        border-radius: 5px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.3s ease;
        box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    }

.default-button {
    padding: 0.7rem;
    font-size: 1rem;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #66B2FF; /* Vibrant blue */
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
    box-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

    .default-button:hover {
        background-color: #1A73E8; /* Hover shade of blue */
    }

    .default-button:active {
        background-color: #1E4E7A; /* Active shade of blue */
        transform: translateY(0);
    }