@font-face {
    font-family: 'depixel';
    src: url('../assets/font/depixelbreit.woff2') format('truetype');
}

body {
    image-rendering: pixelated;
    text-align: center;
    margin: auto;
    font-family: depixel; 

    overflow: hidden;
}

.background-container {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
}

.background-vinette {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    filter: opacity(0.1);
    background-image: url('../assets/images/background/vinette_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.background-color-display {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
}

.current-play-background {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
}

/* ANIMATIONS AND TRANSTIONS */
@keyframes background-white-transition {
    0% { background-color: #333333ee; }
    100% { background-color: #ddddddee; }
}

@keyframes background-black-transition {
    0% { background-color: #ddddddee; }
    100% { background-color: #333333ee; }
}

.background-white {
    background-color: #ddddddee;
    animation: 
                background-white-transition calc(var(--gameSpeed) * 0.8s) ease-in;
}

.background-black {
    background-color: #333333ee;
    animation: 
                background-black-transition calc(var(--gameSpeed) * 0.8s) ease-in;
}

@keyframes text-white-transition {
    0% { color: #333333; }
    100% { color: white; }
}

@keyframes text-black-transition {
    0% { color: white; }
    100% { color: #333333; }
}

.text-white {
    color: white;
    animation: 
                text-white-transition calc(var(--gameSpeed) * 0.2s) ease-in;
}

.text-black {
    color: #333333;
    animation: 
                text-black-transition calc(var(--gameSpeed) * 0.2s) ease-in;
}

@keyframes background-blue-transition {
    0% {
        background-color: var(--backgroundRed);
    }
    100% {
        background-color: var(--backgroundBlue);
    }
}

@keyframes background-red-transition {
    0% {
        background-color: var(--backgroundBlue);
    }
    100% {
        background-color: var(--backgroundRed);
    }
}

.background-blue {
    background-color: var(--backgroundBlue);
    animation: 
                background-blue-transition calc(var(--gameSpeed) * 0.8s) ease-in;
}

.background-red {
    background-color: var(--backgroundRed);
    animation: 
                background-red-transition calc(var(--gameSpeed) * 0.8s) ease-in;
}

/* ----------------------- NO CLICK SCREEN ------------------------- */

.no-click-screen {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;

    background-color: #33333380;
    font-size: 100px;
    color: white;

    cursor: not-allowed;

    display: flex;
    justify-content: center;
    align-items: center;
}

.click-screen {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;

    display: none;
}

#no-click-container {
    position: fixed;
    inset: 0;
    width: 1px;
    height: 1px;
}