* {
    padding: 0;
    margin: 0;
}

:root {
    --color-black: #2a2424;
    --color-yellow: #faf2b4;
    --color-active: #c63530;
}


@font-face {
    font-family: 'DINPro';
    src: url('./DINPro-Medium.otf') format('truetype');
}

@font-face {
    font-family: 'CAI978';
    src: url('./001-CAI978.ttf') format('truetype');
}


.font-def {
    font-family: '';
}

.font-dinpro {
    font-family: 'DINPro';
}

.font-cai978 {
    font-family: 'CAI978';
}


::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}


@keyframes pendulum {
    0% {
        transform: rotate(-10deg);
    }

    12.5% {
        transform: rotate(-5deg);
    }

    25% {
        transform: rotate(0deg);
    }

    37.5% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(10deg);
    }

    62.5% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(0deg);
    }

    87.5% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(-10deg);
    }

}


@keyframes scale-up {

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

    50% {
        transform: scale(1.2);
    }
}


.left-content {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease-in-out;
}

.left-content.active {
    opacity: 1;
    transform: translateX(0);
}

.right-content {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
}

.right-content.active {
    opacity: 1;
    transform: translateX(0);
}

.top-content {
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
}

.top-content.active {
    opacity: 1;
    transform: translateY(0);
}




/*  */
#total-gems,
#number-PLAYERS {
    overflow: hidden;
}

#total-gems p,
#number-PLAYERS p {
    transform: translateY(0);
}
.transition{
    transition: all 0.5s ease-in-out;
}

#total-gems.active p ,
#number-PLAYERS.active p {
    transform: translateY(-100%);
}