html {
      overflow: scroll;
      overflow-x: hidden;
    }
    ::-webkit-scrollbar {
      width: 0; /* remove scrollbar space */
      background: transparent; /* to make scrollbar invisible */
    }
    ::-webkit-scrollbar-thumb {
      background: transparent;
    }

    ::selection {
      /* Change highlight background color */
      background: 	#f2f20a;
      /* Change highlight text color */
    }

    body{
      background-image:url('https://static.tumblr.com/12fa0f315d290bb1df15954e7a68536d/67u0lkf/NHgmnojyf/tumblr_static_tumblr_mmm5k4yecc1qmf2zwo1_r1_500.png');
      background-repeat:repeat-x;
      background-size:auto 100vh;
      background-attachment: fixed; 
      overflow-x:hidden;
    }
    
@font-face {
font-family:'Magic';
src: url(https://dl.dropbox.com/s/fez9i3nk7qelaae/Magic%20Funk.ttf); 
}



    h1{
      font-family: 'Magic', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size:90px;
      margin-top:0;
      text-align:center;
      color:#e7bd44;
    }


    h3{
      font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
      font-optical-sizing: auto;
      font-weight: normal;
      color:#e7bd44;
      text-align:center;
    }

    h4{
      font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
      font-optical-sizing: auto;
      font-weight: normal;
      color:#e7bd44;
      margin-right:-400px;
      width:500px;
    }

    .text {
      font-family:Georgia, 'Times New Roman', Times, serif, sans-serif;
      font-optical-sizing: auto;
      font-weight: normal;
      color:#e7bd44;
      text-align:center;
    }

    .text2 {
      font-family:Georgia, 'Times New Roman', Times, serif, sans-serif;
      font-optical-sizing: auto;
      font-weight: normal;
      color:#e7bd44;
      text-align:center;
    }
    .base{
      border:solid;
      width: 900px;
      height:450px;
      border-radius:16px; 
      padding:16px;
      border-color:#e7bd44;
      background-color: rgba(0, 0, 0, 0.125);
      flex-shrink: 0;
      /* @nokira This should not be applied. If you want to position the window, apply the CSS to the top div element, for example "journalWindow", not the inside content, or it would create bugs when detecting the clicks. */
      /* */
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      overflow-y: auto;
    }

    .base3{
      border:solid;
      width: fit-content;
      height:fit-content;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-color: rgba(0, 0, 0, 0.125);
      flex-shrink: 0;
      /* @nokira This should not be applied. If you want to position the window, apply the CSS to the top div element, for example "journalWindow", not the inside content, or it would create bugs when detecting the clicks. */
      /* */
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      position:relative;
    }

 

    .base1{
      border:solid;
      width: 500px;
      height:fit-content;;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-image:url('images,audio,videos(all the graphic stuff)/paperimg.jpg');
      background-size:cover;
      padding-top:2px;
      position: absolute;
      
    }
    .base2{
      border:solid;
      width: 700px;
      height:600px;
      padding:none;
      border:none;
      background-image:url('images,audio,videos(all the graphic stuff)/musicappcdcoverforbackground.png');
      background-size:cover;
      padding-top:2px;
      flex-shrink: 0;
    }
   

    .base4{
      border:none;
      width: 600px;
      height:400px;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-image:url('images,audio,videos(all the graphic stuff)/camerabackground.png');
      flex-shrink: 0;
      /* @nokira This should not be applied. If you want to position the window, apply the CSS to the top div element, for example "journalWindow", not the inside content, or it would create bugs when detecting the clicks. */
      /* */
     background-repeat:no-repeat;
      
      z-Index:1;
    }

    .base5{
      border:solid;
      width: 370px;
      height:480px;
      left:40px;
      right:50px;
      top:30px;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-image:url('images,audio,videos(all the graphic stuff)/starrynightforthegame.png');
      flex-shrink: 0;
      position:absolute;
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      overflow: hidden;
      animation:blockbackground 5s linear infinite;
      background-repeat: repeat-x;
      background-size:100%;
      

    }
  #rahmen{
    position:relative;
    display:inline-block;
    border-radius:16px;
  }
  .rahmen-bild{
    display:block;
    max-width:100%;
    pointer-events: none;
    border-radius:16px;
  }
  

     .base8{
     border:solid;
      width: 900px;
      height:450px;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-color: rgba(0, 0, 0, 0.125);
      flex-shrink: 0;
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      overflow: hidden;
      overflow-y: auto
    }

 .base9{
     border:solid;
      width: 900px;
      height:450px;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-color: rgba(0, 0, 0, 0.125);
      flex-shrink: 0;
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      overflow: hidden;
      overflow-y: auto
    }

    .base6{
      border:none;
      outline:none;
      width: 600px;
      height:500px;
      background-image:url('images,audio,videos(all the graphic stuff)/tvbackground.png');
      padding-top:2px;
      z-Index:1;
      background-repeat:no-repeat;
      position: relative;
 
    }

  .base13{
     border:solid;
      width: 900px;
      height:450px;
      border-radius:16px; 
      padding:16px;
      border-color:#fff;
      background-color: rgba(0, 0, 0, 0.125);
      flex-shrink: 0;
      backdrop-filter: blur(50px);
      padding-top:2px;
      z-Index:1;
      overflow: hidden;
      overflow-y: auto
    }


    .info {
      position: absolute;
      top: 0;                  
      left: 0; 
      width: 100%; 
      backdrop-filter: blur(5px);
      background: rgba(0, 0, 0, 0.125);
      color: #fff;
      gap: 3px;
      flex-direction: row; 
      display: flex;
      justify-content: space-between; 
      align-items: center;
      margin-bottom:30px;         
     

    }

    #tvWindow{
      position:absolute;
      display: flex;        
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      margin: auto;
      display: none; 
    }



     #gameWindow{
      position:absolute;
      display: flex;        
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      margin: auto;
      display: none; 
    }


    #galerieWindow{
      position:absolute;
      display: flex;        
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      margin: auto;
      display: none; 
    }

    #welcome{
      position:absolute;
      display: flex;        
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      margin: auto;
      overflow-y: auto;
      
    }

    #mapWindow{
      position:absolute;
      display: flex;        
      top: 80px; 
      left: 900px; 
      right:80px;
      bottom:80px;
      margin: auto;
      display: none; 
      
    }

    #journalWindow{
      position:absolute;
      top: 150px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      display: none;

      
    }

   #hubbleWindow{
      position:absolute;
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      display: none;
     
    }

    #NASAWindow{
      position:absolute;
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      display: none;
     
    }

   #WikiWindow{
      position:absolute;
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      display: none;
     
    }

 #ManualWindow{
      position:absolute;
      top: 200px; 
      left: 491px; 
      right:80px;
      bottom:80px;
      display: none;
      height:fit-content;
      width:fit-content;
     
    }

    .symbole{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
    }

   .symbolemusic{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      margin-left:80px;
    }
  .symbolemap{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      
    }

    .symbolegalerie{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      margin-left:80px;

      
    }

    .symbolegame{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      top:50px;
      z-Index:10000000;
      
    }


   .symboletv{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      margin-left:50px;
      position: relative;
      z-index: 2; 
      pointer-events: none;
    }

   .symbolehubble{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      top:50px;
      z-Index:1000;
    }

  .symboleNASA{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      top:50px;
      z-Index:1000;
    }

    .symboleWiki{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      top:50px;
      z-Index:1000;
    }

 .symboleManual{
      display: flex;
      justify-content: flex-start; 
      gap: 1px;
      margin: 0;
      padding: 0;
      top:0px;
      z-Index:1000;
      left:20px;
      position:absolute;
    }


    .icon.selected {
    border: 7px double #f2f20a;  
    border-radius:16px;

    }
    .add-note-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/newbuttonforthejournalapp.jpg');
    background-size: cover; /* Passt das Bild an die Button-Größe an */
    border-radius:5px;
    height:40px;
    width:100px;
    display: flex;
    justify-content: center;
    border: 2px solid #fff;       
    outline: none; 
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);    

    }
    #noteDialog{
    border-radius: 16px;
    border: 2px solid #fff;       
    outline: none;
    background-image: url('images,audio,videos(all the graphic stuff)/kork.jpg');
    background-size: cover;
    width:300px;
    height:200px;        
    
    }
   .w3_button_w3_display_left{
    background-image: url('images,audio,videos(all the graphic stuff)/arrowtotheleftforthejournal.jpg');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;        
    float: left;
   }

   .w3_button_w3_display_right{
    background-image: url('images,audio,videos(all the graphic stuff)/arrowtotheright.jpg');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    float: right;

   }
    header{
    position: relative;
    width: 100%;
    display: block;}

    .close-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/deletebuttonforthejournal.jpg');
    background-size: cover;
    width: 20px;
    height: 20px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    position: absolute;
    top: 0;
    right: 0;
    
    }
    .save-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/savebuttonforthejournal.jpg');
    background-size: cover;
    width: 80px;
    height: 35px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    float:right;
    }

    .cancel-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/cancelbuttonforthejournal.jpg');
    background-size: cover;
    width: 80px;
    height: 35px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    }
    .dialog-header {
    position: relative;
    width: 100%;
    
    }


   #noteContent{
    width:290px  !important;
    height:80px  !important;
     display: block;
    margin: 15px auto !important; 
    text-align: center;
    border-radius:6px;
    background-color:#ffebef;
   }

   .dialog-title{
    font-family:Tangerine ;
   }

   .edit-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/editbuttonforthejournalapp.jpg');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    left:5px;
    position: absolute;   
    bottom: 5px;       

   }
   .delete-btn{
    background-image: url('images,audio,videos(all the graphic stuff)/deletebutton.jpg');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    right:5px;
    position: absolute;   
    bottom: 5px;       

   }
   .note-card{
    background-image:url('images,audio,videos(all the graphic stuff)/Website OS.jpg');
    border-radius:16px;
    width:200px;
    height:80px;
    margin:15px;
    position: relative;
    

   }
   .note-titel{
    font-family:'Times New Roman', Times, serif;
    position:absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
   }
   #notesContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    gap: 15px; /* Abstand zwischen den Karten */
   }

   #journalWindowheader{
    size: 30%; 
    user-select:none;
   }
   #journalclose{
    user-select:none;
   }
   #journalopen{
    user-select:none;
   }
   #welcomeheader{
    user-select:none;
   }
   #welcomeclose{
    user-select:none;
   }
   #welcomeopen{
    user-select:none;
   }
  
 .search_background {
  position: fixed;
  top: 120px; 
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width:400px;
 }

 .search_background:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
 }

 .search {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95); 
  padding: 8px 16px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 .search_input {
  border: none;
  background: transparent;
  outline: none;
  margin-left: 8px;
  font-size: 16px;
  font-family: inherit;
  width:380px;
 }

 #musicWindow{
      position:absolute;
      top: 80px; 
      left: 80px; 
      right:80px;
      bottom:80px;
      display: none;
      overflow: hidden;
      
    }

    #desktopApps{
        background-color: rgba(256, 256, 256, 0.125);
        border-radius:16px;
        width: fit-content;
        height:665px;
        margin-top:120px;
        padding-top: 0px;
        padding-left:0;
        overflow-y: auto;
    }


     :root {
     --dreh-dauer: 50s; 
      font-optical-sizing: auto;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;

  /* sprite image */
  --sprite-image: url(https://assets.codepen.io/36869/book.webp);

  /* sprite animation settings */
  /* animation duration */
  --sprite-as: .8s;
  /* animation direction */
  --sprite-ad: normal;
  /* animation fill mode */
  --sprite-af: none;
  /* animation play state */
  --sprite-ap: running;
  /* animation iteration count */
  --sprite-ai: infinite;
  /* animation timing function */
  --sprite-at: linear;
  /* animation frame rate */
  --sprite-fr: 12;
     }
    
       

.musicslidesright{
    background-image: url('images,audio,videos(all the graphic stuff)/arrowtotherightforthemusicapp.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    float: right;
    margin-right:30px;
}
.musicslidesleft{
    background-image: url('images,audio,videos(all the graphic stuff)/arrowtotheleftforthemusicapp.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius:6px;
    border: 2px solid #fff;       
    outline: none;  
    float: left;
    margin-left:80px;
}
 #musicWindowheader{
    user-select:none;
    position: relative;
    z-index: 8000;
   }
   #musicclose{
    user-select:none;
    position: relative;
    z-index: 8000;
   }
   #musicopen{
    user-select:none;
    position: relative;
    z-index: 8000;
   }

.loader{
    position:fixed;
    z-Index:99;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0A1449;
    display:flex;
    justify-content:center;
    align-items:center;
}
.loader.hidden{
    animation: fadeOut 100s ease  forwards;
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
   100%{
    opacity: 0;
    visibility: hidden;
    z-index:-1;
   }
    
}


#quotes{
   animation: scroll-text 10s linear infinite;
   display: inline-block;
  white-space: nowrap;
  margin-top: 5px;
}
@keyframes scroll-text{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
}
}
h2[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.5); 
    pointer-events: none;
}

#mapWindowheader{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #mapclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #mapopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }

   #galerieWindowheader{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #galerieclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #galerieopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }

   #gameWindowheader{
    user-select:none;
    position: relative;
    z-index: 10000;
   }
   #gameclose{
    user-select:none;
    position: relative;
    z-index: 10000000;
   }
   #gameopen{
    user-select:none;
    position: relative;
    z-index: 10000000;
   }

    #tvWindowheader{
    user-select:none;
    position: relative;
    z-index: 10;
    pointer-events: auto; 
   }
   #tvclose{
    user-select:none;
    position: relative;
    z-index: 10;
    pointer-events: auto; 
   }
   #tvopen{
    user-select:none;
    position: relative;
    z-index: 10;
    pointer-events: auto; 
   }
    #hubbleWindowheader{
    z-index: 9999;
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #hubbleclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #hubbleopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }


   #NASAWindowheader{
    z-index: 9999;
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #NASAclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #NASAopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }

 #WikiWindowheader{
    z-index: 9999;
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #Wikiclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #Wikiopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }



   #ManualWindowheader{
    z-index: 9999;
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #Manualclose{
    user-select:none;
    position: relative;
    z-index: 10;
   }
   #Manualopen{
    user-select:none;
    position: relative;
    z-index: 10;
   }

/*made with HELP from AI*/
.grid-container {
  overflow-y: auto;
  display: grid;
  /* Definiert 3 Spalten (Außenbereiche quadratisch, Mitte flexibel) */
  grid-template-columns: 80px 1fr 80px;
  /* Definiert die Zeilenhöhen basierend auf dem Layout */
  grid-template-rows: auto auto auto auto;
  gap: 15px; /* Abstand zwischen den Boxen */

  /* Visuelle Zuordnung der Boxen (Sonderzeichen entfernt) */
  grid-template-areas: 
    "av-left   title     av-right"
    "box-left  box-mid   box-right"
    "long-bar  long-bar  box-right"
    "foot-left foot-mid  foot-right";
}

/* Zuweisung der einzelnen Elemente zu den Bereichen */
.avatar-left   { grid-area: av-left; }
.title         { grid-area: title; }
.avatar-right  { grid-area: av-right; }
.box-left      { grid-area: box-left; }
.box-center    { grid-area: box-mid; }
/* Die rechte Box geht über zwei Zeilen */
.box-right     { grid-area: box-right; } 
.long-bar      { grid-area: long-bar; }
.footer-left   { grid-area: foot-left; }
.footer-center { grid-area: foot-mid; }
.footer-right  { grid-area: foot-right; }


/* Hintergrundfarbe für die Boxen zum Testen */
.grid-container > div {
  background:none;
  border: none;
 outline:none;
  min-height: 40px;
  padding: 10px;
}
/*the ai help  part ends*/
.avatar-right{
  margin-left:0px;
}

.box-center{
  position:absolute;
  width:500px;
  top:250px;
  left:250px;
  margin:0px;
}

.button-left{
  background-image:url('images,audio,videos(all the graphic stuff)/PfeilnachlinksKamera.png');
  width:40px;
  height:40px;
  border:none;
  outline:none;
  position:absolute;
  top:268px;
  left:436px;
  border-radius:50%;
}


.button-right{
  background-image:url('images,audio,videos(all the graphic stuff)/Pfeil nach rechts Kamera.png');
  width:40px;
  height:40px;
  border:none;
  outline:none;
  position:absolute;
  top:268px;
  left:507px;
  border-radius:50%;
}


.mySlides3{
  height:217px;
  width:290px;
  position:absolute;
  left:104px;
  top:90px;
  border-radius:6px;
}


.vd{
  width:382px;
  height:320px;
  margin-left:48px;
  border-radius:30px;
  overflow: hidden;
  margin-top:-5px;
  z-index:1;
}






#block{
width:50px;
height:300px;
background-image:url('images,audio,videos(all the graphic stuff)/blockforthegame.png');
background-repeat:no-repeat;
position:absolute;
left:400px;
animation:block 2s infinite;
top:300px;
background-position: bottom center;
background-size: 100% 100%;

}
@keyframes block{
    0%{left:400px}
    100%{left:-50px}
}
/*
#hole{
  width:50px;
  height:300px;
  background-color:transparent;
  position:relative;
  left:400px;
  top:0px;
  animation:block 2s infinite ;
} */

#character{
    width: 50px;
    height: 50px;
    background-image:url('images,audio,videos(all the graphic stuff)/wendyforthegame.png');
    position: absolute;
    top: 100px;
  
}


@keyframes blockbackground{
    0%{
      background-position-x:0px}
    100%{
     background-position-x: 800px;
}
}



#h6 {
    position: relative;
    z-index: 10; 
    color: darkgreen; 
    font-size: 36px;
    margin: 5px;
    text-align:center;
    font-family: Tangerine;
}


#appIntro {
    display: none; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    object-fit: cover; 
    pointer-events: none;
}



@font-face {
  font-family: "myriad";
  src: url("https://files.catbox.moe/s0igcb.OTF");
}

.controls {
  position: absolute;
  left: 50px;
  top: 50px;
  width:fit-content ;
  height: fit-content;
  border-radius: 16px;;
  background-image:url('images,audio,videos(all the graphic stuff)/controlsbackgroundforthemusicapp.png');
  border:none;
  user-select:none;
  z-Index:29999;
}

 .controls .fa-fast-backward {
  position: absolute;
  top: 498px;
  right: -280px;
  height:50px;
  width:50px;
  color: #aaa;
  font-size: 1.2em;
  cursor: pointer;
  background-image:url('images,audio,videos(all the graphic stuff)/controlforthemusicappback.png');
  z-index:500;

}

.controls .fa-fast-forward {
  position: absolute;
  top: 498px;
  left: 379px;
  height:50px;
  width:50px;
  color: #aaa;
  font-size: 1.2em;
  cursor: pointer;
  background-image:url('images,audio,videos(all the graphic stuff)/controlsforthemusicappforward.png');
  z-index:500;
}

.controls .play-pause-btn {
  position: absolute;
  top: 513px;
  left: 282px;
  border: none;
  outline: none;
  background-image:url('images,audio,videos(all the graphic stuff)/controlsbackgroundforthemusicapp.png');
  cursor: pointer;
  z-Index:10000000;
  background-color:transparent;
  height:20px;
  width:80px;
}

@font-face {
src: url(https://dl.dropbox.com/s/mes7b666uvig5wc/Winkle-Regular.otf);
font-family: winkle;
}
@font-face {
src: url(https://dl.dropbox.com/s/16ntpxj8fny66d6/Quick%20Love.ttf);
font-family: quick-love;
}
.name {
  font-size: 15px;
  position:absolute;
  rotate:90deg;
  width:200px;
  top:120px;
  left:-50px;
  text-align:right;
  font-family:"quick-love";
  color:darkblue;}
  

.singer {
  top:390px;
  font-size: 22px;
  font-family: "winkle";
  position:absolute;
  left:-100px;
  rotate:90deg;
  width:300px;
  text-align:left;
 color:darkblue;
}

#poster{
       user-select:none;
       pointer-events:none;
       position:absolute;
       top:-5px;
       margin-left:-55px;
      
       animation: flacheDrehung var(--dreh-dauer) linear infinite;
    }
     @keyframes flacheDrehung {
     from {
     transform: rotate(0deg);
     }
      to {
     transform: rotate(360deg);
       }
      }

#menu{
  background-image:url('images,audio,videos(all the graphic stuff)/menuforthecdbackgroundgrey.png');
  background-repeat:no-repeat;
  height:600px;
  width:600px;
  position:absolute;
  top:-10px;
  left:65px;
  pointer-events:none;


}
#menu:hover { z-index: 999999; }

#Dramaticmenu {
  position: absolute;
  left: 70px;
  top: 80px;
  cursor: pointer; 
  display: inline-block; 
}




#Dramaticmenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
} #Dramaticmenu img  :hover { z-index: 999999; }

#AppleVinesmenu{
  position: absolute;
  left: 119px;
  top: 45px;
  cursor: pointer; 
  display: inline-block; 
}

#AppleVinesmenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#AppleVinesmenu img  :hover { z-index: 999999; }


#Venusmenu{
  position: absolute;
  left: 175px;
  top: 24px;
  cursor: pointer; 
  display: inline-block; 
}

#Venusmenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#Venusmenu img  :hover { z-index: 999999; }


#studymenu{
  position: absolute;
  left: 235px;
  top: 16px;
  cursor: pointer; 
  display: inline-block; 
}

#studymenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#studymenu img  :hover { z-index: 999999; }


#watermenu{
  position: absolute;
  left: 300px;
  top: 20px;
  cursor: pointer; 
  display: inline-block; 
}

#watermenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#watermenu img  :hover { z-index: 999999; }


#sleepmenu{
  position: absolute;
  left: 360px;
  top: 35px;
  cursor: pointer; 
  display: inline-block; 
}

#sleepmenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#sleepmenu img  :hover { z-index: 999999; }

#lernmenu{
  position: absolute;
  left: 409px;
  top: 60px;
  cursor: pointer; 
  display: inline-block; 
}

#lernmenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#lernmenu img  :hover { z-index: 999999; }

#energymenu{
  position: absolute;
  left: 450px;
  top: 95px;
  cursor: pointer; 
  display: inline-block; 
}

#energymenu img {
  position:absolute;
  display: block; 
  width: 50px;  
  height: auto;
  pointer-events:auto;
  left:30px !important;
}


#energymenu img  :hover { z-index: 999999; }


.hubblesitedesign{
  width:100%;
  height:100%;
 border:none;
 outline:none;
 margin:0px;
 padding:0px;
 border-radius:6px;  
 scrollbar-width:none;
}

.hubblesitedesign::-webkit-scrollbar{
  display:none;
 width:0;
 height:0;
}

@font-face {
src: url(https://dl.dropbox.com/s/8p8mi5uzbekohv7/Starborn.ttf);
font-family: starborn;
}


#textforthehubble {
font-family:"starbon";
font-size: 40px;
color:#e7bd44;
text-align:justify;
margin-left:40px;
margin-right:40px;
}




input[type="checkbox" i] {
  display:none;
}
.book{
  display:flex;
}
#cover{
  width:550px;
  height:700px;
}
.flip-book{
  width:550px;
  height:700px;
  position:relative;
  perspective:1500px;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;

  

}
.flip{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  transform-origin: left;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition: .5s;
  color:black;}
  
@font-face {
src: url(https://dl.dropbox.com/s/kp4x66rhekt1fz5/AdabelleHandwriting-Regular.ttf);
font-family: adabelle;}

.front{  
  font-family:'Times New Roman', Times, serif ;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image:url('images,audio,videos(all the graphic stuff)/backgroundforthejournalappforthetextpart.png');
  box-sizing:border-box;
  padding:20px 20px;
  box-shadow: inset 20px 0 50px rgba(0,0,0,0.5) 0 2px 5px rgba(0,0,0,rgba(0,0,0,.5));
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  font-family:adabelle;
  color:darkblue;
  font-size:20px;
  
}
.back{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:99;
  transform:rotateY(180deg);
  backface-visibility: hidden;
  background-color:pink;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  font-family: adabelle;
  font-size:20px;
  color:darkblue;
}
.next-btn{
  position:absolute;
  bottom:13px;
  right:13px;
  cursor:pointer;
  color:black;
  width:20px;
  height:20px;
  user-select:none;
 
}
.back-btn{
  position:absolute;
  bottom: 13px;
  left:13px;
  cursor:pointer;
  color:black;
  width:20px;
  height:20px;
  font-family: 'Times New Roman', Times, serif;
  font-size:20px;
 user-select:none;
 
}
#p1{
  z-index:9;
}
#p2{
  z-index:8;
}
#p3{
  z-index:7;
}
#p4{
  z-index:6;
}
#p5{
  z-index:5;
}
#p6{
  z-index:4;
}
#p7{
  z-index:3;
}
#p8{
  z-index:2;
}
#p9{
  z-index:1;
}

#c1:checked ~ .flip-book #p1{
  transform:rotateY(-180deg);
  z-index:1;
}
#c2:checked ~ .flip-book #p2{
  transform:rotateY(-180deg);
  z-index:2;
}
#c3:checked ~ .flip-book #p3{
  transform:rotateY(-180deg);
  z-index:3;
}
#c4:checked ~ .flip-book #p4{
  transform:rotateY(-180deg);
  z-index:4;
}
#c5:checked ~ .flip-book #p5{
  transform:rotateY(-180deg);
  z-index:5;
}
#c6:checked ~ .flip-book #p6{
  transform:rotateY(-180deg);
  z-index:6;
}
#c7:checked ~ .flip-book #p7{
  transform:rotateY(-180deg);
  z-index:7;
}
#c8:checked ~ .flip-book #p8{
  transform:rotateY(-180deg);
  z-index:8;
}
#c9:checked ~ .flip-book #p9{
  transform:rotateY(-180deg);
  z-index:9;
}

#rotate {
overflow: hidden;
display: inline-block;
 
}
 
#rotate img {
transition: transform .5s;
}
 
#rotate:hover img {
transform: scale(1.25) rotate(10deg);
transform-origin: 50% 50%;
-webkit-filter: blur(.5px);
filter: blur(.5px);
}