/* 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." */
/* Fonts */
/* Doto */ @import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
/* Gaegu */ @import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');
/* Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Patrick Hand */ @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
/* Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* CuteNotes */
@font-face {
   font-family: 'CuteNotes';
   src: url("fonts/CuteNotes.ttf");
}
/* LionCub */
@font-face {
   font-family: 'LionCub';
   src: url('fonts/LionCub.ttf')
}

#wichu-select {
  float: right;
  padding: 0.5em;
}
#wichu {
  width: 6em;
  height: auto;
}
#wichu-select button {
  display: none;
}
#wichu-select #wichu:active ~ button {
  display: block;
  background: #F0F0F0;
  border: none;
  border-radius: 8px;
  padding: 0.5em;
}

/* Actual Page */
body {
   background-color: #FFFFFF;
}
#bottom-lace {
   border-bottom: 1.7em solid;
   border-color: #FFFFFF;
   border-image: url('images/BLaceG.png');
   border-image-slice: 300.0;
   border-image-repeat: repeat;
   position: fixed;
   margin: 0;
   right: 0;
   bottom: 0;
   width: 100%;
}
#winamp-container {
   position: absolute;
   right: 0;
   bottom: 31%;
}
#main {
   max-width: 93%;
   height: auto;
   padding: 0;
   margin-top: 4.5%;
   margin-right: auto;
   margin-left: auto; 
   flex-wrap: wrap;
}
#wichuselect {
   height: 5em;
   margin: 0, 50em;
}
#header {
   background: url('images/YushiHKHeader.png') no-repeat;
   background-size: cover; /* scales the image */
   background-position: bottom; /* centers the image */
   border: #C1C1C0 solid 1px;
   border-bottom: #C1C1C000 ;
   position: relative;
}
.headertxt {
   font-family: 'Doto', "Times New Roman", serif;
   font-weight: 500;
   font-size: 1.34rem;
   letter-spacing: 0.1em;
   color: #FEFFFF;
   text-shadow: 1px 1px 4px #9B9D9C;
   position: absolute;
   bottom: 0.2rem;
   right: 3.3rem;
}
h1 {
   font-family: 'Gaegu', "Comic Sans MS", Monospace;
   font-size: 0.85rem;
   font-weight: bold;
   line-height: 0.3rem;
   color: #313131;
}
p {
   font-family: 'Gaegu', Sans-Serif;
   font-size: 0.75rem;
}
#body1 {
   border: #C1C1C0 solid 1px;
   padding: 0 0.5ch;
   line-height: 0.2rem;
}

/* Media Queries */
/*
@media (min-width: 390px) {
   .headertxt {
     font-size: 1.5rem;
     right: 3.5rem;
    }
}
@media (min-width: 450px) {
   .headertxt {
     font-size: 1.68rem;
     right: 4rem;
   }
   h1 {
     font-size: 0.93rem;
   }
   p {
     font-size: 0.8rem;
   }
}
@media (min-width: 530px) {
   #bottom-lace {
     border-bottom: 1.9rem solid;
   }
   #header {
     height: 20.7vw;
   }
   .headertxt {
     font-size: 1.9rem;
     bottom: 0.5rem;
     right: 6rem;
   }
   h1 {
     font-size: 0.97rem;
   }
   p {
     font-size: 0.87rem;
   }
}
@media (min-width: 600px) {
   .headertxt {
     font-size: 1.95rem;
     right: 6.7rem;
   }
   h1 {
     font-size: 1rem;
   }
   p {
     font-size: 0.9rem;
   }
}
*/