body {
    margin: 0vw;
    padding: 0vw;
}

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

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

#game_background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(samlet_baggrund.png);
    background-size: cover;
}

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

#stjerne_1_container1 {
    position: absolute;
    left: 70vw;
    top: 5vw;

}

#stjerne_1_sprite1 {
    background-image: url(stjerne_1.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

#stjerne_1_container2 {
    position: absolute;
    left: 35vw;
    top: 4vw;
}

#stjerne_1_sprite2 {
    background-image: url(stjerne_1.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

#stjerne_1_container3 {
    position: absolute;
    left: 8vw;
    top: 8vw;
}

#stjerne_1_sprite3 {
    background-image: url(stjerne_1.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

#stjerne_2_container1 {
    position: absolute;
    left: 22vw;
    top: 15vw;
}

#stjerne_2_sprite1 {
    background-image: url(stjerne_2.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

#stjerne_2_container2 {
    position: absolute;
    left: 50vw;
    top: 10vw;
}

#stjerne_2_sprite2 {
    background-image: url(stjerne_2.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

#stjerne_2_container3 {
    position: absolute;
    left: 78vw;
    top: 18vw;
}

#stjerne_2_sprite3 {
    background-image: url(stjerne_2.svg);
    background-size: cover;
    width: 6.5vw;
    height: 6vw;
}

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

}

@keyframes glow_kf {
    from {
        filter: drop-shadow(5px 5px 35px yellow)
    }


    to {
        filter: drop-shadow(0px 0px 0px yellow)
    }
}


/*------------------------------skyer----------------------------------- */

#lille_sky_sprite1 {
    background-image: url(lille_sky.svg);
    background-size: cover;
    width: 9vw;
    height: 4.71vw;
}

#lille_sky_sprite2 {
    background-image: url(lille_sky.svg);
    background-size: cover;
    width: 9vw;
    height: 4.71vw;
}

#mellem_sky_sprite1 {
    background-image: url(mellem_sky.svg);
    background-size: cover;
    width: 17vw;
    height: 8.5vw;
}

#mellem_sky_sprite2 {
    background-image: url(mellem_sky.svg);
    background-size: cover;
    width: 17vw;
    height: 8.5vw;
}

#stor_sky_sprite1 {
    background-image: url(stor_sky.svg);
    background-size: cover;
    width: 23vw;
    height: 11.5vw;
}

#stor_sky_sprite2 {
    background-image: url(stor_sky.svg);
    background-size: cover;
    width: 23vw;
    height: 11.5vw;
}

#lille_sky_container1,
#lille_sky_container2,
#mellem_sky_container1,
#mellem_sky_container2,
#stor_sky_container1,
#stor_sky_container2 {
    position: absolute;

}

/*.delay1 {
    animation-delay: 0.2s;
}

.delay2 {
    animation-delay: 0.4s;
}

.delay3 {
    animation-delay: 0.6s;
}

.delay4 {
    animation-delay: 0.8s;
}

.delay5 {
    animation-delay: 0.10s;
}*/

.position1 {
    left: 8vw;
    top: 15vw;
}

.position2 {
    left: 60vw;
    top: 6vw;
}

.position3 {
    left: 30vw;
    top: 5vw;
}

.position4 {
    left: 80vw;
    top: 10vw;
}

.position5 {
    left: 50vw;
    top: 15vw;
}

.position6 {
    left: 18vw;
    top: 15vw;
}

.over_screen {
    animation-name: over_screen_kf;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

}

@keyframes over_screen_kf {
    from {
        left: -30vw;
    }

    to {
        left: 110vw;
    }
}

/*på alle skyerne når man trykker på dem*/
.fade_out {
    animation-name: fade_out_kf;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;

}

@keyframes fade_out_kf {
    from {
        opacity: 1;
    }


    to {
        opacity: 0;
    }
}

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




/*----------------------UI--------------------------*/

#liv_tekst {
    position: absolute;
    background-image: url(liv_tekst.svg);
    background-size: cover;
    width: 5.5vw;
    height: 3vw;

}

#stjerneliv_1 {
    position: absolute;
    background-image: url(stjerneliv.svg);
    background-size: cover;
    width: 3vw;
    height: 3vw;
    left: 4vw;
    top: 0.5vw;
}

#stjerneliv_2 {
    position: absolute;
    background-image: url(stjerneliv.svg);
    background-size: cover;
    width: 3vw;
    height: 3vw;
    left: 6vw;
    top: 0.5vw;
}

#stjerneliv_3 {
    position: absolute;
    background-image: url(stjerneliv.svg);
    background-size: cover;
    width: 3vw;
    height: 3vw;
    left: 8vw;
    top: 0.5vw;
}

#point_tekst {
    position: absolute;
    background-image: url(point_tekst.svg);
    background-size: cover;
    width: 7vw;
    height: 3.5vw;
    top: 3vw;

}

#point {
    position: absolute;
    color: white;
    position: absolute;
    top: 0.7vw;
    left: 7vw;
    font-family: 'voltage', sans-serif;
    font-size: 1.7vw;


}

#tids_tekst {
    position: absolute;
    background-image: url(tidsTekst.svg);
    background-size: cover;
    width: 3.75vw;
    height: 1.88vw;
    top: 49.6vw;
    left: 36vw;

}


#time_container {
    position: absolute;
    top: 50vw;
    left: 40vw;
    width: 20vw;
    height: 1.2vw;
    border: 0.2rem solid black;
    background-color: #F2EBC4;
    border-radius: 30px;
    overflow: hidden;
}

#time_sprite {
    width: 20vw;
    height: 1.2vw;
    transform-origin: left bottom;
    border-radius: 30px;
}

.shrink {
    animation-name: shrink_kf;
    animation-duration: 20s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background-image: radial-gradient(#F2F2F2 5%, #F2EBC4 15%, #F2CB07 60%);
}

@keyframes shrink_kf {
    0% {
        transform: translateX(0vw);

    }

    100% {

        transform: translateX(-20vw);

    }
}

.dissappear {
    animation-name: dissappear_kf;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.59, -0.56, .77, 1.34);
    animation-fill-mode: forwards;
}

@keyframes dissappear_kf {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

/*----------------------Start, gameover og levelsmplete skærme--------------------------*/
#start {
    background-image: url(startScreen.png);
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;

}

#start_game_button {
    background-image: url(startGameButton2.svg);
    position: absolute;
    background-size: cover;
    width: 25vw;
    height: 25vw;
    top: 25vw;
    left: 66vw;
}

.sound_on_button {
    background-image: url(soundOnButton.svg);
    position: absolute;
    background-size: cover;
    width: 5vw;
    height: 5vw;
    top: 50vw;
    left: 1vw;
}

.sound_off_button {
    background-image: url(soundOffButton.svg);
    position: absolute;
    background-size: cover;
    width: 5vw;
    height: 5vw;
    top: 50vw;
    left: 0.8vw;
}

#info_button {
    background-image: url(infoButton.svg);
    position: absolute;
    background-size: cover;
    width: 5vw;
    height: 5vw;
    top: 50vw;
    left: 5vw;
}

#info_screen {
    background-image: url(infoScreen4.svg);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

#info_screen_tekst {
    position: absolute;
    top: 27vw;
    left: 32vw;
    font-family: 'museo-sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vw;
    text-align: center;

}

#start_button {
    background-image: url(startButton.svg);
    position: absolute;
    background-size: cover;
    width: 10vw;
    height: 10vw;
    top: 38vw;
    left: 48vw;
}

#gameover {
    background-image: url(gameOver.svg);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

#game_over_tekst {
    position: absolute;
    top: 20vw;
    left: 36vw;
    font-family: 'museo-sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vw;
    text-align: center;

}


#levelcomplete {
    background-image: url(levelComplete.svg);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

#retry_button {
    background-image: url(retryButton.svg);
    position: absolute;
    background-size: cover;
    width: 10vw;
    height: 10vw;
    top: 37vw;
    left: 45vw;
}

#retry_button2 {
    background-image: url(retryButton.svg);
    position: absolute;
    background-size: cover;
    width: 10vw;
    height: 10vw;
    top: 37vw;
    left: 46vw;
}

#level_complete_tekst {
    position: absolute;
    top: 20vw;
    left: 34vw;
    font-family: 'museo-sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vw;
    text-align: center;

}

.hide {
    display: none;
    pointer-events: none;
}

/*effekt til knapperne, start og prøv igen*/
.pulse {
    animation-name: pulse_kf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

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


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