/* Standart Start*/
/*******************************************************************************************************/
*{
    font-family: Monotype Corsiva;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    position: relative;
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  
  html{
  height: 100%;
  }
  
  body{
      height: 100%;
      background-image: url("../../Astrobilder/led-sternenhimmel.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
  }
  
  .titel{
    right: 1.5%;
    text-align: center;
    font-size: 8vw;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  }
  
  /* Navigationsleiste Start */
  .mondbalken{
    cursor: pointer;
      left: 20%;
      top: 10%;
      width: 8vw;
  }
  
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  #dropdown-content {
    top: 105%;
    float: left;
    width: 10vw;
    border-width: 0.5vw;
    border-color: #010D3A;
    font-size: 2vw;
    border-style: solid;
    margin: 0%;
    padding: 0%;
    display: none;
    position: absolute;
    min-width: 97%;
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  #dropdown-content a {
    padding: 7.5% 5%;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  #dropdown-content a:hover{
    font-weight: bold;
  }
  
  /* Show the dropdown menu on hover 
  .dropdown:hover .dropdown-content {
    display: block;
  }
  */
  .Naveinteilung{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-self: center;
  }
  
  .Sprache{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
  .Flagge{
    width: 2.6vw;
    height: auto;
    margin-top: 40%;
    right: 10%;  
  }
  
  .Flagge:hover{
    width: 2.8vw;
    height: auto;
  }
  
  .Raumstation{
    top: 10%;
    right: 10%;
    width: 6vw;
    height: auto;
  }
  
  /* Navigatiosnleiste Ende */
  /**************************************************************************************************************************************************/
  /* Handy Version */
  
  @media only screen and (max-width: 400px) {
  .titel{
    right: 1.5%;
    text-align: center;
    font-size: 12vw;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  }
  
  
  /* Navigationsleiste Start */
  .mondbalken{
    cursor: pointer;
      left: 10%;
      top: 5%;
      width: 12vw;
  }
  
  /* Dropdown Content (Hidden by Default) */
  #dropdown-content {
    top: 55%;
    float: left;
    width: 10vw;
    border-width: 0.5vw;
    border-color: #010D3A;
    font-size: 3vw;
    border-style: solid;
    margin: 0%;
    padding: 0%;
    display: none;
    position: absolute;
    min-width: 125%;
    z-index: 1;
  }
  
  .Flagge{
    width: 4vw;
    height: auto;
    margin-top: 40%;
    right: 10%;  
  }
  
  .Flagge:hover{
    width: 4.5vw;
    height: auto;
  }
  /* Navigation Ende */
  .Raumstation{
    top: 5%;
    right: 10%;
    width: 8vw;
    height: auto;
  }
  }
    /* Standart Ende*/

    .Abstand{
      padding-top: 10%;
      padding-left: 6%;
    }

    .AbstandB{
      padding-left: 6%;
      padding-top: 6%;
    }

    .Flex{
        padding-left: 10%;
        padding-right: 10%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .Bilder2{
      left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: nowrap;
    }

    .Thema{
        padding-left: 10%;
        padding-right: 10%;
        font-size: 4vw;
    }

    .Text{
        font-size: 2vw;
    }

    .Sonnenfinsternis{
        padding-top: 10%;
        left: 10%;
        width: 40vw;
        height: 14vw;
    }


  .Vollmond{
      bottom: 5%;
      width: 15vw;
      height: auto;
  }

      .VollmondmK{
      padding-top: 10%;
      width: 15vw;
      height: auto;
      bottom: 5%;
    }

    .Blutmond{
      padding-top: 5%;
      left: 10%;
      width: 40vw;
      height: 14vw;
  }

  .Sternschnuppe{
    padding-top: 15%;
    left: 10%;
    width: 40vw;
    height: 14vw;
    margin-bottom: 15%;
}

    /* Handy Verion */
    
    @media only screen and (max-width: 400px) {
      .Text{
        font-size: 3vw;
      }

      .Thema{
        font-size: 6vw;
      }

      .Abstand{
        padding-top: 10%;
        padding-left: 8%;
      }
  
      .AbstandB{
        padding-left: 6%;
        padding-top: 8%;
      }

    }