:root{
  --blue:#8ed0ff;
  --soft:#f4fbff;
  --accent:#5bbcff;
  --border:#bfe6ff;
}

body{
  margin:0;
  background-image:url(https://file.garden/Z8O3MxNmJWJJhUmO/neocities/shrine/zayne/bgtest.png);
  background-size:cover;
  background-repeat: no-repeat;
  font-family:'Zen Maru Gothic', sans-serif;
  transform:scale(.85);
  transform-origin: top center;
}

.page{
  width:700px;
  margin:100px auto 10px auto;
  background:white;
  border:3px solid var(--border);
  position:relative;
  box-shadow:0 0 30px rgba(120,200,255,.25);
  overflow:visible;
}

header{
  background:linear-gradient(90deg,#bfe6ff,#ffffff);
  padding:15px;
  border-bottom:2px dashed var(--border);
  position:relative;
  z-index:1;
}

header h1{
  margin:0;
  font-size:34px;
  color:#1d4259;
  letter-spacing:3px;
}

.subtitle{
  font-size:11px;
  color:#6aaed6;
}

.label{
  position:absolute;
  top:10px;
  right:10px;
  background:#6ec6ff;
  color:white;
  padding:6px 12px;
  font-size:12px;
  border-radius:4px;
  transform:skew(-10deg);
}

.hero{
  position:relative;
  height:340px;
}

.main-img{
  width:600px;
  position:absolute;
  top:-130px;
  left:85%;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.9))
          drop-shadow(0 0 20px rgba(140,210,255,0.5));
}

.profile{
  position:absolute;
  top:20px;
  left:30px;
  width:230px;
  background:var(--soft);
  border:2px solid var(--border);
  padding:8px;
  font-size:11px;
  z-index:10;
}

.profile h2{
  margin:0;
  color:var(--accent);
}

.about-box{
  position:absolute;
  top:135px;
  left:30px;
  width:270px;
  height:100px;
  background:var(--soft);
  border:2px solid var(--border);
  padding:8px;
  font-size:10px;
  z-index:1;
}

.about-box h2{
  margin:0;
  color:var(--accent);
}

.about-content{
  height:80px;
  overflow-y:auto;
}

.about-content ul{
  margin:4px 0;
  padding-left:14px;
}

.about-content li{
  margin-bottom:4px;
}

.quote-box{
  position:absolute;
  bottom:10px;
  left:30px;
  font-size:11px;
  font-style:italic;
  color:#6aaed6;
  z-index:2;
}

.dot-bg{
  position:absolute;
  width:260px;
  height:260px;
  background:radial-gradient(var(--border) 1px, transparent 1px);
  background-size:10px 10px;
  opacity:.4;
  top:190px;
  left:20px;
}

.gallery{
  padding:15px;
  border-top:2px dotted var(--border);
  font-size:11px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.gallery-grid img{
  width:100%;
  border:2px solid var(--border);
}

.fanfics-box{
  position:relative;
  margin:10px 15px;
  width:auto;
  background:white;
  border:2px solid var(--border);
  padding:8px;
  font-size:11px;
}

.fanfics-box ul{
  padding-left:15px;
  margin:5px 0 0 0;
}

.fanfics-box a{
  text-decoration:none;
  color:#3aa6e8;
}

.music-widget{
  position:fixed;
  top:-70px;
  left:120px;
  z-index:9999;
}

.player{
  width:90px;
  height:90px;
  cursor:pointer;
  transition:transform .2s ease;
}

.player:hover{
  transform:scale(1.05);
}

.disc{
  width:200px;
  object-fit:cover;
  border-radius:12px;
  animation:spin 6s linear infinite;
  animation-play-state:paused;
}

.playing{
  animation-play-state:running;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.decor{
  position:fixed; 
  pointer-events:none; 
  z-index:9998; 
}

.decor img{
  width:100%;
  height:auto;
  display:block;
  opacity:0.9;
}

.snow{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.snow span{
  position:absolute;
  top:-10px;
  color:white;
  font-size:10px;
  animation:fall linear infinite;
  opacity:0.8;
}

@keyframes fall{
  to{
    transform:translateY(110vh);
  }
}

.playlist{
  margin-top:18px;
  margin-left:12px;
  width:150px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(120,200,255,0.4);
  border-radius:6px;
  padding:10px;
  font-size:10px;
  line-height:1.4;
  backdrop-filter:blur(8px);
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  transform:rotate(-2deg)translateY(75px); 
}

.track{
  margin-bottom:4px;
  color:#3a4a54;
  opacity:0.85;
}

.lyrics{
  margin-top:8px;
  font-size:9px;
  color:#ffffff;
  font-style:italic;
  opacity:0.8;
}