@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap');

html{
   height: 100%;
}

:before, :after {
    box-sizing: border-box;
}

body{
   margin: 0;
   max-height: 100%;
   height: 100%;
   background-position: center top;
   background-repeat: no-repeat;
   position: relative;
   width: 100%;
   -webkit-tap-highlight-color: transparent;
   font-family: 'Open Sans', sans-serif;
}

body.Dark{
   color:white;
   background: black;
}
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%;
   display: flex;
   flex-direction: row;
   margin: 0;
}

@media (orientation : landscape) {
   #app-container, #unity-container{
   height: 100%;
   aspect-ratio: 3 / 4;
   display:flex !important; 
   place-items:center !important;
   margin: 0 auto !important;
   background:#000 !important; 
   flex: 0 1 auto;
   }
}

@media (orientation : portrait) {
   #app-container, #unity-container{
   width: 100%;
   height: 100%;
   display:flex !important; place-items:center !important;
   margin: 0 auto !important;
   background:#000 !important; 
   /* overflow:hidden !important; */
   }

   .background-image{
      display: none!important;
   }
}

.background-image-left{
   background: url('./PIC_Side_back_.jpg');
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.background-image-right{
   background: url('./PIC_Side_back_.jpg');
}

.background-image{
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   display: flex;
   height: 100%;
   flex-basis: 0;
   flex: 1;
}

.character{
   object-fit: contain;
   height: 75%;
   margin-top: auto;
}

.character.left{
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    height: 65%;
    
}

.character.right{
   /* height: 82.5%; */
}

#unity-canvas{
   width: 100%;
   height: 100%;
}

.loader{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   margin-left: -100%;
}

.container{
   width: 80%;
   height: 100%;
   max-height: 100%;
   max-width: 800px;
   margin:0 auto;
   text-align: center;
   padding-top: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   
}

.logo{
   width: auto;
   max-width: 80%;
   margin: 30px auto;
   max-height: 150px;
}

.progressbar{
   padding: 1px;
   left: 0;
   border: 1px solid #333;
   border-radius: 10px;
}

.Dark .progressbar{
   border: 1px solid white;
}

.fill{
   height:6px;
   background: #333;
   display: block;
   border-radius: 10px;
   transition-property: width;
   transition-duration: 1s;
}

.Dark .fill{
   background: white;
}

.footer-cont{
   margin-top: auto;
   text-align: center;
   color:white;
}

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;
}

span.imgbutton{
   width: 100%;
   height: 100%;
   display: block;
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
}

#toggle_fullscreen{
   display: none;
}

.rotation-block{
   position: fixed;
   background-color: black;
   width: 100%;
   height: 100%;
   z-index: 1000000;
}

.rotation-block-content{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.rotation-block-image{
   max-width: 30%;
   max-height: 50%;
   aspect-ratio: 1 / 1;
   margin-right: auto;
   margin-left: auto;
   filter: invert(100%); 
}

.rotation-block-text{
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
   margin-top: 20px;
   box-sizing: border-box;
   color: white;
   display: none;
}

.fade-in{
   animation: 0.75s fade-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@media (orientation : landscape) {

}

@media (orientation : portrait) {
   .rotation-block{
      display: none;
   }
}