html, body, div, iframe 
{
 display: block; 
/*width: 100%;*/
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;

font-family: 'Advent Pro', sans-serif;
/*font-size: 1rem;*/




}



iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 400;
}

.modal {
  z-index: 2000;
}

.iziModal {
    margin-top:  30px;
  margin-bottom:  30px;
}



.btn {
  min-width: 10wv;
  min-height: 10wv;
}

#controlsdiv {
position: absolute;
    z-index: 500;
}

/*joystick*/

#controls_container {
  pointer-events:none;
  display: flex;
    width: 100%;
 /* background-color: whitesmoke;*/
   z-index: 500;
   justify-content: center;
   border-color: dimgrey;
   border: 1px;
   
  position: fixed;
   /*ft: 50%;*/
  bottom: 1rem;
  padding-top: 10px;
  padding-bottom: 10px;

 display: none;

  /*pointer-events: none; */

  user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none;


}


/* mouse, touch pad */
/*
@media (hover: hover) and (pointer: fine) {
    
    #controls_container {
     visibility: none;

    }
}
*/

.modal_title {
    text-align: center;
  color: brown;
  font-weight: bold;
}

.modal_subtitle {
  text-align: center;
  margin: 1em;
}

.modal_p {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}

.controls_footer {

  pointer-events: all;

    max-width: 150px;
    max-height: 150px;
   /*width: 100%;*/ 
   background-color: #a29079;
    border-color: beige;
    border-width: 3px;
    border-style: double;
   color: white;
   text-align: center;
   border-radius: 25% ;

 display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". F ."
    "L . R"
    ". B .";
}

.arrow {
  font-size: 1.5em;
    font-weight: bold;
    padding: 0.2rem;

}

.F { grid-area: F; }

.B { grid-area: B; }

.L { grid-area: L; }

.R { grid-area: R; }

#btn_control {
 display: none;
}
#btn_vr{
 display: none;
}

#modalInstructions {
  max-width: 300px;
  min-height: 400px;
    opacity: 0.85;

      /*margin: 0;*/
  position: absolute;
  max-height: 500px;
  top: 10%;
  /*
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
*/
}

@media (pointer:coarse) {
  #btn_control {
 display: unset;
}
#btn_vr{
	 display: unset;
}
}


@media (min-width: 800px) {
  #joypad_icon {
 display: none;
}

#modalInstructions {
  max-width: 600px;
}

.iziModal {
  min-width: 600px;
    overflow: hidden; /* Hide scrollbars */

}
}


#joypad_icon {
  pointer-events: all;

  background-image: url("../media/gamepad_icon.png");
  background-size: cover;
            width: 2em;
            height: 2em;
            font-size: 2rem;
            margin: 1em;
}
/*end joystick*/


#modal_audio {
  /*display: block;*/
}

#modal_close_btn {
  float: right;

      top: 2px;
    right: 2px;
    position: absolute;
}

.centered_content {
  text-align: center;
}

#modal_text {
/*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
font-size: 15px;
letter-spacing: 0px;
word-spacing: 2px;
color: #000000;
/*font-weight: 400;*/
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;

}

.instruction {
  margin:  0.8em;
  text-align: center;
 /* font-family: "Trebuchet MS", Helvetica, sans-serif;*/
font-size: 18px;
}

.instruction_title {
  font-size: 25px;
    text-align: center;

  font-weight: bold;
  color: orange;
}

/*header*/

#header {
  position: absolute;
  top:  0;
  z-index: 600;
  width: 100%;
  color: beige;
  
  user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none;
}

.help_button {
  position: absolute;
  margin-top: 1em;
  margin-left: 1em;
}

.title {
  display: block;
  text-align: center;
  font-size: 2rem;
}

#menu {
  margin-top: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.menu_item {
  text-transform: uppercase;
}


/* spinner */

#spinner-container {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

#spinner {
  z-index: 1000;

  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  min-height: 301px;
}

svg {
  width: 100%;
  max-width: 12rem;
  animation: rotate 3.6s linear infinite;
}

circle {
  fill: none;
  stroke: slateblue;
  stroke-width: 8px;
  stroke-dasharray: 300;
  animation: outline 2s cubic-bezier(0.77,0,0.18,1) infinite;
}

@keyframes outline {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 300;
  }
  100% {
    stroke-dashoffset: 600;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(-1turn);
  }
}