/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('sky.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: Times;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
*{margin: 0; padding: 0}
h1 {
  padding-left: 475px;
  padding-top: 240px;
  color: #7B001C;
  font-size: 24pt;
  font-family: Pixelify Sans, sans-serif;
  position: absolute;
}
h2 {
  padding-left: 1200px;
  padding-top: 220px;
  position: absolute;
}
a {
  text-decoration: none;
}
.detail {
  color: #7B001C;
  font-size: 15pt;
  margin-top: 660px;
  margin-left: 610px;
  font-family: Pixelify Sans, sans-serif;
  position: absolute;
}
.introduction {
  color: #7B001C;
  font-size: 16pt;
  padding-top: 350px;
  padding-left: 300px;
  font-family: Pixelify Sans, sans-serif;
  position: absolute;
}
#window1 {
  width: 500px;
  margin-left: 200px;
  margin-top: 130px;
}
#window1 {
    vertical-align: middle;
  max-width: 100%;
  height: auto;
}
#window2 {
  width: 400px;
  margin-left: 800px;
  margin-top: 250px;
}
#window3 {
  width: 250px;
  margin-left: 600px;
  margin-top: 600px;
}
#tab {
  margin-top: 920px;
  bottom: 0px;
  width: 100%;
}
#contacts {
  width: 90px;
  margin-top: 150px;
  margin-left: 25px;
}
#explorer {
  width: 90px;
  margin-top: 25px;
  margin-left: 25px;
}
#trash {
  width: 90px;
  margin-top: 25px;
  margin-left: 140px;
}
#roblox {
  width: 120px;
  margin-right: 30px;
  margin-top: 25px;
}
#telegram {
    width: 110px;
    margin-right: 40px;
    margin-top: 145px;
}
#strawpage {
  width: 115px;
  margin-top: 260px;
  margin-right: 40px;
}
#sims {
  width: 110px;
  margin-right: 40px;
  margin-top: 375px;
}
#pixiv {
  width: 105px;
  margin-right: 45px;
  margin-top: 490px;
}
#ng {
  width: 105px;
  margin-right: 45px;
  margin-top: 600px;
}
#tumblr {
  width: 105px;
  margin-right: 45px;
  margin-top: 715px;
}
#twitter {
  width: 105px;
  margin-right: 150px;
  margin-top: 30px;
}
#bsky {
  width: 105px;
  margin-right: 265px;
  margin-top: 30px;
}
#mast {
  width: 105px;
  margin-top: 145px;
  margin-right: 150px;
}
@media(max-width: 600px){
   html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #window1 {
    width: 225px;
    margin-left: 20px;
    margin-top: 70px;
  }
  #window2 {
    width: 170px;
    margin-left: 5px;
    margin-top: 320px;
  }
  #window3 {
    width: 125px;
    margin-top: 65px;
    margin-left: 225px;
  }
  #tab {
    margin-top:635px;
    width:200%;
  }
  h1 {
    padding-left: 140px;
    padding-top: 125px;
    font-size: 12pt;
  }
  h2 {
    padding-left: 70px;
    padding-top: 550px;
    font-size: 10pt;
  }
  .introduction {
    font-size: 7.25pt;
    padding-top: 167px;
    padding-left: 63px;
  }
  .detail {
  font-size: 7pt;
  margin-top:95px;
  margin-left: 235px;
  }
  #contacts, #explorer, #trash {
    width: 40px;
  }
  #contacts {
    margin-top: 55px;
  }
  #trash {
    margin-left: 80px;
  }
  #roblox {
    width: 55px;
    margin-top: 340px;
    margin-right: 20px;
  }
  #telegram {
    width: 55px;
    margin-right: 80px;
    margin-top: 338px;
  }
  #strawpage {
    width: 55px;
    margin-top: 340px;
    margin-right:140px;
  }
  #sims {
    width: 50px;
    margin-right: 140px;
    margin-top: 400px;
  }
  #pixiv {
    width: 50px;
    margin-right: 80px;
    margin-top: 400px;
  }
  #ng {
    width: 50px;
    margin-right: 20px;
    margin-top: 400px;
  }
  #tumblr {
    width: 50px;
    margin-right: 20px;
    margin-top: 460px;
  }
  #twitter {
    width: 50px;
    margin-top: 460px;
    margin-right: 80px;
  }
  #bsky {
    width: 50px;
    margin-top: 460px;
    margin-right: 140px;
  }
  #mast {
    width: 50px;
    margin-top: 460px;
    margin-right: 200px;
    
  }
}

@media(max-height: 920px) and (orientation: landscape){
   html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #window1 {
    width: 350px;
    margin-left: 90px;
    margin-top: 50px;
  }
  #window2 {
  width: 290px;
  margin-left: 490px;
  margin-top: 70px;
  }
  #window3 {
  width: 150px;
  margin-top: 380px;
  margin-left: 400px;
  }
  #tab {
    width: 100%;
  }
  h1 {
    padding-left: 285px;
    padding-top: 130px;
    font-size: 16pt;
  }
  h2 {
    padding-left: 70px;
    padding-top: 550px;
    font-size: 10pt;
  }
  .introduction {
    font-size: 11pt;
    padding-top: 200px;
    padding-left: 160px;
  }
  .detail {
    margin-top: 415px;
    margin-left: 406px;
    font-size: 9pt;
  }
  #trash, #explorer {
    width: 55px;
  }
  #explorer {
    margin-left: 10px;
  }
  #trash {
    margin-left: 10px;
    margin-top: 100px;
  }
  #roblox {
   width: 85px;
   margin-left: 50px;
   margin-top: 30px;
  }
  #telegram {
    width:80px;
    margin-top: 110px;
    margin-right: 35px;
  }
  #strawpage {
    width:75px;
    margin-top: 200px;
    margin-right: 35px;
  }
  #sims {
    margin-top: 280px;
    margin-right: 35px;
    width: 70px;
  }
  #pixiv {
    margin-right: 35px;
    width: 70px;
    margin-top: 360px;
  }
  #ng {
    margin-right: 120px;
    width: 80px;
    margin-top: 30px;
  }
  #tumblr {
    margin-right: 210px;
    width: 80px;
    margin-top: 30px;
  }
  #twitter {
    width: 70px;
    margin-top: 116px;
    margin-right: 125px;
  }
  #bsky {
    width: 75px;
    margin-top: 30px;
    margin-right: 295px;
  }
  #mast {
    width: 75px;
    margin-top: 112px;
    margin-right: 210px;
  }
}