* {
    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;
}

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

.games-container-0 {
    position: relative;
    margin: 20px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 40%;
}

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

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

.game-container-0 {
    position: relative;
    z-index: 1;
    font-size: 34px;
    width: 100%;
    height: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid black;

    /*Свойство transition - это сокращение от других CSS-свойств. Transition со значением all применяется ко всем
    свойствам transition. В этом случае 0.5s является значением свойства transition-delay, а ease  значением свойства
    transition-timing-function.*/
    transition: all 0.5s ease;
}

.game-container-0::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    z-index: -1;
}

/*:hover - это псевдо-свойство, которое применяется к элементу когда на него наводят мышью.*/
.game-container-0:hover {
    /*transform - это CSS-свойство, которое позволяет масштабировать, наклонять или сдвигать элемент. Оно принимает
    функцию. Функция scale отвечает за увеличение или уменьшение элемента. Scale принимает два параметра: множитель
    по оси X и множитель по оси Y; или один параметр: множитель по обоим осям.*/
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(70, 70, 70, 0.5);
}

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

.games-container-header-0 {
    z-index: 1;
    position: relative;
    font-size: 30px;
    color: black;
    padding: 10px 10px;
    user-select: none;
    border: 2px solid black;
}

.games-container-header-0::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    z-index: -1;
}

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

.games-container-list-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    height: 80%;
}

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

.game-link-0 {
    padding-left: 5%;
    text-decoration: none;
    user-select: none;
    color: black;
}

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

.return-to-main-button-0 {
    position: fixed;
    left: 92vw;
    font-family: Bahnschrift, sans-serif;
    color: white;
    border: 2px solid white;
    font-size: 150%;
    margin: 10px 10px;
    padding: 10px 10px;
    user-select: none;
    /*background-image: url('../background/back1.png');*/
    background-repeat: repeat;
    animation: moveBackground 50s linear infinite;
    transition: all 0.5s ease;
}

.return-to-main-button-0:hover {
    transform: scale(1.1);
}