@font-face {
    font-family: emulogic;
    src: url(./assets/fonts/emulogic.ttf) format("opentype");
}

body {
    font-family: emulogic;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #333;
    color: #fff;
}

body>* {
    margin: 2vw;
}

#app {
    width: 72vw;
    height: 45vw;
    background-image: url("./assets/images/board-bg.jpg");
    background-size: 100%;
    cursor: url("./assets/images/aims.png") 64 64, auto;
    position: relative;
    overflow: hidden;
}

#topBar {
    display: flex;
    justify-content: space-between;
    margin: 2vw;
}

#topBar img {
    width: 5vw;
    margin-right: 1vw;
}

#topBar p {
    font-size: 4vw;
    margin: 0;
}

@keyframes play {
    100% {
        background-position: 100%;
    }
}

.zombie {
    position: absolute;
    background-image: url("./assets/images/walkingdead.png");
    background-size: cover;
    animation: play 0.7s steps(10) infinite;
}

.hidden {
    display: none;
}

button {
    padding: 2vw;
    font-size: 2vw;
    font-family: emulogic;
    color: #fff;
    background-color: #50a;
    border-radius: 1vw;
    border: 2px solid #fff;
    cursor: pointer;
}

#go {
    font-size: 5vw;
}