body {
    margin: 0;
    padding: 0;
}

#screen {
    width: 100vw;
    height: 56.25vw;
    position: relative;
    overflow: hidden;
}

#game {
    width: 100%;
    height: 100%;
    position: absolute;
}

#game_background {
    width: 100%;
    height: 100%;
    background-image: url(assets/game_screen.svg);
    position: absolute;
    background-size: cover;
}

#game_elements {
    width: 100%;
    height: 100%;
    position: absolute;
}

#point {
    position: absolute;
    top: 3.7vw;
    right: 8.8vw;
    height: 5vw;
    width: 5vw;
    color: #1a1919;
    font-family: monospace;
    font-size: 2rem;
}

/*ratio 0,5216741405*/
#foreground_left {
    width: 40vw;
    height: 20.86vw;
    position: absolute;
    left: 8vw;
    bottom: 1.5vw;
    background-image: url(assets/foreground_left.svg);
    background-size: cover;
    z-index: 1;

}

/*ratio0 0,4907010014*/
#foreground_right {
    width: 40vw;
    height: 19.62vw;
    position: absolute;
    right: 6vw;
    bottom: 1.5vw;
    background-image: url(assets/foreground_right.svg);
    background-size: cover;
    z-index: 1;
}

/************* START GAME ***********/

#start {
    width: 100%;
    height: 100%;
    background-image: url(assets/start_background.svg);
    position: absolute;
    background-size: cover;
}

/*ratio:0,5720450731*/
#title {
    width: 57vw;
    height: 32.6vw;
    background-image: url(assets/title.svg);
    position: absolute;
    left: 1.5vw;
    top: 1vw;
    background-size: cover;
}

/*ratio: 0,5235332044*/
#lets_go {
    width: 23vw;
    height: 12.04vw;
    background-image: url(assets/lets_go.svg);
    position: absolute;
    left: 38vw;
    top: 23.3vw;
    background-size: cover;
    z-index: 100;
    cursor: pointer;
}

/************* GAME OVER ***********/

#gameover {
    width: 100%;
    height: 100%;
    background-image: url(assets/lost_background.svg);
    position: absolute;
    background-size: cover;
    z-index: 10;
}

#fire {
    width: 98vw;
    height: 41vw;
    background-image: url(assets/fire.svg);
    position: absolute;
    background-size: cover;
    top: 2vw;
    right: 0vw;
    z-index: 25;
}

/*ratio: 0,5869*/
#lost_text {
    width: 60vw;
    height: 35.21vw;
    background-image: url(assets/lost_text.svg);
    position: absolute;
    top: 12vw;
    right: 20vw;
    background-size: cover;
    z-index: 50;
}

/*ratio: 1.19*/
#tunge {
    width: 2.5vw;
    height: 2.975vw;
    background-image: url(assets/tunge.svg);
    position: absolute;
    top: 36.2vw;
    left: 32.8vw;
    background-size: cover;
    z-index: 50;
}

#restart_lost {
    width: 30vw;
    height: 6.16vw;
    background-image: url(assets/restart_lost.svg);
    position: absolute;
    top: 37.8vw;
    left: 43.3vw;
    background-size: cover;
    z-index: 75;
    cursor: pointer;
}

/************* GAME WON ***********/

#gamewon {
    width: 100%;
    height: 100%;
    background-image: url(assets/won_background.svg);
    position: absolute;
    background-size: cover;
    z-index: 10;
}

/*ratio: 0,5247417074*/
#won_middleground {
    width: 98vw;
    height: 51.42vw;
    background-image: url(assets/won_middleground.svg);
    position: absolute;
    background-size: cover;
    top: 2vw;
    right: 0vw;
    z-index: 25;
}

#sun {
    width: 12vw;
    height: 12vw;
    background-image: url(assets/sun.svg);
    position: absolute;
    background-size: cover;
    top: 2vw;
    left: 2vw;
    z-index: 50;
}

/*ratio: 0,2053872054*/
#restart_won {
    width: 30vw;
    height: 6.16vw;
    background-image: url(assets/restart_won.svg);
    position: absolute;
    top: 34.5vw;
    left: 43.3vw;
    background-size: cover;
    cursor: pointer;
    z-index: 100;
}


/*************GAME UI*************/

#game_ui {
    width: 100%;
    height: 10vw;
    position: absolute;
    top: 1vw;
    left: 1.5vw;
}

/*ratio: 0,0944333996*/
#time_sprite {
    position: absolute;
    /*
    top: 1vw;
    left: 1.5vw;
*/
    background-color: #FD9BCB;
    width: 30vw;
    height: 3vw;
    border-radius: 55px;
}

/*ratio: 0.102*/
#time_container {
    position: absolute;
    width: 30vw;
    height: 3vw;
    top: 1.2vw;
    left: 2.5vw;
    border: 2px solid darkgreen;
    border-radius: 55px;

}

/*ratio: 0,8642714571*/
#time_icon {
    position: absolute;
    top: 0vw;
    left: 0.3vw;
    background-image: url(assets/time_numbers.svg);
    background-size: cover;
    width: 4.32vw;
    height: 5vw;
}

#liv {
    position: absolute;
    top: 1vw;
    right: 20vw;
    display: flex;
}

.heart {
    width: 5.45vw;
    height: 4.85vw;
    background-image: url(assets/heart.svg);
    background-size: cover;
    margin-right: 0.5vw;
}

/*ratio: 0,7618069815*/
#point_icon {
    position: absolute;
    top: 0.5vw;
    right: 13vw;
    background-image: url(assets/points_justice.svg);
    background-size: cover;
    height: 5vw;
    width: 3.81vw;
}

#sound_container {
    position: absolute;
    top: 0.6vw;
    right: 4vw;
    background-size: cover;
    height: 5.14vw;
    width: 6vw;
    cursor: pointer;
}

/*ratio: 0,8580645161*/
.sound_on {
    position: absolute;
    background-image: url(assets/music_on.svg);
    background-size: cover;
    height: 5.14vw;
    width: 6vw;
    cursor: pointer;
}

.sound_off {
    position: absolute;
    background-image: url(assets/music_off.svg);
    background-size: cover;
    height: 5.7vw;
    width: 5.8vw;
    cursor: pointer;
}

/****************** FIGURER ******************/

/*ratio: 1.92*/
#cat1_sprite {
    /*    position: relative;*/
    background-image: url(assets/jeppe.svg);
    background-size: cover;
    width: 10vw;
    height: 19.2vw;
    cursor: pointer;
}

#cat2_sprite {
    /*    position: relative;*/
    background-image: url(assets/frank.svg);
    background-size: cover;
    width: 10vw;
    height: 19.2vw;
    cursor: pointer;
}

#cat3_sprite {
    position: relative;
    background-image: url(assets/morten_simple.svg);
    background-size: cover;
    width: 10vw;
    height: 19.2vw;
}

/*ratio: 1,5264227642*/
#demo1_sprite {
    position: relative;
    background-image: url(assets/demonstrant_greta.svg);
    background-size: cover;
    width: 10vw;
    height: 15.3vw;
    cursor: pointer;
}

/*ratio 1,7186098655*/
#demo2_sprite {
    position: relative;
    background-image: url(assets/demonstrant_gray.svg);
    background-size: cover;
    width: 10vw;
    height: 17.7vw;
    cursor: pointer;
}

/*ratio: 1,6266666667*/
#demo3_sprite {
    position: relative;
    background-image: url(assets/demonstrant_red.svg);
    background-size: cover;
    width: 10vw;
    height: 16.3vw;
    cursor: pointer;
}

/*ratio: 1,4334637965*/
#demo4_sprite {
    position: relative;
    background-image: url(assets/demonstrant_orange.svg);
    background-size: cover;
    width: 10vw;
    height: 14.3vw;
    cursor: pointer;
}

/*ratio: 1,5869098712 */
#demo5_sprite {
    position: relative;
    background-image: url(assets/demonstrant_britta.svg);
    background-size: cover;
    width: 10vw;
    height: 15.8vw;
    cursor: pointer;
}

/*ratio: 1,6889140271 */
#demo6_sprite {
    position: relative;
    background-image: url(assets/demonstrant_hat.svg);
    background-size: cover;
    width: 9vw;
    height: 15.2vw;
    cursor: pointer;
}

/*ratio: 1,5658436214 */
#demo7_sprite {
    position: relative;
    background-image: url(assets/demonstrant_lilla.svg);
    background-size: cover;
    width: 10vw;
    height: 15.6vw;
    cursor: pointer;
}

/****************** EFFEKTER ******************/

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

.pause {
    animation-play-state: paused;
}

.gray {
    filter: grayscale(1);
}

.demo_forsvind {
    animation-name: demo_forsvind_kf;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.59, -0.56, .77, 1.34);
    animation-fill-mode: forwards;
    transform-origin: 50% 0%;
}

@keyframes demo_forsvind_kf {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(0);
    }
}

.cat_forsvind {
    animation-name: cat_forsvind_kf;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes cat_forsvind_kf {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.8);
    }

    100% {
        transform: scale(0);
    }
}

.pulse {
    animation-name: pulse_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes pulse_kf {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.02);
    }
}

.glow {
    animation-name: glow_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes glow_kf {

    0% {}

    100% {
        filter: drop-shadow(0px 0px 10px yellow);
    }
}

.glow_white {
    animation-name: glow_white_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes glow_white_kf {

    0% {}


    100% {
        filter: drop-shadow(0px 0px 8px white);
    }
}

.tunge {
    animation-name: tunge_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    transform-origin: top;
}

@keyframes tunge_kf {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(100%);
    }
}

/********* FUGURE ANIMATIONS START HERE *************/

.run0 {
    animation-name: run0_kf;
    animation-duration: 6s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.65, .05, .36, 1);
    position: absolute;
    top: 25vw;
    right: -15vw;
}

@keyframes run0_kf {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-110vw, 0);
    }
}

.move0 {
    animation-name: move0_kf;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes move0_kf {
    0% {
        transform: translateY(2vw);
    }

    50% {
        transform: translate(-2vw);
    }

    100% {
        transform: translateY(2vw);
    }
}

.run1 {
    animation-name: run1_kf;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    position: absolute;
    top: 19vw;
    right: -15vw;

}

@keyframes run1_kf {
    0% {
        transform: translate(-100vw, 0);
    }

    100% {
        transform: translate(10, -2vw);
    }
}

.move1 {
    animation-name: move1_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate;
}

@keyframes move1_kf {
    0% {
        transform: rotatez(10deg);
    }

    100% {
        transform: translateX(2vw)rotatez(-10deg);
    }
}

.run2 {
    animation-name: run2_kf;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.71, 1.07, .2, -0.58);
    position: absolute;
    right: -15vw;
    top: 23vw;
}

@keyframes run2_kf {
    0% {
        transform: translate(0vw, 2vw);
    }

    100% {
        transform: translate(-110vw, 0vw);
    }
}

.move2 {
    animation-name: move2_kf;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes move2_kf {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

.run3 {
    animation-name: run3_kf;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 18vw;
    left: -15vw;
}

@keyframes run3_kf {
    0% {
        transform: translate(-100vw, 0vw);
    }

    100% {
        transform: translate(110vw, 2vw);
    }
}

.move3 {
    animation-name: move3_kf;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes move3_kf {
    0% {
        transform: translateY(1vw);
    }

    100% {
        transform: translateY(0vw);
    }
}

.run4 {
    animation-name: run4_kf;
    animation-duration: 4.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 20vw;
    left: -15vw;
}

@keyframes run4_kf {
    0% {
        transform: translate(100vw, 0);
    }

    100% {
        transform: translate(-110vw, 5vw);
    }
}

.move4 {
    animation-name: move4_kf;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes move4_kf {
    0% {
        transform: translateY(2vw);
    }

    100% {
        transform: translateY(0vw);
    }
}

.run5 {
    animation-name: run5_kf;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 24vw;
    left: -15vw;
}

@keyframes run5_kf {
    0% {
        transform: translate(0vw, 0);
    }

    100% {
        transform: translate(110vw, 4vw);
    }
}

.move5 {
    animation-name: move5_kf;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.8, .38, .19, .52);
}

@keyframes move5_kf {
    0% {
        transform: translateY(2vw);
    }

    100% {
        transform: translateY(0vw);
    }
}

.run6 {
    animation-name: run6_kf;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 22vw;
    right: -15vw;
}

@keyframes run6_kf {
    0% {
        transform: translate(0vw, 2vw);
    }

    100% {
        transform: translate(-110vw, 0);
    }
}

.move6 {
    animation-name: move6_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.8, .38, .19, .52);
}

@keyframes move6_kf {
    0% {
        transform: translateY(4vw);
    }

    100% {
        transform: translateY(0vw);
    }
}

.run7 {
    animation-name: run7_kf;
    animation-duration: 4.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 21vw;
    left: -15vw;
}

@keyframes run7_kf {
    0% {
        transform: translate(-5vw, 0);
    }

    100% {
        transform: translate(110vw, 7vw);
    }
}

.move7 {
    animation-name: move7_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.8, .38, .19, .52);
}

@keyframes move7_kf {
    0% {
        transform: rotateZ(10deg);
    }

    100% {
        transform: rotatez(-10deg);
    }
}


/************* UI AND OTHER ANIMATIONS **********/

.time {
    animation-name: time_kf;
    animation-duration: 25s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes time_kf {
    0% {
        width: 30vw;
        background-color: #FD9BCB;
    }

    60% {
        background-color: orange;
    }

    100% {
        width: 0;
        background-color: darkred;
    }
}


/************ DELAYS *************/

.delay0 {
    animation-delay: 2.7s;
}

.delay1 {
    animation-delay: 1.5s;
}

.delay2 {
    animation-delay: 4s;
}

.delay3 {
    animation-delay: 2s;
}

.delay4 {
    animation-delay: 0s;
}

.delay5 {
    animation-delay: 1.2s;
}

.delay6 {
    animation-delay: 7s;
}

.delay7 {
    animation-delay: 1.75s;
}

.delay8 {
    animation-delay: 0.8s;
}

.delay9 {
    animation-delay: 3.5s;
}