* {
    margin: 0;
    padding: 0;
}

/*====================================================================================================================*/

.root-0 {
    display: flex;
    justify-content: center;
    height: 100vh;
    background-repeat: repeat;
    /*Свойство animation - это сокращение от других CSS-свойств. Первое значение является либо названием
    @keyframes-правила, либо none. В данном случае применяется @keyframes-правило moveBackground. 50s является значением
    свойства animation-duration, linear - animation-timing-function, infinite - animation-iteration-count.*/
    animation: moveBackground 50s linear infinite;
    font-family: Bahnschrift, sans-serif;
}

/*@keyframes - это @-правило, которое позволяет задавать начальные и конечные точки анимации. Здесь from задает
начальную, а to - конечную.*/
@keyframes moveBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 640px 640px;
    }
}

/*====================================================================================================================*/

/*@font-face - это @-правило, которое уточняет кастомный шрифт, который может использоваться на странице. Дескриптор
font-family отвечает за название шрифта. Src указывает на путь, откуда можно взять данные шрифта, с помощью функции
format можно дать браузеру возможность выбрать наиболее подходящий формат шрифта (в данном случае .ttf).*/
@font-face {
    font-family: 'Bahnschrift';
    src: url('../font/Bahnschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*====================================================================================================================*/

.whole-container-0 {
    position: relative;
    margin: 2%;
    padding: 0.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: space-around;*/
    width: 60%;
}

/*::before создает псевдоэлемент, который идет до основного содержимого whole-container-0 (в данном случае занимает все
пространство). Здесь нужен, чтобы создать фон для использования backdrop-filter у дочерних элементов (game-container-0)
в дальнейшем. Так как у самого whole-container-0 есть backdrop-filter, его дочерние элементы не могут его использовать.
Псевдоэлемент это исправляет.*/
.whole-container-0::before {
    /*content - обязательное свойство для псевдоэлементов ::before и ::after. Здесь нам не нужно никак его заполнять,
    поэтому оставляем пустым.*/
    content: '';
    position: absolute;
    /*inset - это свойство-сокращение для top, bottom, left, right. Со значением 0, он просто растягивается на весь
    родительский элемент.*/
    inset: 0;
    backdrop-filter: invert(1);
    z-index: 0;
}