* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

/* Anvender :root til at sætte farverne (dette er smart, så man nemt kan ændre alle af den samme farve på siden) */
:root {
    --dark-blue: #1E2346;
    --neptun: #8EACCF;
    --uranus: #9FDAE3;
    --saturn: #E4C2AF;
    --jupiter: #E16F2C;
    --mars: #D65238;
    --jorden: #62B264;
    --venus: #DFC69A;
    --merkur: #BFBDC5;
    --hvid: #F2F2F2;
}
/* For at bruge disse farver skrives det således:

div {
    background-color:var(--beige);
}
Her giver får baggrunden på div'en den fastlagte beige farve.
*/


/* Anvender @font-face for at kunne bruge en bestemt font */
@font-face {
    font-family: "phosphate";
    src: url("/font/phosphate.woff2") format("woff2");
}

@font-face {
    font-family: "aupassata";
    src: url("/font/aupassata_rg.woff") format("woff");
}
/* For at bruge denne font skrives det således:

div {
    font-family: 'headerFont';
}
*/

body {
    font-family: "aupassata";
    background-image: url(/img/baggrund/space_baggrund.webp);
    position: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    overflow: hidden;
    z-index: 0;
    color: var(--dark-blue);
    height: 100vh;
    width: 100vw;
    font-size: 20px;
    text-align: center;
}

h1 {
    font-family: "phosphate";
    font-size: 110px;
    font-weight: 1;
}

h2 {
    font-family: "Baloo 2", sans-serif;
    font-size: 40px;
    line-height: 50px;
}


/************************************************** INDEX **************************************************/

.skyer-baggrund{
    background-image: url(/img/baggrund/jord_skyer.gif);
}

.h1-index{
    font-size: 150px;
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 20vh;
}

.logo{
    position: absolute;
    top: 6%;
    left: 4%;
    width: 80px;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.sprog {
    position: absolute;
    left: 86.5%;
    display: flex;
}

.da-button, .en-button {
    background-color: var(--hvid);
    color: var(--dark-blue);
    cursor: pointer;
    border-radius: 100px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    z-index: 1;
    border: solid 2px  var(--dark-blue);
    margin: 15px 10px;   
}

.da-button h1, .en-button h1 {
    font-size: 35px;
}

.sten-index{
    position: absolute;
    transform: scaleX(-1);
    width: 400px;
    bottom: -20%;
    left: 5%;
}

.start-knap{
    width: 200px;
    top: 60% ;
    left: 42vw;
    z-index: 1;
    position: absolute;
}


/************************************************** VIL DU MED **************************************************/

.vildumed-container {
    height: 100vh;
}

.vildumed-container img {
    width: 100%;
}

.character {
    position: absolute;
    width: 48%;
    transform: scaleX(-1);
    left: 0;
    top: 0;
}

.character img {
    width: 110%;
}

.vildumed-text {
    position: absolute;
    width: 45%;
    height: 100vh;
    margin-right: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    right: 0;
    top: 0;
}

.vildumed-text h2{
    font-size: 80px;
    line-height: 100px;
    margin-top: 80px;
}

.vildumed-text p{
    font-size: 35px;
}

.vildumed-button {
    align-items: center;
    width: 200px;
}

/************************************************** AFSTED **************************************************/

.afsted {
    display: flex;
}

.raketa {
    position: absolute;
    height: 615px;
    right: 20%;
    bottom: 7%;
    z-index: 2;
}

.stenvinkera {
    position: absolute;
    height: 455px;
    left: 15%;
    bottom: 5%;
    transform: scaleX(-1);
    z-index: 2;
}

.boblea {
    width: 250px;
    z-index: 3;
    position: absolute;
    top: 10%;
    left: 35%;
}

.boblea img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pa {
    font-size: 25px;
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 75px;
    left: 0;
}

.land {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
}

/************************************************** COCKPIT **************************************************/

.cockpittop {
    position: sticky;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 3;
}

.cockpitbund {
    position: absolute;
    width: 100vw;
    bottom: -25%;
    left: 0;
    z-index: 3;
}

.planeter {
    height: 100vh;
    width: 100vw;
}

.solenpit {
    position: absolute;
    height: 650px;
    top: 0%;
    right: 81%;
    z-index: 1;
    transform: rotate(80deg);
}

.solenpitdiv {
    z-index: 4;
    width: 700px;
}

.merkurpit {
    position: absolute;
    height: 73px;
    width: auto;
    top: 38%;
    left: 16%;
    z-index: 5;
}

.venuspit {
    position: absolute;
    height: 110px;
    width: auto;
    top: 21%;
    left: 24%;
    z-index: 4;
}

.jordenpit {
    position: absolute;
    height: 86px;
    width: auto;
    top: 32%;
    left: 34%;
}

.marspit {
    position: absolute;
    height: 78px;
    width: auto;
    top: 16%;
    left: 40%;
    z-index: 4;
}

.jupiterpit {
    position: absolute;
    height: 232px;
    width: auto;
    top: 12%;
    left: 48%;
    z-index: 4;
}

.saturnpit {
    position: absolute;
    height: 180px;
    width: auto;
    top: 30%;
    left: 65%;
    z-index: 4;
}

.uranuspit {
    position: absolute;
    height: 111px;
    width: auto;
    top: 23%;
    left: 80%;
    z-index: 4;
}

.neptunpit {
    position: absolute;
    height: 88px;
    width: auto;
    top: 43%;
    left: 90%;
    z-index: 4;
}

.hjemknap {
    position: absolute;
    height: 12%;
    width: 10%;
    bottom: 27%;
    left: 45%;
    z-index: 5;
}

.taleboble-cockpit {
    width: 210px;
    z-index: 3;
    position: absolute;
    top: 48%;
    left: 29%;
}

.taleboble-cockpit img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(10deg);
}

.cockpit-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 40px;
    left: 0;
}

.cockpit-tekst-en {
    top: 50px;
}

.cockpit-tekst-en h2 {
    font-size: 30px;
    line-height: 40px;
}

/************************************************** PLANETER (ALLE) **************************************************/

.tilbage-raket {
    transform: rotate(270deg);
    width: 120px;
    z-index: 5;
    position: absolute;
    left: 50px;
    top: -15px;
}

.tilbage-raket img {
    width: 100%;
}

/************************************************** NEPTUN **************************************************/

.neptun {
    position: absolute;
    width: 1200px;
    z-index: 1;
    top: 40%;
    left: -20%;
}

.tekst-højre {
    display: flex;
    flex-direction: column;
    width: 45%;
    justify-content: center;
    align-self: flex-end;
    left: 50%;
    top: 10%;
    position: absolute;
    color: var(--neptun);
}

.tekst-højre p {
    font-size: 40px;
    padding: 0 60px;
}

.taleboble-neptun {
    width: 290px;
    z-index: 3;
    position: absolute;
    top: 3%;
    left: 29%;
}

.taleboble-neptun-en {
    width: 310px;
}

.taleboble-neptun img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(5deg);
}

.taleboble-neptun-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 45px;
    left: 0;
}

#sten-sidder {
    width: 300px;
    transform: scaleX(-1);
    z-index: 2;
    position: absolute;
    top: 30%;
    left: 18%;
}

.popup-neptun p {
    font-size: 50px;
    color: var(--neptun);
    position: absolute;
    width: 40%;
    text-wrap: wrap;
    margin-left: 5%;
    top: 15%;
}

.popup-neptun .neptun {
    width: 85%;
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: 1;
}

#sten-blæser {
    width: 40%;
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 2;
}

.kryds {
    width: 38px;
    position: absolute;
    z-index: 5;
    top: 3.5vh;
    left: 95vw
}

/************************************************** JORDEN **************************************************/

.jorden {
    position: absolute;
    width: 800px;
    z-index: 1;
    top: 35%;
    left: -5%;
}

.jordendiv {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 5;
    top: 35%;
    left: -5%;
}

#tekst-jorden {
    color: var(--jorden);
}

.taleboble-jorden {
    width: 325px;
    z-index: 3;
    position: absolute;
    top: 3%;
    left: 14%;
}

.taleboble-jorden-en {
    width: 335px;
}

.taleboble-jorden img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1);
}

.taleboble-jorden-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 45px;
}

.taleboble-jorden-tekst-en {
    top: 55px;
}

.sten-jorden {
    width: 300px;
    transform: scaleX(-1);
    z-index: 2;
    position: absolute;
    top: 35%;
    left: 25%; 
}

.screen-baggrund {
    height: 78%;
    top: 11%;
    position: absolute;
    width: 60%;
    background-color: var(--dark-blue);
    z-index: 1;
    color: var(--hvid);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.screen-baggrund h1 {
    font-size: 130px;
}

.screen-baggrund p {
    font-size: 60px;
}

/************************************************** URANUS **************************************************/

.uranus {
    position: absolute;
    width: 900px;
    z-index: 1;
    top: 25%;
    left: -10%;
}

#tekst-uranus {
    color: var(--uranus);
}

.taleboble-uranus {
    width: 290px;
    z-index: 3;
    position: absolute;
    left: 32%;
}

.taleboble-uranus img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.taleboble-uranus-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 40px;
    left: 0;
}

#sten-fryser {
    width: 180px;
    transform: scaleX(-1);
    z-index: 2;
    position: absolute;
    top: 25%;
    left: 23%;
}

.popup-uranus {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.popup-uranus p {
    font-size: 40px;
    color: var(--dark-blue);
    position: absolute;
    width: 30%;
    text-wrap: wrap;
    z-index: 3;
}


#uranus-drejer {
    height: 95vh;
    animation: spin 3.5s infinite linear;
    z-index: 2;
}

/* Animation defineres */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/************************************************** MARS **************************************************/

.mars {
    position: absolute;
    width: 1000px;
    z-index: 1;
    top: 20%;
    left: 43%;
}

.tekst-venstre {
    display: flex;
    flex-direction: column;
    width: 45%;
    justify-content: center;
    align-self: flex-end;
    top: 15%;
    position: absolute;
    color: var(--mars);
}

.tekst-venstre p {
    font-size: 40px;
    padding: 0 60px;
}

.taleboble-mars {
    width: 270px;
    z-index: 3;
    position: absolute;
    top: -2%;
    left: 63%;
}

.taleboble-mars img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(5deg);
}

.taleboble-mars-tekst {
    width: 75%;
    margin: 0 12.5%;
    position: absolute;
    top: 50px;
    left: 0;
}

#sten-staar-mars {
    width: 320px;
    z-index: 2;
    position: absolute;
    top: 15%;
    left: 50%;
}

.rover {
    width: 400px;
    transform: scaleX(-1) rotate(20deg);
    z-index: 2;
    position: absolute;
    top: 52%;
    left: 65%;
}

.popup-mars {
    display: flex;
    justify-content: center;
}

#infographic {
    height: 76.5%;
    top: 11%;
    position: absolute;
}

#ramme {
    height: 96%;
    position: absolute;
    top: 2%;
    z-index: 2;
}

.kryds-screen {
    width: 38px;
    position: absolute;
    z-index: 5;
    top: 18vh;
    right: 24.25vw;
}

/************************************************** JUPITER **************************************************/

.jupiter {
    position: absolute;
    width: 1000px;
    z-index: 1;
    top: 45%;
    left: -15%;
}

#tekst-jupiter {
    color: var(--jupiter);
}

.taleboble-jupiter {
    width: 280px;
    z-index: 3;
    position: absolute;
    top: 20%;
    left: 15%;
}

.taleboble-jupiter img {
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0;
    transform: rotate(10deg);
}

.taleboble-jupiter-tekst {
    width: 75%;
    margin: 0 12.5%;
    position: absolute;
    top: 35px;
}

.sten-jupiter {
    width: 100px;
    transform: scaleX(-1);
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 9%; 
}

#motiongraphic {
    height: 77%;
    top: 11.5%;
    position: absolute;
}

/************************************************** MERKUR **************************************************/

.merkur {
    position: absolute;
    width: 1000px;
    z-index: 1;
    top: 30%;
    left: -5%;
}

#tekst-merkur {
    color: var(--merkur);
}

.taleboble-merkur {
    width: 300px;
    z-index: 3;
    position: absolute;
    top: 3%;
    left: 25%;
}

.taleboble-merkur img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(10deg);
}

.taleboble-merkur-tekst {
    width: 75%;
    margin: 0 12.5%;
    position: absolute;
    top: 65px;
    left: 0;
    font-size: 20px;
}

.sten-staar {
    width: 475px;
    transform: scaleX(-1);
    z-index: 2;
    position: absolute;
    top: 10%;
    left: 2%;
}

.popup-merkur p {
    font-size: 40px;
    color: var(--hvid);
    position: absolute;
    width: 33%;
    text-wrap: wrap;
    margin-left: 64%;
    top: 15%;
}

#hurtig-tid {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/************************************************** SATURN **************************************************/

.saturn {
    position: absolute;
    width: 1200px;
    z-index: 1;
    top: 7%;
    left: -30%;
}

#tekst-saturn {
    color: var(--saturn);
}

.taleboble-saturn {
    width: 330px;
    z-index: 3;
    position: absolute;
    top: 46%;
    left: 18%;
}

.taleboble-saturn img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1) rotate(35deg);
}

.taleboble-saturn-tekst {
    width: 75%;
    margin: 0 10%;
    position: absolute;
    top: 50px;
    transform: rotate(325deg);
}

.taleboble-saturn-tekst-en {
    width: 70%;
    margin: 0 12%;
    top: 70px;
}

#sten-flyver {
    width: 500px;
    z-index: 2;
    position: absolute;
    top: 61%;
    left: 39%;
}

.popup-saturn p {
    font-size: 48px;
    color: var(--saturn);
    position: absolute;
    width: 37%;
    text-wrap: wrap;
    top: 21%;
    left: 5%;
}

#saturnsringe {
    height: 200%;
    position: absolute;
    top: -80%;
    left: -25%;
    animation: spin 13s infinite linear;
}

/************************************************** VENUS **************************************************/

.venus {
    position: absolute;
    width: 1200px;
    top: 40%;
    left: 40%;
    z-index: 1;
}

#tekst-venus {
    color: var(--venus);
}

.taleboble-venus {
    width: 310px;
    z-index: 3;
    position: absolute;
    top: -2%;
    left: 65%;
}

.taleboble-venus img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(15deg);
}

.taleboble-venus-tekst {
    width: 75%;
    margin: 0 12.5%;
    position: absolute;
    top: 50px;
    left: 0;
}

#sten-sveder {
    width: 300px;
    z-index: 2;
    position: absolute;
    top: 18%;
    left: 47%;
}

#skyer-venus {
    position: absolute;
    width: 100%;
    z-index: 3;
    bottom: -20%;
    right: -5%;
}

#tekst-under-skyer {
    position: absolute;
    bottom: 10%;
    right: 5%;
    z-index: 2;
    font-size: 25px;
    width: 30%;
}

/************************************************** KOMET **************************************************/

.komet {
    width: 30%;
    position: absolute;
    top: -20%;
    right: -30%;
    animation: komet 2s linear;
    animation-delay: 1s;
}

/* Animation defineres */
@keyframes komet {
    0% {
        transform: translate(0, 0) rotate(20deg);
    }
    100% {
        transform: translate(calc(-180vw + 100%), calc(120vh - 100%)) rotate(20deg);
    }
}

.taleboble-komet {
    width: 270px;
    z-index: 3;
    position: absolute;
    top: 45%;
    left: 30%;
}

.taleboble-komet-en {
    width: 290px;
}

.taleboble-komet img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(15deg);
}

.komet-tekst {
    width: 75%;
    margin: 0 12.5%;
    position: absolute;
    top: 30px;
    left: 0;
}

.komet-tekst-en {
    top: 33px;
}

/************************************************** SOLEN **************************************************/

.solen {
    position: absolute;
    top: -28%;
    height: 150%;
    left: -10%;
}

.sten-staar-solen {
    position: absolute;
    top: 20%;
    right: -15%;
    transform: rotate(-20deg);
    width: 700px;
}

.taleboble-solen {
    width: 425px;
    z-index: 3;
    position: absolute;
    top: 0%;
    right: 22%;
}

.taleboble-solen img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1);
}

.taleboble-solen-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 90px;
    left: 0;
    font-size: 30px;
}

.taleboble-solen-tekst h2 {
    font-size: 50px;
    line-height: 60px;
}

/************************************************** SLUT **************************************************/

.slut-taleboble {
    width: 360px;
    z-index: 3;
    position: absolute;
    top: -2%;
    left: 34%;
}

.slut-taleboble img {
    width: 100%;
}

.slut-taleboble p {
    font-size: 24px;
}

.slut-taleboble-tekst {
    width: 80%;
    margin: 0 10%;
    position: absolute;
    top: 65px;
    left: 0;
}

.spil-igen{
    background-color: var(--hvid);
    color: var(--dark-blue);
    padding: 18px;
    font-size: 25px;
    line-height: 30px;
    cursor: pointer;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    border: solid 2px var(--dark-blue);
    position: absolute;
    bottom: 4%;
    left: 2.5%;
    z-index: 2;
}

.spil-igen-en{
    background-color: var(--hvid);
    color: var(--dark-blue);
    padding: 25px 18px;
    font-size: 23px;
    line-height: 27px;
    cursor: pointer;
    border-radius: 100px;
    width: 110px;
    height: 110px;
    border: solid 2px var(--dark-blue);
    position: absolute;
    bottom: 4%;
    left: 2.5%;
    z-index: 2;
}

/************************************************** LOADINGSCREEN **************************************************/

.loader {
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: flex-start;
    align-items: flex-end;
    background-image: url(/img/baggrund/space_baggrund.webp);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    overflow: hidden;
}

.loadingrocket {
    width: 20%;
    margin-top: 100px;
    bottom: -70%;
    position: absolute;
    display: flex;
    animation: flying 2.5s linear;
}

.loadingrocket2 {
    width: 20%;
    margin-top: 100px;
    bottom: -70%;
    right: 0;
    position: absolute;
    display: flex;
    animation: flying2 2.5s linear;
}

.loadingrocket3 {
    width: 20%;
    margin-bottom: 100px;
    top: 0%;
    right: 0;
    position: absolute;
    display: flex;
    animation: flying3 2.6s linear;
}

/* Animation defineres */
@keyframes flying {
    0% {
        transform: translateY(-20vh) translatex(-10vw) rotate(25deg);
    }
    33% {
        transform: translateY(-70vh) translatex(10vw) rotate(57deg);
    }
    66% {
        transform: translateY(-90vh) translatex(50vw) rotate(50deg);
    }
    100% {
        transform: translateY(-170vh) translatex(80vw) rotate(20deg);
    }
}

/* Animation defineres */
@keyframes flying2 {
    0% {
        transform: translateY(0) translatex(10vw) rotate(345deg);
    }
    33% {
        transform: translateY(-50vh) translatex(-10vw) rotate(303deg);
    }
    66% {
        transform: translateY(-80vh) translatex(-40vw) rotate(310deg);
    }
    100% {
        transform: translateY(-170vh) translatex(-80vw) rotate(340deg);
    }
}

/* Animation defineres */
@keyframes flying3 {
    0% {
        transform: translateY(-30vh) translatex(0vw) rotate(195deg);
    }
    33% {
        transform: translateY(20vh) translatex(-10vw) rotate(237deg);
    }
    66% {
        transform: translateY(50vh) translatex(-50vw) rotate(230deg);
    }
    100% {
        transform: translateY(120vh) translatex(-95vw) rotate(200deg);
    }
}

/* Side indhold gemmes */
.hidden {
    display: none;
}