* {
    margin: 0%;
    padding: 0%;
}

body {
    background-color: rgb(0, 0, 0);
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    /* color: red; */
}

/* Карта и меню */

#Map {
    position: fixed;
    height: 100%;
    /* width: 100%; */
    aspect-ratio: 4/3;
    bottom: 0%;
    left: 0%;

    /* background-color: rgb(86, 162, 88); */
    background-image: url(images/title\ background.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#Menu {
    position: fixed;
    height: 100%;
    /* width: 100%; */
    aspect-ratio: 4/9;
    bottom: 0%;
    right: 0%;

    background-color: brown;
}

/* Игрок */
#Ghost {
    position: absolute;
    height: 7%;
    /* width: 100%; */
    aspect-ratio: 2/3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* background-color: grey; */
}

#GhostTexture {
    position: absolute;
    height: 120%;
    /* width: 100%; */
    aspect-ratio: 2/3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Тестура */
    /* background-color: rgba(21, 221, 194, 0.5); */
    background-image: url(images/madotsuki.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

    /* Анимация */
    animation-name: walk;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Невидимые стены */
#MapBorder1 {position: absolute; height: 1%; width: 100%; top: 0%; right: 0%;}
#MapBorder2 {position: absolute; height: 100%; width: 1%; top: 0%; left: 0%;}
#MapBorder3 {position: absolute; height: 100%; width: 1%; top: 0%; right: 0%;}
#MapBorder4 {position: absolute; height: 1%; width: 100%; bottom: 0%; right: 0%;}
.wall {
    /* background-color: rgba(0,0,0,0.5); */
}

/* Предметы для сбора */
.SearchItems {
    position: absolute;
    height: 5%;
    /* width: 100%; */
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);

    /* background-color: yellow; */
    background-image: url(images/heart.gif);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Враги */

.Enemy {
    position: absolute;
    height: 7%;
    /* width: 100%; */
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);

    /* background-color: black; */
    background-image: url(images/EnemyGhost.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#Snake {
    position: absolute;
    height: 80%;
    /* width: 100%; */
    aspect-ratio: 1/15;
    transform: translate(-50%, -50%);
    background-color: transparent;
    background-image: none;
    transition: top 4s linear, transform 0.5s ease;
}

#SnakeTexture {
    position: absolute;
    height: 136%;
    /* width: 100%; */
    aspect-ratio: 140/480;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* background-color: rgba(25, 155, 206, 0.5); */
    background-image: url(images/Snake.gif);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* UI */

#ScoreCounter {
    position: absolute;
    height: 10%;
    width: 90%;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;

    /* background-color: yellow; */
    font-size: 400%;
}

#Difficulty {
    position: absolute;
    height: 10%;
    width: 90%;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;

    /* background-color: yellow; */
    font-size: 400%;
}

#chest {
    position: absolute;
    height: 32%;
    aspect-ratio: 1330/972;
    transform: translate(-50%, -50%);
    top: 85%;
    left: 50%;

    /* background-color: rgba(25, 155, 206, 0.5); */
    background-image: url(images/chest.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

    animation-name: walk;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#chest:active {
    top: 80%;
}

/* Экран смерти */
#DeadScreen {
    position: fixed;
    height: 100%;
    width: 100%;
    /* aspect-ratio: 16/9; */
    top: -100%;
    left: 0%;

    /* background-color: rgb(86, 162, 88); */
    background-image: url(images/CursedEye.gif);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Анимации */

@keyframes walk {
  0% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-5deg);
  }
}