@font-face {
  font-family: "regular";
  src: 
       url('OpenSansRegular.woff2') format('woff2'),
       url('OpenSansRegular.woff') format('woff'),
       url('OpenSansRegular.ttf') format('truetype');
}

@font-face {
  font-family: "semiBold";
  src: 
       url('OpenSansSemiBold.woff2') format('woff2'),
       url('OpenSansSemiBold.woff') format('woff'),
       url('OpenSansSemiBold.ttf') format('truetype');
}

@font-face {
    font-family: "bold";
    src: url('OpenSansBold.woff2') format('woff2'),
         url('OpenSansBold.woff') format('woff'),
         url('OpenSansBold.ttf') format('truetype');
}

@font-face {
  font-family: "extraBold";
  src: url('OpenSansExtraBold.woff2') format('woff2'),
       url('OpenSansExtraBold.woff') format('woff'),
       url('OpenSansExtraBold.ttf') format('truetype');
}

html,
body {
  background-color: #34C5EB;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#geo-game {
  position: fixed;
  top: 30px;
  left: 0;
}

/* lock orientation (landscape or portrait) */
#orientation {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color: black;
	display:none;
}
.button {
   position: fixed;
   left: 0;
   top: 0px;
  background-color: transparent;
  border: none;
  color: white;
  padding: 0px 27px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 40px;
  cursor: pointer;
  z-index:100;
}

.button2 {background-color: transparent;}
@media (max-width:1000px){
.button {
display: none;
}
}