@font-face {
    font-family: NeoTech;
    src: url("Neo Tech.ttf");
}

body {
    background-image: url('background-top-2.png'), url('background-texture-2.png');
    background-size: 100%, auto;
    background-position: top left 0, top left;
    background-repeat:no-repeat, repeat;
    /* background-color: rgba(247, 224, 206, 0.3); */
}

#loading {
    font-family: NeoTech;
}

#loading .spinner-grow {
    background:url('loading-body.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    animation: tilting 1.2s infinite;
    position:relative;
    opacity:1;
    margin-bottom:-20px;
}

#loading .spinner-grow::after {
    content:"";
    display:inline-block;
    background:url('loading.png');
    background-size: 90%;
    background-repeat:no-repeat;
    background-position: center;
    height:80px;
    width:80px;
    position:absolute;
    top:-60px;
    left:-14px;
    animation: tilting 1.2s infinite;
    animation-direction: reverse;
}

@keyframes tilting {
    0% {
        transform: rotate(-7deg);
    }
    50% {
        transform: rotate(7deg);
    }
    100% {
        transform: rotate(-7deg);
    }
}

.cny-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:-1;
    animation: fadeIn 1s;
}


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

:root {
    --cny-background-speed: 6000s;
    --cny-height: 30vh;
    --cny-bottom:10vh;
    --cny-delay: 3s;
}

.cny-background {
    width: 1000000px;
    position:fixed;
    background-size: auto 100%;
    background-repeat: repeat-x;
    animation-name: bgSlide;
    animation-duration: var(--cny-background-speed);
    animation-iteration-count: infinite;
    animation-delay: var(--cny-delay);
    background-position:bottom left;
    height:var(--cny-height);
    bottom:var(--cny-bottom);
}

@keyframes bgSlide{
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-500000px, 0, 0);
    }
}


.cny-background.cny-mountains {
    background-image: url("mountains.png");
    --cny-height:50vh;
    --cny-bottom:10vh;
    --cny-background-speed: 8000s;
}

.cny-background.cny-land {
    background-image: url("land.png");
    --cny-height:40vh;
    --cny-bottom:10vh;
}

.cny-background.cny-water {
    background-image: url("water.png");
    --cny-height:10vh;
    --cny-background-speed: 3500s;
    --cny-bottom:0;
    --cny-delay:0s;
}

.cny-background.cny-clouds {
    background-image: url("clouds.png");
    --cny-height:20vh;
    --cny-background-speed: 9000s;
    --cny-bottom:30vh;
    --cny-delay:0s;
}

.cny-background.cny-lights {
    --cny-background-speed: 5000s;
    background-image: url("lights.png");
    --cny-height:13vh;
    --cny-bottom:35vh;
    animation-name: bgSlide, upDown;
    animation-delay: 3s, 0s;
    animation-duration: var(--cny-background-speed), 3s;
}

.cny-player {
    position:fixed;
    background-image: url('player.gif');
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 100%;
    height:22vh;
    width:100%;
    bottom:14vh;
    animation: moveFromLeft 8s;
}

@keyframes moveFromLeft{
    0% {
        left:-25%;
    }
    100% {
        left:0;
    }
}

@keyframes upDown{
    0% {
        bottom:var(--cny-bottom);
    }
    50% {
        bottom:calc(var(--cny-bottom) + 5px);
    }
    100% {
        bottom:var(--cny-bottom);
    }
}

.cny-gong-xi {
    position:fixed;
    height: 38vh;
    width: 100vh;
    bottom: -50vh;
    left: 50%;
    transform: translateX(-45%);
    -webkit-transform: translateX(-45%);
    -moz-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
    -o-transform: translateX(-45%);
    animation: slideUp 3s forwards;
    -webkit-animation: slideUp 3s forwards;
}

@keyframes slideUp {
    0% {
        bottom: -20vh;
    }
    100% {
        bottom: 54vh;
    }
}

.cny-gong-xi-board {
    position:absolute;
    background-image: url('gong-xi-board.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 100%;
    height:80%;
    width:100%;
}

.cny-gong-xi-lantern div {
    position:absolute;
    background-image: url('gong-xi-lantern.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 100%;
    height:44%;
    width:44%;
    bottom:0;
    animation: cny-lantern 8s infinite;
    -webkit-animation: cny-lantern 8s infinite;
}


@keyframes cny-lantern {
    0% {
        transform: rotate(10deg) translateX(-1%);
        -webkit-transform: rotate(10deg) translateX(-1%);
        -moz-transform: rotate(10deg) translateX(-1%);
        -ms-transform: rotate(10deg) translateX(-1%);
        -o-transform: rotate(10deg) translateX(-1%);
}
    50% {
        transform: rotate(-10deg) translateX(1%);
        -webkit-transform: rotate(-10deg) translateX(1%);
        -moz-transform: rotate(-10deg) translateX(1%);
        -ms-transform: rotate(-10deg) translateX(1%);
        -o-transform: rotate(-10deg) translateX(1%);
}
    100% {
        transform: rotate(10deg) translateX(-1%);
        -webkit-transform: rotate(10deg) translateX(-1%);
        -moz-transform: rotate(10deg) translateX(-1%);
        -ms-transform: rotate(10deg) translateX(-1%);
        -o-transform: rotate(10deg) translateX(-1%);
}
}

.cny-gong-xi-lantern-l {
    left: 13%;
}
.cny-gong-xi-lantern-r {
    right:13%;
}

.cny-gong-xi-fan div {
    position:absolute;
    background-image: url('gong-xi-fan-r.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 100%;
    height:15%;
    width:15%;
    bottom: 13%;
    animation: fan 3s linear infinite;
    -webkit-animation: cny-fan 10s linear infinite;
}

@keyframes cny-fan {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
}
}


.cny-gong-xi-fan-r-l {
    left: 37%;
}

.cny-gong-xi-fan-r-r {
    right: 37%;
}


.cny-gong-xi-fan div.cny-gong-xi-fan-y {
    position:absolute;
    background-image: url('gong-xi-fan-y.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 100%;
    height:20%;
    width:20%;
    left: 40%;
    animation-direction: reverse;
}