* {
    image-rendering: pixelated;
}

body {
    margin: 0;
    padding: 0;
    background: rgb(180,190,200);
    cursor: none;
}

.game {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.achivement {
    width: 45vh;
    height: 13vh;
    position: absolute;
    background: #fff;
    top: 20px;
    right: 20px;
    z-index: 999;
    padding: 2vh;
    padding-left: 2.5vh;
    border: 0.5vh solid #000;
    border-radius: 1.5vh;
    box-sizing: border-box;
    overflow-y: scroll;
    transform: translate3d(50vh, 0, 0);
}

h1 {
    position: absolute;
    z-index: 9999;
    text-align: center;
    top: 40vh;
    width: 100%;
    transition: 1s;
    font-family: monospace;
    font-size: 32px;
    color: #fff;
}

h2 {
    margin: 0;
    font-family: monospace;
    font-size: 2.5vh;
    margin: 0;
}

h3 {
    margin-top: 1vh;
    position: absolute;
    font-family: monospace;
    font-size: 2vh;
    font-weight: normal;
}

.rain {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(125,125,125,0.3);
    background-size: contain;
    z-index: 10;
    opacity: 0;
}

.bus {
    image-rendering: crisp-edges;
    position: absolute;
    background-image: url(img/bus.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100% + 4px);
    top: -4px;
    z-index: 999;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(img/stars.jpg);
    background-size: cover;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.sky {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(img/sky.jpg);
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.sunWrapper {
    position: absolute;
    width: 200vh;
    height: 200vh;
    left: -125vh;
    top: 15vh;
    transform: rotate(0deg);
/*    border: 10px solid red;*/
    border-radius: 50%;
}
.sun {
    position: absolute;
    width: 10%;
    height: 10%;
    left: 95%;
    top: 50%;
    background-color: rgba(255,170,0,0.33);
    background-image: url(img/sun.png);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0px 0px 20vw 0px rgba(255,170,0,1);
}

.planeWrapper {
    transform: scale(-1, 1);
}

.plane {
    position: absolute;
    top: 20vh;
    left: 100vw;
    width: 80vw;
    height: 6.98vw;
    background-image: url(img/plane.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
/*    animation: plane 17s linear infinite;*/
}

.birdsWrapper {
    transform: scale(-1, 1);
}

.birds {
    position: absolute;
    top: 20vh;
    left: 100vw;
    width: 80vw;
    height: 6.98vw;
    background-image: url(img/birds1.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
/*    animation: plane 17s linear infinite;*/
}

.lampposts {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    min-width: 134vh;
    z-index: 10;
}

.lamppostsImagesOff {
    background-image: url(img/lampposts_off.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0;
    top: 0;
    width: 300%;
    height: 100%;
    left: 0;
}
.lamppostsImagesOn {
    background-image: url(img/lampposts_on.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0;
    top: 0;
    width: 300%;
    height: 100%;
    left: 0;
}

.distantBackdrop {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 200vw;
    top: 0px;
    left: 0px;
}

.distantBackdropImage {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    top: calc(30vw - 35vh);
}

.fbg0 {
    background-image: url(img/fbg/fbg0.png);
}
.fbg1 {
    background-image: url(img/fbg/fbg1.png);
}
.fbg2 {
    background-image: url(img/fbg/fbg2.png);
}
.fbg3 {
    background-image: url(img/fbg/fbg3.png);
}
.fbg4 {
    background-image: url(img/fbg/fbg4.png);
}
.fbg5 {
    background-image: url(img/fbg/fbg5.png);
}
.fbg6 {
    background-image: url(img/fbg/fbg6.png);
}
.fbg7 {
    background-image: url(img/fbg/fbg7.png);
}
.fbg8 {
    background-image: url(img/fbg/fbg8.png);
}


.distantBackdropNight {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 200vw;
    top: 0px;
    left: 0px;
}

.distantBackdropNightImage {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    top: calc(30vw - 35vh);
}

.fbgn0 {
    background-image: url(img/fbg/fbgn0.png);
}
.fbgn1 {
    background-image: url(img/fbg/fbgn1.png);
}
.fbgn2 {
    background-image: url(img/fbg/fbgn2.png);
}
.fbgn3 {
    background-image: url(img/fbg/fbgn3.png);
}
.fbgn4 {
    background-image: url(img/fbg/fbgn4.png);
}
.fbgn5 {
    background-image: url(img/fbg/fbgn5.png);
}
.fbgn6 {
    background-image: url(img/fbg/fbgn6.png);
}
.fbgn7 {
    background-image: url(img/fbg/fbgn7.png);
}
.fbgn8 {
    background-image: url(img/fbg/fbgn8.png);
}


.backdropDay {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.backdropDayImages {
    background: url(img/backdrop_day.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0;
    top: calc(30vw - 35vh);
    width: 300%;
    height: 100%;
    left: 0;
}

.backdropNight {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0px;
}

.backdropNightImages {
    background: url(img/backdrop_night.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0;
    top: calc(30vw - 35vh);
    width: 300%;
    height: 100%;
    left: 0;
}

.clouds {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.cloudsImages {
    margin-top: -6%;
    background: url(img/clouds.png);
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 300%;
    height: 100%;
    left: 0;
    animation: slideshow 60s linear infinite
}

@keyframes slideshow {
  0%{
    left: 0vw;
  }
  100%{
    left: -200%;
  }
}

@keyframes slideshowLong {
  0%{
    left: 0;
  }
  100%{
    left: -15200px;
  }
}

@keyframes achivement {
    0% {
        transform: translate3d(50vh, 0, 0);
        opacity: 1;
    }
    20% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    90% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 1.5vw, 0);
    }
}

@keyframes bg {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

@keyframes plane {
    0% {
        left: 100vw;
    }
    100% {
        left: -100vw;
    }
}