@charset "utf-8"; /* Zeichencodierung des CSS Dokuments */

/**
 * Allgemein
 ******************************************************************************/

html {
    -webkit-text-size-adjust: 100%; /* Schriftgröße auf mobilen Geräten 100% */
    box-sizing: border-box; /* Padding innerhalb des Blocks */
}

*,
::before,
::after {
    background-repeat: no-repeat; /* Background images werden nicht wiederholt angezeigt */
    box-sizing: inherit; /* Padding innerhalb des Blocks für alle Elemente */
}

body {
    color: #fff; /* Standard Schriftfarbe */
    font-family: 'Space Mono', sans-serif; /* Google Fonts Scriftart */
    font-size: 12px; /* Standard Schriftgröße */
    font-weight: normal; /* Standard Schriftdicke */
    line-height: 1.2; /* Standard Linienhöhe (Schriftgröße * 1.2) */
    margin: 0; /* Entfernt margin vom body Element */
    position: relative;
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle; /* Media Elemente sind mit dem Text vertical zentriert */
}

button, input, select, textarea {
    color: inherit; /* Übernimmt die Farbe für Text vom Body */
    font-family: inherit; /* Übernimmt die Schriftart für Text vom Body */
    font-size: inherit; /* Übernimmt die Schriftgröße für Text vom Body */
    line-height: inherit; /* Übernimmt die Linienhöhe für Text vom Body */
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2; /* Standard Linienhöhe für Überschriften (Schriftgröße * 1.2) */
    font-family: 'Space Mono', sans-serif; /* Google Fonts Scriftart */
}

b {
color: #40E0d0; 

}


}
table {
    border-collapse: collapse; /* Entfernt die Lücke bei den Tabellen */
	
}

.player-box {
    position: absolute; /*losgelöst vom Textfluss*/
    right: 2%; /* Abstand rechts 2% */
    top: 2%; /* Abstand oben 2% */
}

.play-btn,
.pause-btn { /*Bilder für Ton an und aus */
    display: inline-block; /*Block auf nur einer Textzeile */
    height: 50px; /* höhe */
    width: 60px; /* breite */
}

.play-btn:hover, /*maus drüber effekt auf Musik an und aus*/
.pause-btn:hover {
    cursor: pointer; /*Maus ändert sich so, damit man weiß, dass man etwas anklicken kann*/
    filter: saturate(180%); /* Sättigung Bild erhöht sich, wenn man mit der Maus drauf ist */
}

/**
 * Hintergrundbild Bewegung aus dem Tutorium
 ******************************************************************************/

body {
    background: url("../img/hintergrund_sterne.jpg") center center fixed; /*fest ausgerichtet */
    background-size: cover; /*füllt es komplett aus */

    -webkit-animation: loader 16s steps(100) infinite; /*Hintergrundbild bewegung */
    animation: loader 30s steps(99999) infinite; /* wiederholt sich unendlich */
}

@-webkit-keyframes loader {
    from {
        background-position: 0;
    }
    to {
        background-position: -1600px 0; /* Bild bewegt sich in der Position von 0 -1600px */
    }
}

@keyframes loader {
    from {
        background-position: 0;
    }
    to {
        background-position: -1600px 0;
    }
}

/**
 * Navigationsleiste - Menü bei Maus drüber ändert sich das Bild des Menüpunktes, sowie bei einem aktiven Link wird ein anderes angezeigt
 ******************************************************************************/

nav {
    display: block; /* Positionierung im Dokumentenfluss */ 
    margin: 20px auto; /* Abstand vom Rand */
    text-align: center; /* horizontale Ausrichtung in der Mitte */
    max-width: 960px; /* maximale Breite liegt bei 960px */
}

.nav-link {
    position: relative; 
    display: inline-block; 
    width: 140px; /* Breite */
    height: 100px; /* Höhe */
}

#spiel {
    background: url("../img/Spiel_icon2.png") center center;
    background-size: cover;
}

#spiel-aktiv {
    background: url("../img/Spiel_icon1.png") center center; /*Seite aktiv dann dieses Bild*/
    background-size: cover;
}

#spiel:hover {
    background: url("../img/Spiel_icon1.png") center center; /*Maus drüber - Bild ändert sich */
    background-size: cover; /* Behält das Seitenverhältnis des Hintergrundbildes bei */
}

#spielregeln {
    background: url("../img/Regel_Icon1.png") center center;
    background-size: cover;
}

#spielregeln-aktiv {
    background: url("../img/Regel_Icon2.png") center center;
    background-size: cover;
}

#spielregeln:hover {
    background: url("../img/Regel_Icon2.png") center center;
    background-size: cover;
}

#wissen {
    background: url("../img/Wissen1.png") center center;
    background-size: cover;
}

#wissen-aktiv {
    background: url("../img/Wissen2.png") center center;
    background-size: cover;
}

#wissen:hover {
    background: url("../img/Wissen2.png") center center;
    background-size: cover;
}

#impressum {
    background: url("../img/Impressum_Icon_1.png") center center;
    background-size: cover;
}

#impressum-aktiv {
    background: url("../img/Impressum_Icon2.png") center center;
    background-size: cover;
}

#impressum:hover {
    background: url("../img/Impressum_Icon2.png") center center;
    background-size: cover;
}

/**
 * Animationen: bei Startseite wird so Superluna langsam eingeblendet, bei der Wissensseite werden so die Planeten langsam eingeblendet, codes aus dem Tutorium
 ******************************************************************************/

.animated {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

/**
 * Startseite
 ******************************************************************************/

.superheldin1 {
    position: relative; /* Positioniert die Superheldin*/

}

#superheldin { /* id der Superheldin mit Größe, Position und Effekten */
    height: 480px;
    width: 255px;
    transform: rotate(20deg); /* Superheldin img ist um 20 Grad nach rechts gedreht */
    left: 5%;
    top: 30%;

}

#superheldin:hover {
    filter: saturate(120%);

}

#sprechen { /* id mit Angabes zu Größe und Position des Textes (gif), der in der Sprechblase zu sehen ist */
    height: 150px;
    width: 500px;
    left: 400px;;
    position: absolute;
    top: 430px;
    z-index: 100; /* Das Element mit dem höchsten Wert wird auf der Z-Achse über anderen Element angezeigt */
}

#sprechblase { /* id mit Angabes zu Größe und Position der Sprechblase, in der der Text zu sehen ist */
    height: 350px;
    width: 750px;
    left: 280px;
    position: absolute;
    top: 305px;
    z-index: 1;
    filter: saturate(200%);
}

.luna-popup { /* class für das Popup mit dem Steckbrief der Superheldin mit der Positionierung */
    left: 10%;
    top: 20%;

}

#rakete {  /* id für die Rakete mit Positionierung, Größe */
    background-image: url("../img/rakete.png"); 
    height: 160px;
    width: 480px;
    left: 55%;
    top: 32%;
    position: absolute;
    display: inline-block;
    transition: transform 0.5s ease; 
    z-index: 10;
    animation: rakete 8s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes rakete { /* Effekt, dass die Rakete sich hin und her bewegt, Code aus dem Tutorium */
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-25px) rotate(10deg);
    }
}

#rakete:hover { /* Sättigung des Bildes (Rakete) wird erhöht, wenn man mit Maus drüber fährt */
    filter: saturate(250%);
}

/**
 * Wissensseite
 ******************************************************************************/

.wissen { /* class des Abschnittes main mit der Positionierung und Breite */
    position: relative;
    width: 100%;
}

.planet {
    position: absolute;
}

.planet:hover {
    filter: saturate(150%);
}

/**
 * Wissen Planeten Größe und Positionierung
 ******************************************************************************/



#venus-wissen {
    height: 100px;
    width: 110px;
    left: 70%;
    top: 80%;
    cursor: pointer; /* Verändert die Maus, wenn man über den Planeten streift. Dadurch sieht man, dass der Planet anklickbar ist */
}

#jupiter-wissen {
    height: 300px;
    width: 300px;
    left: 2%;
    top: 50%;
    cursor: pointer;
}

#saturn-wissen {
    height: 250px;
    width: 485px;
    left: 60%;
    top: 5%;
    cursor: pointer;
}

#neptun-wissen {
    height: 200px;
    width: 200px;
    left: 45%;
    top: 45%;
    cursor: pointer;
}

#uranus-wissen {
    height: 200px;
    width: 400px;
    left: 15%;
    top: 10%;
    cursor: pointer;
}

/**
 * Spielregeln
 ******************************************************************************/

 #superheldp:hover {
    filter: saturate(120%);
}
 
 #alien:hover {
	 filter: saturate(120%);
}
 
 .erklaerung { 
	 width: 38%;
	 height: auto;
 }
 
.spielregeln {
    margin: 0 auto;
    max-width: 960px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, .5);
    text-align: center;
}

.spielregeln > h1 {
    padding: 10px 0;
}

/**
 * Impressum
 ******************************************************************************/

.impressum {
    margin: 0 auto;
    max-width: 960px;
    height: 700px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, .5);
    text-align: center;

}

.impressum > h1 {
    padding: 10px 0;
}

/**
 * Footer unten, hier ist das Copyright zu finden
 ******************************************************************************/

main {
    height: calc(100vh - 210px);
}

footer {
    margin: 10px;
    text-align: center;
    position: relative;
}

/**
 * Popup für die Superheldin auf der Startseite
 ******************************************************************************/

.popup {
    cursor: pointer;
}

.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 10%;
    margin-left: -80px;
}

.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/**
 * Standard Overlay für die Planeten auf der Wissenseite, dieses öffnet sich beim Klick auf einen Planeten
 ******************************************************************************/

#overlay, #overlay1, #overlay2, #overlay3, #overlay4, #overlay5, #overlayspiel {
    position: absolute; 
    display: none;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2;
    cursor: pointer;
    height: 120%;
    width: 100%;
}

#overlayspiel {
    position: fixed;
    height: 100%;
    text-align: center;
}

#overlay div, #overlay1 div, #overlay2 div, #overlay3 div, #overlay4 div, #overlay5 div, #overlayspiel div {
    margin: 0 auto;
    font-size: 15px;
    color: white;
    max-width: 960px;
    position: relative;
    z-index: 3;
}

#overlayspiel div {
    padding-top: 300px;
}

#spieltxt {
padding: 2%;
}
/**
 * ...
 ******************************************************************************/

/*** Planeten img auf dem Overlay **/
#venusover, #jupiterover, #saturnover, #neptunover, #uranusover {
    height: 200px;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0;
}
/* Größe der Bilder der Planeten auf dem Overlay*/
#venusover {
    width: 215px;

}

#jupiterover {
	width: 300px;
	height: auto; 
}
#neptunover {
    width: 195px;
}

#saturnover {
    width: 380px;
}

#uranusover {
    width: 400px;
}

.zeilen { /* Breite der Tabellenzeile 1 in den Overlays der Planeten */
    width: 28%;
    padding: 1%;
    left: 10%;
     position: relative;

    

}

.zeilen1 {
    width: 60%;
    padding: 1%;
     left: 10%;
     position: relative;

}

/*
 * Spiel
 ******************************************************************************/
 
# spielseite {
width: 100%;
}
 
#sonnensystem {
	top: 10%;
	width: 1100px;
	position: relative;
 }
 
#start { /* id des Buttons für den Timer */
	width: 150px;
	height: 40px;
	background-color: #FF4500;
	font-size: 18pt;
	position: absolute;
	left: 40%;
}

#time { /* Zeitangabe */
	position: relative;
	top: 30px;
	left: 43%;
	font-size: 20pt;
	
	
}
	
#spielspiel { /* id für die Spielwelt, in die sie geladen wird */
    position: relative;
    top: 55px;
    left: 10%;
	

}


.superheldp, .mauer, .stern, .hintergrund, .alien { /* Definiton der Größe der einzelnen Bilder im Spiel */
    width: 50px;
    height: 50px;
    display: inline-block;
}

.superheldp { /* Bild der Superheldin */
    background-image: url("../img/superheldp.png");
}

.mauer { /* Bild der Mauer */
    background-image: url("../img/wall.png");
}

.stern { /* Bild des Sterns */
    background-image: url("../img/stern.png");
}

.hintergrund { /* Bild des Hintergrunds */
    background-image: url("../img/bg.png");
}

.alien { /* Bild des Aliens */
    background-image: url("../img/alien.png");
}