:root {
    --bg-url: '/img/bg.png';
    --bg-overlay-opacity: 0.4;
    --bg-overlay-dark-opacity: 0.4
}

/* Page background with adjustable overlay so content remains readable */
.page-bg {
    background-image: linear-gradient(rgba(0, 0, 0, var(--bg-overlay-opacity)), rgba(0, 0, 0, var(--bg-overlay-opacity))), url('/img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark mode: stronger overlay */
.dark .page-bg {
    background-image: linear-gradient(rgba(0, 0, 0, var(--bg-overlay-dark-opacity)), rgba(0, 0, 0, var(--bg-overlay-dark-opacity))), url('/img/bg.png');
}

@keyframes buttonClick {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.btn-click:active {
    animation: buttonClick 0.2s ease-in-out;
}

.swal-small-popup {
    width: 320px !important;
    font-size: 14px !important;
}

.swal-small-title {
    font-size: 18px !important;
    margin: 10px 0 !important;
}

.swal-small-content {
    font-size: 13px !important;
    padding: 8px !important;
}

.swal-small-button {
    font-size: 13px !important;
    padding: 8px 20px !important;
}

.swal2-popup {
    background-color: #1a1a1a !important;
}

.swal2-title {
    color: #ffffff !important;
}

.swal2-html-container {
    color: #ffffff !important;
}