/* Apply gradient background to body */
body {
    background: linear-gradient(to right, #6a11cb, #2575fc); /* Blue to Purple */
    color: #fff;
    font-family: 'Aclonica', sans-serif; /* Updated font-family to Aclonica */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: relative; /* Allows positioning of the logo */
}

/* Add wave effect */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #6a11cb, #158d00), 
    linear-gradient(to left, rgba(255, 0, 0, 0.2), rgba(1, 186, 28, 0.3));
    background-size: 200% 200%;
    background-position: top left;
    z-index: -1; /* Keeps the waves behind the content */
    animation: wave-animation 5s ease-in-out infinite;
}

/* Animation for the wave effect */
@keyframes wave-animation {
    0% {
        background-position: top left;
    }
    50% {
        background-position: bottom right;
    }
    100% {
        background-position: top left;
    }
}

/* Logo Styles */
.logo {
    position: absolute;
    top: 20px; /* Distance from the top */
    right: 20px; /* Distance from the right */
    width: 50px; /* Width of the logo */
    height: 50px; /* Height of the logo */
    cursor: pointer; /* Pointer on hover */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.logo:hover {
    transform: scale(1.1); /* Slightly enlarges the logo on hover */
}

/* Header Styles */
header {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Centering the content */
.container {
    text-align: center;
}

.auth-buttons button {
    font-size: 1.2rem;
    padding: 10px 20px;
    margin-top: 20px;
}

.auth-buttons .btn-light {
    border: 2px solid #fff;
    color: #000000;
}

.auth-buttons .btn-light:hover {
    background-color: #fff;
    color: #2575fc;
}

.btn-success {
    font-size: 1.2rem;
    padding: 15px 25px;
    background-color: #28a745;
    border: none;
}

.btn-danger {
    font-size: 1rem;
    padding: 10px 20px;
    background-color: #dc3545;
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Modal Styles */
.modal-content {
    border-radius: 10px;
}

/* Add padding around the page content */
body > .container {
    padding: 0 20px;
}