* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: hallowen;
    user-select: none;
}

@font-face {
    font-family: hallowen;
    src: url(fonts/snow.ttf)
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(#071e27, #071e27fc,#071e27ed, #071e27d6,#071e27b0,#071e276e,#daf1fa, #daf1fa, #daf1fa, #daf1fa);
}

.container {
    background: url(img/background%20winter.png) repeat-x 0% 100% / contain;
    position: relative;
    overflow: hidden;
    animation: back 10s linear infinite;
}

@keyframes back {
    to {
        background-position-x: -100vw
    }
}

.detail {
    width: 60px;
    height: 60px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    top: 0;
    animation: det 2s linear infinite;
}

@keyframes det {
    to {
        transform:translateX(50px) translateY(50px);
    }
}

.content {
    width: 200px;
    height: 100px;
    background: url(https://www.pikpng.com/pngl/b/370-3702386_santa-claus-reindeer-christmas-day-sled-copyright-free.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 680px;
    left: 0;
    z-index: 2;
    transform: scale(-1, 1);
    pointer-events: none;
}


.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    background: beige;
    width: 100%;
    height: 100px;
}

.menu {
    width: 500px;
    background: #234068;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.61);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.menu-item {
    display: flex;
    gap: 20px;
    width: 200px;
    height: 50px;
    background: #234068;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    border: 2px dashed #ffffff54;
    padding: 5px 0;
    color: white;
    box-shadow: -1px 2px 15px 4px black inset, 5px 5px 10px black;
    position: relative;
    overflow: hidden
}

.life {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: red;    
    box-shadow: -1px 2px 15px 4px black inset, 5px 5px 10px black;
    transition: 1s;
    filter: blur(8px)
}

.menu-item > img {
    width: 30%;
}

.hearth {
    width: 200px;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
    border: 2px dashed #ffffff54;
    box-shadow: -1px 2px 15px 4px black inset, 5px 5px 10px black;
}

.hearth > img {
    width: 28%;
    transition: .5s
}

.new-game-container {
    width: 100%;
    height: 100vh;
    background: #082734;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    display: none;
    z-index: 555
}

.menu-cont {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
}

.menu-container {
    width: 100%;
    height: 100%;
    background: red;
    background: url(img/santa-claus-banner-design_1441-786.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1;
    transition: 2s ease-out;
    transition-delay: calc(var(--i) * .1s)
}

.result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 30px;
    color: white;
}

.result > img {
    width: 20%;
}

.menu-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
    width: 700px;
    background: rgb(0 0 0 / 53%);
    backdrop-filter: blur(8px);
    box-shadow: 2px 5px 10px rgb(0 0 0 / 20%) inset, -2px -5px 10px rgb(0 0 0 / 23%) inset, 10px 15px 15px rgb(0 0 0 / 10%), 15px 10px 15px rgb(0 0 0 / 10%);
    border-radius: 15px;
    padding: 20px;
}

.menu-info > h2 {
    color: #d0e5f2;
    font-size: 100px;
    text-shadow: 0 2px black;
    -webkit-box-reflect: below -40px linear-gradient(transparent, transparent, #0005);
    position: relative
}

.menu-info > h2::after {
    content: '';
    width: 75px;
    height: 75px;
    background: url(img/cap.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: -40px;
    top: -3px;
    z-index: -1;
}

h1 {
    color: transparent;
    -webkit-text-stroke: .5px white;
    font-size: 20px;
    font-family: cursive;
    text-shadow: 0 0 3px black, 0 0 5px black, 0 0 10px black;
}

.menu-info > button,
.new-game {
    width: 200px;
    height: 50px;
    background: #bf3200;
    color: white;
    border: none;
    border: 3px dashed white;
    box-shadow: 9px 11px 10px rgb(0 0 0 / 25%), 0 0 3px 1px black inset;
    cursor: pointer;
    border-radius: 10px;
    transition: 1s;
    font-size: 25px;
    position: relative
}

.menu-info p {
    color: steelblue;
    font-size: 25px;
    text-shadow: 0 0 2px black, 0 0 3px black;
}

.game-position {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 50%;
}

.game-position > button {
    width: 100px;
    height: 30px;
    cursor: pointer;
    transition: .4s;
    border: none;
    background: transparent;
    border: 1px solid white;
    color: steelblue;
    text-shadow: 0 0 2px black, 0 0 3px black
}


.game-position > button:hover {
    background: orangered;
    color: white;
}

.menu-info > button::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, red, orangered, orange, darkorange);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    opacity: 0.2;
    animation: frame 2s linear infinite;
}

@keyframes frame {
    to {
        filter: hue-rotate(360deg)
    }
}

.slideUp {
    transform-origin: top;
    transform: rotate(10deg) scale(-1,1)
}

.intro,
.intro a {
    color: #fff;
    font-family:
}

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px)
    }

    50% {
        transform: translateX(80px)
    }

    100% {
        transform: translateX(0px)
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}

.snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
}

.snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s
}

.snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s, .5s;
    animation-delay: 6s, .5s
}

.snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s
}

.snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s
}

.snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s
}

.snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s
}

.snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s
}

.snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s
}

.snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s
}

.demo {
    font-family: 'Raleway', sans-serif;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}

.demo a {
    font-family: 'Raleway', sans-serif;
    color: #000;
}


.wolf {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 5000px;
    top: 680px;
    z-index: 444;
    background-size: contain !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
}

.jumping {
    animation: santa .5s linear alternate;
    transform: scale(-1,1) rotate(20deg);
}

@keyframes santa {
    0% {
        top : 680px;
        transform: scale(-1,1) rotate(0deg);
    }
    30% {
        top: 440px;
        transform: scale(-1,1) rotate(20deg);
    }
    50% {
        top: 440px;
        transform: scale(-1,1) rotate(0deg);
    }
    100% {
        transform: scale(-1,1) rotate(0deg);
        top: 680px
    }
}



.opacityShow {
    animation: shadow 1s linear infinite;
}

@keyframes shadow {
    0% {
        opacity: 1
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    60% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.snowCircle {
    width: 20px;
    height: 20px;
    background: url(img/snowball.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    border-radius: 50%;
    left: 0;
    display: block;
    animation: snow 1s linear 1 forwards;
    filter: drop-shadow(0 0 2px black) drop-shadow(0 0 5px black)
}

@keyframes snow {
    100% {
        left: 2000px;
    }
}
       
.it {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1rem;
}

.space {
    width: 150px;
    height: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 1px #000000e0 inset;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center
}

.control {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 1px #000000e0 inset;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

.it h2 {
    color: darkorange;
    text-shadow: 0 0 2px black, 0 0 3px black;
    border-right: 2px solid white;
    padding: 7px;
}

.it-cont {
    display: flex;
    gap:2rem;
    background: steelblue;
    padding: 20px;
    border-radius: 15px;
}

.game-over {
    width: 500px;
    height: 300px;
    background: rgba(70, 130, 180, 0.79);
    color: darkorange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 2px 1px black inset;
    display: none;
    backdrop-filter:blur(5px);
}

.game-over > button {
    width: 150px;
    height: 40px;
    background: darkorange;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 25px;
    border: 3px dashed white;
    box-shadow: 0 0 2px 1px black inset
}

.game-over > button:hover {
    background: transparent;
    scale(1.2)
}

.best-score {
    color: orange;
    font-size: 50px;
}