body {
    background-color: #f4f4f4;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    overflow:hidden;
    padding:0;
    margin: 0;
}

.snow {
    position:absolute;
    left: 30vw;
    bottom: -18vh;
    z-index:5;
    
    height: 72vh;
    width: 24vh;
    background: url(snow_walk.svg);
    background-size: 1400%;
    transform: rotate(1deg);
    animation: walking 1s infinite linear;
    animation-timing-function: steps(14);
}

.snow.close{
    height: 360vh;
    width: 120vh;
    bottom: -350vh;
    left: 1vw;
    animation: walking 1.1s infinite linear;
    animation-timing-function: steps(14);
}

.snow.close.scared{
    background: url(snow_scared.svg);
    background-size: 100%;
    left:30vw;
    animation: zoom 2s linear;
    animation-fill-mode: forwards;
}
.snow.close.flirt{
    background: url(snow_flirt.svg);
    background-size: 300%;
    left:30vw;
    display: none;
    animation-delay: 3s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-duration: 0.7s;
    animation-timing-function: steps(7)
}
.fade_out {
    animation: fade_out 6s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 14s;
    z-index:50;
    position:absolute;
    top:0;
    left:0;
}
.appear {
    z-index:50;
    position:absolute;
    top:0;
    left:0;    
}

@keyframes walking {
    0% {background-position: 0%;}
    100% { background-position: -1400%;}
}
@keyframes fade_out {
    0%   {opacity:1;}
    99%  {opacity:1; z-index: 50;}
    100% {opacity:0; z-index: -100; display: none;}
}
@keyframes zoom {
    0%   {transform: scale(0.6)}
    100% {transform: scale(1)}
}

.hunter {
    position:fixed;
    left: 19vw;
    bottom: 16vh;
    z-index:0;
    
    height: 30vh;
    width: 7.2vh;
    background: url(hunter.png);
    background-repeat: no-repeat;
    background-size: 100%;
    animation: stalk 1.5s linear infinite alternate;
}
.chase {
    z-index:2;
    height:45vh;
    width:10.8vh;
    animation: move_down 3s linear;
    animation-fill-mode: forwards;
}

@keyframes move_down {
    0%   {transform: scale(0.8); bottom: 14vh}
    100% {transform: scale(1.4); bottom: 0vh}
}

.fade_in {
    opacity: 0;
    animation: fade_in 6s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 25s;
    position:relative;
    bottom:0;
    left:0;
    height:100%;
    width:100%;
}
.fade_in.index{
    z-index: 2;    
}
@keyframes fade_in {
    0% {opacity:0;}
    100% {opacity:1;}
}
.shadow {
    position:absolute;
    left: 17vw;
    top: -0.3vh;
    z-index:1;
    opacity: 0.7;
    transform: rotate(1deg);
    
    height: 30vh;
    width: 9vh;
    background: url(shadow.png);
    background-repeat: no-repeat;
    background-size: 100%;
    animation: shade 1.5s linear infinite alternate;
}
@keyframes stalk {
    0% {transform: scale(1) rotate(-1deg)}
    100% { transform: scale(1.1) rotate(2deg)}
}
@keyframes shade {
    0% {transform: rotate(-1deg)}
    100% { transform: rotate(2deg) scaleY(1.4) translateY(3vh)}
}

.moon {
    height: 40vh;
    width: 40vh;
    z-index: -2;
    position:absolute;
    top: 5vw;
    left: 20vw;
    background-color: white;
    background-image:url(moon.jpg);
    background-size: contain;
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: #fff 0 0 50px;
    animation: glow 5s linear infinite;
    animation-direction: alternate;
}
@keyframes glow {
    0% { box-shadow: #fff 0 0 100px;}
    100% { box-shadow: #fff 0 0 20px;}
}
.cloud{
    position: absolute;
    z-index: 0;
    transform: rotateY(180deg);
}
.cloud img {
    width: 100%;  
}
.cloud.large{
    width:70vw;    
}
.cloud:nth-child(1){
    bottom: 22vh; 
    width: 100vw;
    animation: gliding 60s linear infinite;
}
@keyframes gliding{
    0%    {left:150vw;}
    100%  {left:-100vw;}
} 
.street{
    width: 100%;
    height: 35vh;
    background-color: #444444;
    position:absolute;
    bottom: -3.8vh;
    left: 0;
    z-index:1;
    transform: rotate(1deg);
    overflow: hidden;
}
.building{
    width: 23%;
    height: 120%;
    position:absolute;
    bottom:0;
    left: -3.5%;
    background-color:#111;
    border-right: 3vw solid #232323;
    transform: rotate(6deg)
}
.building.two{
    width: 0;
    height: 100%;
    background-color:rgba(0,0,0,0);
    z-index:2;
	border-bottom: 60px solid transparent;
	
    border-width: 28vh;
	border-left: 20vw solid #232323;
    border-right:0;
    transform: rotate(3deg)
}
.skyline{
    width:110%;
    position:absolute;
    bottom:19vh;
    left:0;
    z-index:-1;
    transform: rotate(-2deg);
}
.skyline img {
    width:100%;    
}
.cigarette {
    position: absolute;
    left:12vw;
    bottom:-10vh;
    z-index: 10;
    background: url("cigarettes.svg") no-repeat;
    background-size: 100%;
    height: 35vw;
    width: 25vw;
    transform: rotate(30deg);
    display:none;
}
.single_cigarette {
    position: absolute;
    left:12vw;
    bottom:0;
    z-index: 10;
    background: url("cigarette_single.svg") no-repeat;
    background-size: 100%;
    height: 35vw;
    width: 25vw;
    display: none;
}
.light {
    height:220vh;
    position:absolute;
    bottom: -88.5vh;
    left: 85vw;
    z-index:2;
}
.light img {
    max-height: 100%;  
    animation: horizon 5s linear infinite;
    transform: rotate(-4.5deg)
}
.light.two {
    animation-delay: -4.5s;
    -webkit-animation-delay:-4.5s;
}
.gun{
    width: 100vw;
    height: 100vh;
    z-index: 90;
    background: url("gun.svg") no-repeat;
    background-size: 100%;
    position: absolute;
    opacity: 0.6;
    animation: shoot 3s;
    animation-fill-mode: forwards;
    display:none;
}
@keyframes shoot {
    0%   {left: -50vw; bottom: -50vh;}
    100% {left: 0vw; bottom: 0vh;}
}
.grow {
    animation: grow 9s linear infinite;    
}
.pause {
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
    top:inherit;
}
@keyframes grow {
    0% { transform: scale(1); z-index:2; opacity:0}
    5% {opacity: 1; z-index:2; }
    90% {opacity: 1; z-index:2; height: 200vh; bottom: -65vh;}
    92% {z-index:0;}
    100% { transform: scale(0.1); left: 28vw; z-index:0; height: 170vh; opacity: 0.4}
}

.title, .credits {
    width: 100vw; height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: url(title.jpg) fixed;
    background-size:cover;
    animation: intro 8s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
}
.credits{
    background: url(credits.jpg) center center fixed;
    background-size:cover;
    animation-delay: 6s;
    z-index: 99;
}
@keyframes intro {
    0%   {opacity: 1;}
    80%  {opacity: 1;}
    99%  {opacity: 0; transform: translateX(0)}
    100% {opacity: 0; transform: translateX(5000vw);}
}
.pointer {
    cursor:pointer;
}
.the_pause {
    position:absolute;
    top: 1vw;
    left: 1vw;
    background-color:#fff;
    width: 3vw;
    height: 3vw;
    z-index: 92;
    opacity: 0.7;
}
.the_pause:hover {
    opacity:1;    
}
.seperator {
    background-color:#232323;
    width: 1vw;
    height: 3vw;
    margin: 0 1vw;
}