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

@font-face {
    font-family: pacFont;
    src: url(pacfont.ttf);
}

#cabinet {
    z-index: -1;
    position: fixed;
    background: url("img/arcade.png") no-repeat center;
    background-size: contain;
    top: 54vh;
    left: 50vw;
    transform: translateX(-50%) translateY(-50%);
    width: 88vmin;
    height: 88vmin;
}

#background {
    position: absolute;
    background-color: black;
    border-radius: 1vmin;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-57.6%);
    width: 37vmin;
    height: 35vmin;
}

canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-57.9%);
    width: auto;
    height: 39.5%;
    image-rendering: pixelated;
}

#coin {
    z-index: 2;
    position: absolute;
    top: 73.5%;
    left: 62.4%;
    width: 7vmin;
    height: 5vmin;
    touch-action: none;
}

#start {
    z-index: 2;
    position: absolute;
    top: 73.5%;
    left: 52.5%;
    width: 7vmin;
    height: 5vmin;
    touch-action: none;
}

#joystick {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-35%);
    width: 60vmin;
    height: 70vmin;
    touch-action: none;
}

.navbar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
    padding: 1%;
    height: 4vh;
}

#game-name {
    margin: auto;
    font-family: pacFont;
    font-size: 3vh;
}

.arrow {
    height: 3vh;
    cursor: pointer;
}

.animated {
    animation-name: game-name-animation;
    animation-duration: 1s;
}

@keyframes game-name-animation {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0;
        transform: translateX(-50%);
    }
    51% {
        opacity: 0;
        transform: translateX(50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}