@charset"UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin:0;
  padding:0;
  height:100%;
}

canvas{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
div{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#sky{
  z-index:-3;
}
#star{
  z-index:-2;
}
#southerncross{
  z-index:-1;
  width:100%;
  height:20dvh;
  margin-top:0;
  background-image:url(Southern_Cross.png);
  background-repeat: no-repeat;
  background-position:center top;
  background-size:contain;
}
#backlight{
  z-index:0;
  margin-top:50dvh;
  height:50dvh;
  background-repeat:no-repeat;
  background-size:cover;
  background-image:url(cityL3.png);
}
#window{
  z-index:1;
  margin-top:50dvh;
  height:50dvh;
  background-repeat:no-repeat;
  background-size:cover;
  background-image:url(cityL2.png);
}
#object{
  z-index:2;
  margin-top:50dvh;
  height:50dvh;
  background-repeat:no-repeat;
  background-size:cover;
}
#clouds{
  z-index:3;
}
#frame{
  z-index:4;
}
#tables{
  z-index:5;
  margin-top:80dvh;
  height:20dvh;
  background-image:url(table.jpg);
  background-size:auto 100%;
}
.mountain{
  background-image:url(mountains.png);
}
.sea{
  background-image:url(sea.png);
}
.city{
  background-image: url(cityL1.png);
}
#btns{
  z-index:7;
  display:none;
}
.hide{
  display:none;
}


.menu:hover,.return:hover,.active:hover{
    filter: brightness(1.10);
}
@media (orientation: portrait) {
  #frame{
    background:linear-gradient(to bottom,gray,lightgray 40%,dimgray) no-repeat 70dvw 0dvh / 10dvw 100dvh;
  }
  #tables{
  background-repeat:no-repeat;
  }
  #menu{
    display:none;
  }
  #bell{
    display:flex;
    z-index:6;
    position:fixed;
    left:15dvh;
    bottom:12.55dvh;
    height:3dvh;
    width:auto;
  }
  #btns{
    flex-direction: column;
    justify-content:space-around;
    align-items:center;
    height:80dvh;
    margin-top:10dvh;
  }
}
@media (orientation: landscape) {
  #frame{
    background:linear-gradient(to bottom,gray,lightgray 40%,dimgray) no-repeat 20dvw 0dvh / 3dvw 100dvh,
      linear-gradient(to bottom,gray,lightgray 40%,dimgray) no-repeat 70dvw 0dvh / 3dvw 100dvh;
  }
  #tables{
    background-repeat:repeat-x;
  }
  #menu{
    display:flex;
    z-index:6;
    position:fixed;
    right:5dvw;
    bottom:0;
    width:8dvw;
    height:auto;
  }
  #bell{
    display:none;
  }
  #btns{
        flex-direction: row;
        flex-wrap: wrap;
        align-items:center;
        justify-content:space-evenly;
        width:100%;
        margin-bottom:20dvh;
  }
}