html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: arial;
    background-color:black;
  }

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
  @keyframes spinner {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}

h2 {
  margin: 0px 0 -5px 0;
  text-align: center;
}
#container {
  width:100%;
  height:100%;
}
#populous {
  color: purple;
}
/* The sidepanel menu */
.sidepanel {
 height: 85%; /* Specify a height */
 width: 0; /* 0 width - change this with JavaScript */
 position: fixed; /* Stay in place */
 z-index: 1; /* Stay on top */
 top: 45px;
 left: 0;
 background-color: #111; /* Black*/
 overflow-x: hidden; /* Disable horizontal scroll */
 padding-top: 25px; /* Place content 60px from the top */
 transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
 font-family: arial;
}

/* The sidepanel links */
.sidepanel a {
 padding: 2px 0px 2px 20px;
 text-decoration: none;
 font-size: 1.4em;
 color: #e19c1a;
 display: block;
 transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
 color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
 position: absolute;
 top: -5px;
 right: 6px;
 font-size: 1.2em;
 margin-left: 50px;
 color: #ac4a4a;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
   font-size: 1.23em;
   cursor: pointer;
   background-color: #111;
   color: white;
   padding: 10px 22px 12px 20px;
   border: none;
   position: fixed;
   z-index: 1;
   border-radius: 0 0 23px 0;
}
.btnResetCam, .btnToggleCam {
  font-size: 1em;
  cursor: pointer;
  background-color: #1111116e;
  color: #9ebfcd;
  padding: 8px 20px;
  border: none;
  position: fixed;
  right: 0px;
  border-radius: 18px 0 0 18px;
  bottom: 54px;
}
.btnToggleCam {
  bottom: 12px;
}
.btnInspector {
  font-size: 1em;
  cursor: pointer;
  background-color: #1111116e;
  color: #f75c5cad;
  padding: 8px 20px;
  border: none;
  position: fixed;
  right: 0px;
  border-radius: 18px 0 0 18px;
  bottom: 14px;
}

.openbtn:hover, .btnResetCam:hover, .btnInspector:hover {
  background-color: #444;
}
.menu_city {
  color : #4b92a7;
  font-size: 0.88em;
  padding: 0 0 5px 0;
  margin: 0 0 5px 0px;
}
.menu_coords {
  color: #8ad7ed;
}
.menu_mayor {
  color: #d07373;
  margin-left: 6px;
}
.menu_biome {
  margin-left: 6px;
}
.menu_CityName {
  display: block ruby;
}
.menu_CityName img{
  /*padding: 0 10px 0 10px;*/
  margin-top: -10px;
}
.menu_secondLine {
  padding: 0px 5px 0 20px;
}
.menu_mobility {
  padding: 0 10px 0 10px;
  color: #4eae6b;
  position: relative;
  top: 4px;
}
/* MAIN MENU*/
#menu_main{
  position: relative;
  bottom: 35px;
  background-color: #1111116e;
  width: 32%;
  margin-left: 34%;
  height: 33px;
  border-radius: 14px 14px 0 0;
  margin-left: auto;
  margin-right: auto;
}
.menu_lvl1 {
  /*color: white;*/
  float: left;
  width: 22%;
  padding: 5px;
  text-align: center;
  margin: 2px;
}
.main_submenu {
  display: none;
  background-color: #d4d4d4;
  overflow: scroll;
  position: relative;
  bottom: 520px;
  height: 438px;
  border-radius: 10px;
  padding: 21px 20px 0 20px;
  border: 2px solid white;
  scrollbar-color: #0c0c0c #beff30;
  scrollbar-width: 4px;
  width: 94%;
}
.main_submenuWide {
  display: none;
  background-color: #d4d4d4;
  overflow: scroll;
  position: fixed;
  width: 90%;
  height: 90%;
  top: 1%;
  left: 4%;
  border-radius: 10px;
  padding: 21px 20px 0 20px;
  border: 2px solid white;
  scrollbar-color: #0c0c0c #beff30;
  scrollbar-width: 4px;
}

#main_submenu p {
  font-size: 1.3em;
  margin: 11px 0 14px 0px;
}
#menu_main a {
  color: white;
  text-decoration: none;
}
#menu_main a:hover {
  color: orange;
}
#main_submenu button {
  padding: 6px;
  margin: 8px;
  font-size: 1em;
}

.centerText {
  text-align: center;
}
#loading_screen {
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #000000d1;
  top: 52px;
  left: 50%;
  margin: 0 auto;
  transform: translate(-50%, 0);
  color: white;
  font-size: 2.5em;
  border-radius: 75px;
  overflow: scroll;
}
#loading_tips {
  font-size: 0.8em;
}
.spin::before {
  animation: 4s linear infinite spinner;
    animation-play-state: running;
  animation-play-state: running;
  animation-play-state: inherit;
  border: solid 6px #212121;
    border-bottom-color: rgb(33, 33, 33);
  border-bottom-color: rgb(33, 33, 33);
  border-bottom-color: #66e410;
  border-radius: 46%;
  content: "";
  height: 65%;
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  z-index: -1;
}
.Academy_list {
  background: #a2a2a2;
  padding: 12px;
  margin: 2px;
}
.Academy_list p {
  margin:0;
}