/* Language Stuff */


/* Lanugage Screen */

.language_screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: black;
  color: white;
  width: 80%;
  height: 100vh;
  overflow-y: scroll;
  padding: 10%;
  padding-top: 5%;
  font-size: 40px;
  font-weight: bold;
  /* display: none; */
}

.language_screen img {
  width: 150px;
}

.language_screen span {
  display: block;
  margin-top: 30px;
  margin-bottom: 50px;
  font-size: 25px;
  color: hsl(0,0%,50%);
}

.language_screen .button {
  color: white;
  border: 2.5px solid white;
  margin: 20px;
  padding: 10px 20px;
  font-size: 30px;
  display: inline-block;
}

.language_screen .button:hover {
  background: white;
  color: black;
}

.bottom_space {
  width: 100%;
  height: 30vw;
}

@media only screen and (max-width: 1200px) {
  .language_screen {
    font-size: 9vw;
  }
  .language_screen img {
    width: 35vw;
    margin-top: 8vw;
  }
  .language_screen span {
    font-size: 5vw;
    margin-top: 6vw;
    margin-bottom: 4vw;
  }
  .language_screen .button {
    border: 0.4vw solid white;
    display: block;
    padding: 3vw 0px;
    margin-bottom: 9vw;
  }
  .bottom_space {
    width: 100%;
    height: 40vw;
  }
}





:root {
  --language_menu_space_top_desktop: 28px;
  --language_menu_space_top_mobile: 17vw;
}

.translation-notice {
  position: fixed; top: 0; left: 0; width: 100%; text-shadow: none; padding: 2px 0; z-index: 1000;
  background: black;
  border: none;
  color: white;
  height: var(--language_menu_space_top_desktop);
}

.translation-notice p {
  margin: 0; font-size: 0.8em; text-shadow: none;
}

.translation-notice p a {
  color: white;
  font-weight: 400;
}

.translation-notice p i {
  padding-right: 3px;
}


.all-languages { 
  font-size: 0.7em !important;
  }


@media only screen and (max-width: 1200px) {
  .translation-notice {
    height: var(--language_menu_space_top_mobile);
  }
}

.extra_space_because_of_language {
  width: 100%;
  height: var(--language_menu_space_top_desktop);
}
@media only screen and (max-width: 1200px) {
  .extra_space_because_of_language {
    width: 100%;
    height: var(--language_menu_space_top_mobile);
  }
  .all-languages { 
    font-size: 3.0vw !important;
  }
}






/* Language Selection */

.languages {
  background: black;
  color: hsl(0, 0%, 50%);
  font-weight: bold;
  font-size: 12px;
  padding: 7px;
}

.languages a {
  color: hsl(0, 0%, 70%);
  padding-left: 40px;
}

.languages a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 1200px) {
  .languages {
    display: none;
  }
}