body{
  margin:0;
  color:#c7b0b5;
  font-family:"Cormorant Garamond", serif;
  overflow-x:hidden;
  background:url('https://i.etsystatic.com/28921914/r/il/ef24ad/3941476158/il_570xN.3941476158_29ap.jpg') repeat;
  display: flex;
  padding: 0px;
  justify-content: center;
}
/* on top floating

#float-layer{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;

  pointer-events:none;
  z-index:20;
}

.float{
  position:absolute;
  width:140px;
  opacity:0.85;
  animation:float 6s ease-in-out infinite;
}

@keyframes float{0%,100%{transform:translateY(-5px);}50%{transform:translateY(8px);}}

.f1{top:10%; left:5%;}
.f2{top:25%; right:6%;}
.f3{bottom:15%; left:8%;}
.f4{bottom:20%; right:10%;}
.f5{top:45%; right:3%;}
 */
 
 
/* main center stage ting*/
.container {
  top: 5vh;
  width: 70%;
  border: 12px;
  opacity: 0.9;
}

section {
  border:double black 16px ;
  position: relative;
  margin: 0 auto;
  width:570px;
  min-height: 90vh;
}
  
main {
  height:100%;
  padding:0px;
  border: solid 8px black; 
  background:black;
  border-image-outset: -35px; 
}
    
.content {
  overflow:auto;
  height:100%; 
  outline-offset:-10px;
  box-shadow: inset 2px 2px 7px 0px rgb(66 66 66 / 56%), inset -2px 0px 6px 1px rgb(66 66 66 / 56%), inset -6px -3px 6px 0px  rgb(66 66 66 / 56%), inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRflBaPAMbW8SPvTKwamBuVrkzQH2yQ-ggcCuQ2lPxnCDJj6K1l11pM-PU&s=10");
}
      
#header {
  outline-offset: -10px;
  margin-top: 10px;
  margin-bottom: 0;
  margin-left: 10px;
  border: outset black 2px;
  border-radius: 12px;
  padding-bottom: 10px;
  width: 510px;
  height: 210px;   
  border-radius:5px 200px 5px 5px;
  z-index: 1;
  
  position: relative;
  overflow: hidden;
  
  background-image: url("https://upload-os-bbs.hoyolab.com/upload/2025/03/27/163732817/a961cf26abf930d40fc47d24068c9a13_737969450657973086.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
  pointer-events: none;
}
      
h1 {
  margin-left: 20px;
  font-size: 3em;
  color: white;
  filter:drop-shadow(0.5px 0.5px 0 black)  drop-shadow(0 0.5px 0 black)  drop-shadow(0 1px 1px black);
}

#header marquee {
  position:relative;
  background:black;
  border:solid #633848 1px;
  width:480px;
  margin-top:10px;
  margin-left:10px;
  border-radius: 6px;
  z-index: 20;
  color: red;
}

/*buttons*/

#buttons {
  margin-left: 380px;
  right: 0;
  margin-top: -200px;
  margin-bottom: 25px;
  z-index: 100;
}

button {
  font-family: georgia;
  display: block;
  background: none;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

button:hover {opacity: 0.5;}

#buttons #first {margin-left: -100px; margin-bottom: 0px}
#buttons #second {margin-left:-40px; z-index: 100;}
#buttons #third {margin-left: 0px; z-index: 100;}
#buttons #fourth {margin-left:40px; margin-top: 0px; z-index: 100;}

/*tabs*/
.tabcontent {
  min-height: 600px;
  border:outset gray 2px;
  border-radius: 6px;
  margin:10px;
  width:470px;
  padding:20px;
  display:none;
  background: #252529;
  outline: solid gray 1px;
  outline-offset:-10px;
  border-radius: 5px 5px 5px 80px;
  overflow: auto;
}

p {color:white;}
img {
  max-width: 100%;
}
#opening {
  background: #16161c;
  border-color: #8F1800;
  text-shadow: 0 0 5px #FFA6A6;
  text-align: right;
}

h3 {  
  color:white;
  text-align:left;
  font-weight:bold;
  width:360px;
  font-family:cat;
  font-size:2em;
  color:black;
  z-index:300;
  margin-top:0px;
  margin-bottom:-10px;
  filter:drop-shadow(0.5px 0.5px 0 #d3e4d8 )  drop-shadow(0 0.5px 0 #d3e4d8 )  drop-shadow(0 1px 1px #d3e4d8 )  drop-shadow(0 1px 1px #d3e4d8 ) ; 
 }
 
 h4 {  
  color:white;
  text-align:left;
  font-weight:bold;
  width:360px;
  font-family:cat;
  font-size:1.4em;
  color:black;
  z-index:300;
  margin-top:0px;
  margin-bottom:-10px;
  filter:drop-shadow(0.5px 0.5px 0 #d3e4d8 )  drop-shadow(0 0.5px 0 #d3e4d8 )  drop-shadow(0 1px 1px #d3e4d8 )  drop-shadow(0 1px 1px #d3e4d8 ) ; 
}
   
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background-color: black;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: black;
    border: 1px solid #aaa;
}