:root {
    --background-light: #e8eff6;
    --background-board: #cddbee;
    --background-dark: #4b78c6;
    --primary-color: #0c59d2;
    --primary-dark: #0f53b3;
    --secondary-color: #b3c6d4;
    --background-accent: #b3c6d4;
    --border-accent: #8482f6;
    --accent-color: #FFCC00;
    --text-color: #333333;
    --text-mute: #666666;
    --danger-color: #d32f2f;
    --border-color: #d8d8d8;
    --hover-bg: #cdd0e8;
    --white: #ffffff;
    --green: #4caf50;
    --light-red: #ff6666;
    --ribbon-red: #c62828;
    --ribbon-red-dark: #ab1f1f;
}

html {
    font-size: 16px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--white), 0 0 0 0.25rem var(--primary-color);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    background-image: url('/images/resources/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.carousel-common {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .carousel-common img {
        width: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .carousel-common .carousel-caption,
    .carousel-common .carousel-overlay {
        animation: slideUp 0.6s ease;
    }

    .carousel-common:hover img {
        transform: scale(1.05);
    }

    .carousel-common .carousel-control-prev-icon,
    .carousel-common .carousel-control-next-icon {
        filter: invert(1);
    }