*{
    margin: 0;
    box-sizing: border-box;
    font-family: "Poiret One", sans-serif;
    font-weight: 500;
    font-style: bold;
}

/*   himmel    */
.himmel {
    background-color: darkblue;
    height: 80vh;
    animation-name: himmel;
    animation-duration: 30s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

@keyframes himmel {
    0% {
        background-color: darkblue;
    }
    33%{
        background-color: rgb(0, 0, 219);
    }
    66%{
        background-color: blue;
    }
    100%{
        background-color: darkblue;
    }
}

/*   jord    */
.jord {
    background-color: darkgreen;
    height: 30vh;
    position: absolute;
    bottom: 0;
    width: 100%;
    animation-name: jord;
    animation-duration: 30s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
    text-align: center;
    padding-top: 0.5em;
    z-index: 5;
}

.jord p {
    padding-top: 0.2em;
    font-family: "Amarante", serif;
    font-weight: 400;
    color: white;
}

@keyframes jord {
    0% {
        background-color: darkgreen;
        color: black;
    }
    33%{
        background-color: rgb(15, 124, 15);
        color: black;
        height: 30vh;
    }
    66%{
        background-color: rgb(13, 156, 13);
        color: transparent;
        height: 25vh;
    }
    100%{
        background-color: white;
        height: 15vh;
        color: transparent;
    }
}


/*      snefnug     */
.snefnug {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: -10px;
    left: 50vw;
    animation-name: snefnug;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: 10;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: forwards;
    box-shadow: inset
    0 0 2px 1px #ffffff,
    0 0 4px 2px white;
}

.snefnug:nth-of-type(1) {
    left: 75vw;
    animation-delay: 0s;
}

.snefnug:nth-of-type(2) {
    left: 10vw;
    animation-delay: 5s;
}

.snefnug:nth-of-type(3) {
    left: 7vw;
    animation-delay: 1.5s;
}

.snefnug:nth-of-type(4) {
    left: 80vw;
    animation-delay: 2.5s;
}

.snefnug:nth-of-type(5) {
    left: 15vw;
    animation-delay: 6s;
}

.snefnug:nth-of-type(6) {
    left: 30vw;
    animation-delay: 3s;
}

.snefnug:nth-of-type(7) {
    left: 45vw;
    animation-delay: 7s;
}

.snefnug:nth-of-type(8) {
    left: 20vw;
    animation-delay: 27s;
}

.snefnug:nth-of-type(9) {
    left: 50vw;
    animation-delay: 4s;
}

.snefnug:nth-of-type(10) {
    left: 95vw;
    animation-delay: 9s;
}

.snefnug:nth-of-type(11) {
    left: 2vw;
    animation-delay: 10s;
}

.snefnug:nth-of-type(12) {
    left: 12vw;
    animation-delay: 15s;
}

.snefnug:nth-of-type(13) {
    left: 63vw;
    animation-delay: 8s;
}

.snefnug:nth-of-type(14) {
    left: 37vw;
    animation-delay: 17s;
}

.snefnug:nth-of-type(15) {
    left: 7vw;
    animation-delay: 28s;
}

.snefnug:nth-of-type(16) {
    left: 89vw;
    animation-delay: 22s;
}

.snefnug:nth-of-type(17) {
    left: 44vw;
    animation-delay: 11s;
}

.snefnug:nth-of-type(18) {
    left: 53vw;
    animation-delay: 13s;
}

.snefnug:nth-of-type(19) {
    left: 36vw;
    animation-delay: 24s;
}

.snefnug:nth-of-type(20) {
    left: 92vw;
    animation-delay: 29s;
}

@keyframes snefnug {
    0% {
        top: -10px;
    }
    33% {
        top: 30vh;
    }
    66% {
        top: 60vh;
    }
    100% {
        top: 90vh;
    }
}

/*    sol      */
.sol {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: absolute;
    left: 75vw;
    animation-name: sol;
    animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
    z-index: 3;
}

@keyframes sol {
    0% {
        bottom: 0;
        background: #d14f17;
        width: 100px;
        height: 100px;
    }

    33% {
        bottom: 80vh;
        background: #ffd630;
        box-shadow: inset
        0 0 5px 3px #ffd630,
        0 0 10px 6px #ffd630;
    }
    66% {
        bottom: 80vh;
        background: #ffd630;
        box-shadow: inset
        0 0 15px 6px #ffd630,
        0 0 20px 12px #ffd630;
    }
    100% {
        bottom: 0;
        background: #d14f17;
        width: 100px;
        height: 100px;
    }
}

/*    tekst    */
.tekst {
    font-size: 50px;
    opacity: 0;
    color: white;
    position: fixed;
    left: 20%;
    padding-right: 2em;
    width: 100vw;
    height: 100vh;
    top: 200px;
    text-align: center;
    animation-name: tekst;
    animation-duration: 20s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 25s;
    animation-fill-mode: forwards;
    animation-play-state: running;
    filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    z-index: 10;
    
}

@keyframes tekst {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        text-shadow: 5px 5px 10px white;
    }
}

.gave {
    font-size: 30vh;
    opacity: 0;
    color: rgb(104, 7, 7);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 45vh;
    left: 15vw;
    animation-name: gave;
    animation-duration: 20s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction:normal;
    animation-delay: 25s;
    animation-fill-mode: forwards;
    animation-play-state: running;
    filter: drop-shadow(5px 5px 5px rgb(60, 99, 255));
}

@keyframes gave {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        font-size: 20vh;
        top: 60vh;
    }
}

.star {
    font-size: 5vh;
    opacity: 0;
    color: rgb(213, 213, 4);
    position: fixed;
    top: 50px;
    right: 30%;
    width: 100vw;
    height: 100vh;
    padding-top: 50px;
    animation-name: star;
    animation-duration: 20s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 25s;
    animation-fill-mode: forwards;
    animation-play-state: running;
    filter: drop-shadow(3px 3px 3px rgb(213, 213, 4));
}

@keyframes star {
    0% {
        opacity: 0;
    }

    33% {
        font-size: 6vh;
    }
    
    50% {
        font-size: 7vh;
    }

    66% {
        font-size: 8vh;
    }

   80% {
        font-size: 6.5vh;
   }
    
    100% {
        opacity: 1;
    }
}