@font-face {
    font-family: 'Pixelify Sans';
    src: url(./fonts/PixelifySans-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Pixelify Sans';
    src: url(./fonts/PixelifySans-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: 'NB Architekt';
    src: url(./fonts/NB-Architekt-Neue-Medium.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #111;
    font-family: 'Pixelify Sans';
    font-size: 18px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 98vh;
    width: 90vw;
}

p {
    margin-bottom: 0;
}

.dead {
    pointer-events: none;
}

h2 {
    line-height: 1.75rem;
}

h5 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

h5 span {
    font-family: 'NB Architekt', 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    padding-left: 4px;
}

button span {
    font-family: 'NB Architekt', 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
}

h5 img {
    width: 16px;
    height: auto;
    margin: 0 4px 0 12px;
}

.grinch-game {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #A7DFF8;
    background-image: url(gg/bg.png);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #A7DFF8;
    width: 100%;
    height: 100%;
}

.grinch-game button {
    background-color: #1FC31F;
    border: 2px solid white;
    color: black;
    padding: 4px 8px;
    font-family: 'Pixelify Sans';
    border-radius: 0;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    box-shadow: 2px 3px 0px 0px #fff;
    cursor: pointer;
}

#btn-close-highscores {
    background: none;
    border: none;
    box-shadow: none;
    margin: 8px;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.btn-hundo {
    display: none;
}

.game-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #1FC31F;
    z-index: 1;
}

.game-info span {
    color: white;
}

.middle-container {
    display: flex;
    justify-content: center;
}

.modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 20px solid;
    border-image: url(gg/grinch-border.png) 20 round;
    padding: 40px;
    color: #494743;
    text-align: center;
    line-height: 120%;
    min-width: 50%;
}

.modal img {
    height: 100px;
}

.modal h2 {
    color: #1FC31F;
    font-weight: 500;
    margin: 8px 0 4px;
    font-size: 40px;
}

.modal button {
    border-color: black;
    box-shadow: 2px 3px 0px 0px #000;
}

.game-countdown.modal {
    position: relative;
    display: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.game-start {
    position: relative;
}

.game-over {
    position: relative;
    display: none;
}

.leaderboard {
    position: relative;
    display: none;
    width: 250px;
}

.leaderboard button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px 5px 0 0;
}

.highscore-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'NB Architekt', 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
}

.grinch-bag {
    position: absolute;
    bottom: 5px;
    left: 23px;
    width: 414px;
    height: 447px;
    background-image: url(gg/gbag.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.18);
    transform-origin: 0% 100%;
}

.grinch-legs {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 399px;
    height: 209px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.2);
    transform-origin: 0% 100%;
}

.grinchl0 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/legs0.png);
}

.grinchl1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/legs1.png);
    opacity: 0;
}

.grinchl2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/legs2.png);
    opacity: 0;
}

.grinch {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 605px;
    height: 812px;
    transform: scale(0.2);
    transform-origin: 0% 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.grinchs {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 955px;
    height: 666px;
    background-image: url(gg/gsmoosh.png);
    opacity: 0;
    transform: scale(0.225);
    transform-origin: 0% 100%;
}

.grinchl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/gleft.png);
    opacity: 0;
}

.grinchr {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/gright.png);
    opacity: 0;
}

.grinchc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/gcenter.png);
}

.buffs {
    color: black;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 15;
    pointer-events: none;
}

.buff {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 0;
}

#walk-buff-duration {
    width: 64px;
    height: 8px;
    background-color: #1FC31F;
}

#point-buff-duration {
    width: 64px;
    height: 8px;
    background-color: #1FC31F;
}

.amber {
    position: absolute;
    top: 0;
    left: 50%;
    width: 80px;
    height: 80px;
    z-index: 10;
    transform: translate(-50%, 80px);
    opacity: 0;
}

.amber-0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/amber0.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.amber-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(gg/amber1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.buff-item {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.25);
}

.buff-double {
    width: 144px;
    height: 131px;
    background-image: url(gg/buff-double.png);
}

.buff-fast {
    width: 280px;
    height: 174px;
    background-image: url(gg/buff-fast.png);
}

.buff-slow {
    width: 130px;
    height: 184px;
    background-image: url(gg/buff-slow.png);
}

.pressie {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.25);
}

.p0 {
    width: 220px;
    height: 220px;
    background-image: url(gg/p0.png);
}

.p1 {
    width: 220px;
    height: 280px;
    background-image: url(gg/p1.png);
}

.p2 {
    width: 240px;
    height: 300px;
    background-image: url(gg/p2.png);
}

.p3 {
    width: 180px;
    height: 220px;
    background-image: url(gg/p3.png);
}

.p4 {
    width: 220px;
    height: 200px;
    background-image: url(gg/p4.png);
}

.p5 {
    width: 220px;
    height: 200px;
    background-image: url(gg/p5.png);
}

.p6 {
    width: 280px;
    height: 240px;
    background-image: url(gg/p6.png);
}

.p7 {
    width: 280px;
    height: 200px;
    background-image: url(gg/p7.png);
}

.p8 {
    width: 240px;
    height: 200px;
    background-image: url(gg/p8.png);
}

.p9 {
    width: 220px;
    height: 200px;
    background-image: url(gg/p9.png);
}

.p10 {
    width: 280px;
    height: 260px;
    background-image: url(gg/p10.png);
}

.p11 {
    width: 320px;
    height: 240px;
    background-image: url(gg/p11.png);
}

.tree {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 540px;
    background-image: url(gg/tree.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.35);
    transform-origin: 0% 0%;
}

.toggle-items {
    display: none;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    width: 100%;
}

.toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.toggle {
    width: 70px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.toggle-on {
    background-image: url(gg/toggle-on.png);
}

.toggle-off {
    background-image: url(gg/toggle-off.png);
}

.toggle-item {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.toggle-img {
    width: auto !important;
    height: 32px !important;
}

.no-mobile {
    display: none;
}

.pp {
    font-size: 0.8rem;
    margin: -18px 0 8px 0;
    z-index: 1;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

@media screen and (max-width: 512px) {
    .grinch-game {
        display: none;
    }

    .game-info:first-of-type {
        display: none;
    }

    .no-mobile {
        display: block;
    }
}