@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

body{
   margin: 0;
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
   background-size: cover;
   background-image: url("background.png");
   background-color: #828080;
   background-position: center top;
   background-repeat: no-repeat;
   position: relative;
   width: 100%;
   -webkit-tap-highlight-color: transparent;
   font-family: 'Oswald', sans-serif;
}

body.Dark{
   color:white;
}
body.Light{
   color:black;  
}
#main-container{
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

#main-container.fill-window{
   width: 100%;
   height: 100%;
   margin: 0;
}
#app-container, #unity-canvas{
   width: 100%;
   height: 100%;
   margin: 0;
   position: relative;
}

.loader{
   width: 100%;
   height: 100%;
   margin: 0;
   position: absolute;
   display: block;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   text-align: center;
}
.container{
   width: 80%;
   max-width: 800px;
   margin:0 auto;
   text-align: center;
   padding-top: 20px;
}

.logo{
   width: auto;
   height: 557px;
   background-image:
   url(logo.png);
   background-repeat:
   no-repeat;
   background-position:
   center;
}
.loading {
   position:
   relative;
   top: -90px;
}
.loading h3 {
   font-size:4em;
   margin:0;
   color:#fff;
   letter-spacing: -1px;
}

.progressbar{
   left: 0;
   background-image: url(load-bg.png);
   height: 44px;
   width: 798px;
}
.Dark .progressbar{
   border: 1px solid white;
}
.fill{
   background-image: url(load.png);
   background-position: 8px 5px;
   height: 41px;
   background-repeat: no-repeat;
   display: block;
   transition-property: width;
   transition-duration: 1s;
}
.Dark .fill{
   background: white;
}
.center {
   overflow: hidden;
   margin: 10vh 0 0 0;
}
.footer-cont{
   position:
   fixed;
   bottom:0;
   left:0;
   right:0;
   text-align: center;
   color: #fff;
   font-weight: 400;
   width:100%;
}
h1{
   padding-bottom: 10px;
   border-bottom: 1px solid #333;
}

.Dark h1{
   border-bottom: 1px solid white;
}

.logo-cont, .title-cont{
   float:left;
   display: block;
}
.logo-cont{
   width: 25%;
}
.title-cont{
   width: 70%;
   margin-left: 2%;
}
.button{
   width:50px;
   height: 50px;
   text-align: center;
   cursor: pointer;
}
.floattopRight {
   display: block;
   position: fixed;
   top: 0;
   right: 0;
}
.floatbottomLeft {
   display: block;
   position: fixed;
   left: 0;
   bottom: 0;
   top: 0;
}
span.imgbutton{
   width: 100%;
   height: 100%;
   display: block;
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
}
.fullscreenON .imgbutton{
   background-image: url("fullscreenON.png");
}
.fullscreenOFF .imgbutton{
   background-image: url("fullscreenOFF.png");
}
.rotate {
	width:100%;
	height:100%;
	background:#000;
	position:fixed;
	background:#000 url("rotate.gif") center center no-repeat;
	
}

@media (max-width: 1023px) {
	body {
		height:100vh;
	}
	.logo{
		width:100%;
		max-height: 360px;
		background-size: contain;
		float: left;
	}
	.loading {
		position:
		inherit;
		top: auto;
		padding: 0 100px;
	}
	.loading .progressbar {
		width: 100%;
		background-repeat:
		no-repeat;
		background-color: #042122;
		box-shadow: inset 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
		height: 30px;
		background-image: none;
		left: inherit;
		padding: 5px 6px;
		border: none!important;
	}
	.fill {
	  background-image: -moz-linear-gradient( 90deg, rgba(51,105,16,0.99608) 0%, rgb(90,153,48) 100%);
	  background-image: -webkit-linear-gradient( 90deg, rgba(51,105,16,0.99608) 0%, rgb(90,153,48) 100%);
	  background-image: -ms-linear-gradient( 90deg, rgba(51,105,16,0.99608) 0%, rgb(90,153,48) 100%);
	  background-position: center;
	  height: 30px;
	  position: relative;
	  border: none!important;
	}
	.loading h3 {
		font-size:2em;
	}
	.footer-cont p {
		font-size:1em;
		text-align: center;
	}
	.container {
		padding: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-wrap: nowrap;
	}
}

@media (min-width: 350px) and (max-width: 414px) {
	.loading {
		position: inherit;
		float: left;
		display: inline-flex;
		top: auto;
		padding: 0 40px;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		margin-top: -80px;
	}
	.center {
	   margin: 0;
	}
	.logo {
	  max-height: 300px;
	}
}

@media (min-width: 415px) and (max-width: 915px) {
	.loading {
		position: inherit;
		float: left;
		display: inline-flex;
		top: auto;
		padding: 0 100px;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		margin-top: -80px;
	}
	.center {
	   margin: 0;
	}
	.logo {
	  max-height: 300px;
	}
}