html, body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'superadorable';
  src: url('/font/superadorable.eot'); 
  src: url('/font/superadorable.eot?#iefix') format('embedded-opentype'),
       url('/font/superadorable.woff2') format('woff2'),
       url('/font/superadorable.woff') format('woff'),
       url('/font/superadorable.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'xiaolai';
       src: url('/fonts/xiaolai.woff2') format('woff2'),
       url('/fonts/xiaolai.woff') format('woff'),
       url('/fonts/xiaolai.ttf') format('truetype');
  font-weight: bolder;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'etherealwhisper';
  src: url('/etherealwhisper/etherealwhisper.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

.nav {
  text-align: center;
  margin: 13px 0;
  font-size: 18px;
}

.center-round-img {
  display: block;
  margin: 20px auto;
  border-radius: 20px;
  width: 200px;
  box-shadow: 0 0 13px pink;
  border: 2px dashed #ffb6c1;
}

.profile-img {
  display: block;
  margin: 20px auto;
  border-radius: 13px;
  width: 400px;
  box-shadow: none;
  border: 1px solid black;
}

.about-title {
  font-family: 'etherealwhisper';
  font-weight: bold;
  color: #f781b2;
  text-align: left;
}

.twiceid.png {
  width: 100%;
  height: auto;
  border-radius: 9px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'superadorable', Arial, sans-serif !important;
  font-weight: lighter;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center top;
  background-color: #fff0f8;
  color: #ffc7de;
  padding: 20px 20px 320px 20px; 
  background-image: url('Unknown-44.jpg');
  cursor: url('cursor/main.gif'), auto;
  position: relative; 
}

a {
  color: #f792b0;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #ffb6c1;
  text-decoration: none;
  transition: 0.3 ease;
  cursor: url('cursor/main.gif'), auto;
}

.header-img {
  border: 1px solid black;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 13px;
  box-shadow: 0 0 20px #ffb6c1;
}

.main-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: auto;
  padding-top: 20px;
  margin-top: -9px;
  gap: 20px;
}

.content-box {
  text-align: center;
  font-family: 'superadorable';
  font-weight: lighter;
  background-color: #fffdfd;
  border: 1px solid black;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 13px;
  box-shadow: none;
}

.content-box-contact {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  text-align: center;
  font-family: 'superadorable';
  font-weight: lighter;
  background-color: #fffdfd;
  border: 2px dashed #fabbd8;
  padding: 20px;
  max-width: 770px;
  z-index: 1;
  height: auto;
  margin: 0 auto;
  border-radius: 13px;
  box-shadow: 0 0 8px #fabbd8;
}

.resource-text {
  font-weight: lighter;
  font-family: 'superadorable';
  color: #ffd1e6;
}

.content-box-resource {
  font-weight: lighter;
  font-family: 'superadorable';
  color: #fa0775;
  align-items: center;
  text-align: center;
  background-color: #fffdfd;
  border: 1px solid black;
  padding: 20px;
  width: 700px;
  height: auto;
  margin: 0 auto;
  border-radius: 13px;
  box-shadow: none;
  left: 20px;
}

.contact-text {
  font-family: 'superadorable';
  font-weight: lighter;
  color: #fcc0db;
  text-shadow: 0 0 7px #f0e1e8;
}

.content-area-contact {
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.sidebar-right ul {
  font-family: 'superadorable';
  font-weight: bold;
  width: 100%;
  max-height: 80vh;
  margin: 0;
  background-color: transparent;
  padding: 0px;
  box-shadow: none;
  list-style-type: none;
  color: #ff69b4;
  text-align: center;
}

.sidebar-right ul li a { 
  font-family: 'superadorable';
  display: block;
  width: 180px;
  font-size: 18px;
  background: transparent;
  border: 1.3px dashed #ffb6c1;
  border-radius: 13px;
  padding: 9px 13px;
  margin-bottom: 8px;
  margin: 9px auto;
  color: #ffb6c1;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 5px #ffb6c1;
  transition: background-color 0.3s ease;
  cursor: url('cursor/main.gif'), auto;
}


.page-frame {
  max-width:800px;
  margin: auto;
  padding: 20px;
  position: relative;
}

.sidebar-left {
  font-family: 'superadorable';
  flex: 0 0 200px;
  align-self: flex-start;
  width: 200px;
  max-height: 85vh;
  overflow-y: auto;
  background-color: #fff;
  left: 20px;
  display: block;
  border: 1px solid black;
  text-align: center;
  padding: 9px;
  margin-bottom: 8px;
  font-weight: lighter;
  border-radius: 8px;
  color: #ff69b4;
  text-decoration: none;
  box-shadow: none;
}

.sidebar-right {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 85vh;
  background: #fff;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 10;
  right: 20px;
  background-color: #fff;
  text-align: center;
  padding: 9px;
  margin-bottom: 8px;
  font-weight: lighter;
  border-radius: 8px;
  color: #ff69b4;
  text-decoration: none;
  box-shadow: none;
}




.sidebar-left ul li a { 
  font-family: 'superadorable';
  display: block;
  width: 180px;
  font-size: 18px;
  background: transparent;
  border: 1.3px dashed #ffb6c1;
  border-radius: 13px;
  padding: 9px 13px;
  margin-bottom: 8px;
  margin: 9px auto;
  color: #ffb6c1;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 5px #ffb6c1;
  transition: background-color 0.3s ease;
  cursor: url('cursor/main.gif'), auto;
}

.sidebar-left a:hover {
  background: #ffb6c1;
  cursor: url('cursor/main.gif'), auto;
}

.sidebar-right a:hover {
  background: #ffb6c1;
  cursor: url('cursor/main.gif'), auto;
}

.content-area {
  flex: 1;
}

.sidebar-right ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.sidebar-right ul li {
  margin: 10px 0;
  margin-bottom: 13px;
}

.sidebar-left ul {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  align-self: flex-start;
}

.content-box-404 {
  width: 600px;
  background-color: #fffdfd;
  background-image: url('background.jpg');
  padding: 30px;
  margin: 60px auto;
  border: 1px solid black;
  border-radius: 13px;
  text-align: center;
  align-self: flex-start;
  display: block;
  box-shadow: 0 0 9px pink;
  color: #ff1275;
}

.error-img {
  display: block;
  margin: 20px auto;
  border: 2.5px dashed pink;
  border-radius: 13px;
  box-shadow: 0 0 9px pink;
  width: 190px;
  height: auto;
}

.sidebar-left-block {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex: 0 0 200px;
  gap: 4px;
}

.myungjae-img {
  width: 200px;
  margin-top: 11px;
  height: auto;
  display: block;
  border: 1px solid black;
  box-shadow: none;
  border-radius: 13px;
}

.anime-img {
  width: 200px;
  margin-top: 0px;
  height: auto;
  display: block;
  border: 1px solid black;
  box-shadow: none;
  border-radius: 13px;
}

.sidebar-right-block {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 13px;
  flex: 0 0 200px;
}

.bottom-image {
  border: 1px solid black;
  width: 760px;      
  height: 250px; 
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  border-radius: 13px;
  box-shadow: none;
}

.wish-img {
  width: 100%; 
  height: 100%; 
  border-radius: 13px;
  object-fit: cover; 
  display: block;
}

.nekofuri{
 border: 1px solid black;
 margin-top: 22px;
 width: 100%;
 height: 100%;
 border-radius: 13px;
 object-fit: cover;
 display: block;
}

.sakuryo {
  border: 1px solid black;
  border-radius: 13px;
  height: auto;
  margin-top: 8px;
  width: 100%;
  display: block;
}

.riku {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1); 
  width: 400px;
  height: 400px;
  transition: transform 0.4s ease;
  transform-origin: center center; 
}

.riku:hover {
  transform: translate(-50%, -50%) scale(1.2); 
}


.jaeheeriku {
  position: absolute;
  left: 2px;
  top: 47%;
  transform: translateY(-50%);
  max-width: 410px;
  height: auto;
  z-index: 2;
}

.yusion {
  position: absolute;
  right: -47px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 430px;
  height: auto;
}

.aboutme-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 30px;
  flex-wrap: wrap;
}

.aboutme-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
}

.profile {
  position: static;
  display: block;
  width: 100%;
}

.blinkie-box {
  max-width: 100%;
  border: 1px solid black;
  border-radius: 13px;
  background-color: #fff;
  margin-top: 20px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.blinkie-box p {
  width: 100%;
  text-align: center;
  color: #f792b0;
  font-weight: bold;
  font-family: 'superadorable';
  margin-bottom: 8px;
}


.content-box-aboutme {
  font-family: 'superadorable';
  font-weight: lighter;
  background-color: #fffdfd;
  border: 1px solid black;
  padding: 20px;
  max-width: 600px;
  margin-top: 18px;
  width: 100%;
  border-radius: 13px;
  box-shadow: none;
  text-align: center;
  color: #f781b2;
}

.gohome {
  text-align: center;
  margin-top: 20px;
}

.safari {
  max-width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 8px;
}


.button { 
  border: 1px solid black;
  border-radius: 2px;
  box-shadow: 0 0 8px #ffb6c1;
} 

.button-exchange-box {
  border: 1px solid black; 
  background-color: #fffdfd;
  padding: 15px;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
  border-radius: 13px;
}

.button-exchange-box textarea {
  width: 90%;
  resize: none; 
  margin-top: 8px;
  font-family: monospace; 
}

.gif { 
  height: 50px;
  width: 88px;
  border: 1px solid black;
  border-radius: 2px;
  box-shadow: 0 0 8px #ffb6c1;
} 

.anxin { 
  width:200px;
  border: 1px solid black;
  border-radius: 13px;
  margin-top: 9px;
} 

   /* pink theme */
        
        #musicplayer{ 
          font-family: 'basiic';
          font-weight:bold;
          height:30px;
          width:100%;
          left:0;
          top:0;
          position:absolute;
          cursor: url('cursor/main.gif');
          margin-bottom:20px;  
          display:flex;
          background: linear-gradient(180deg,#ffa0c7 0%, white 45%, #E263a2 47%, #ffa0c7 100%);
         border:ridge 2px #fd69a5;/* border around player */
          outline: solid 2px black;  
         box-shadow: inset 13px 0px 6px -10px #f170a5, inset -13px 0px 6px -10px #f170a5, inset 0 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #f170a5;
            }
         
            .songtitle{ 
            display:block;
            padding:2px; /* padding around song title */
            font-family: 'pixel';
            margin-top:4px;
            margin-right: 5px; 
            font-size:15px;
            color:black;
            letter-spacing: 1px; 
        
            background: white;/* background of song title */
            border: gray inset 1px;
               border-radius:6px;
               box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 20%), inset -13px 0 6px -10px rgb(66 66 66 / 56%), inset 0 13px 6px -10px #ffffff, inset 0 -13px 6px -10px rgb(66 66 66 / 38%);
            }
         
            .controls{
              font-size:12px; /* size of controls */
              text-align:center;
              width:100px;
              height:20px;
              text-decortation:none;
              filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
            }
         
            .controls td{
               padding-top:5px; /* padding around controls */
            }
         
            .seeking{
              width:75%;
              background: transparent;/* background color of seeking bar */
              display:flex;
              justify-content: space-evenly;
              padding:7px; /* padding around seeking bar */
               
            }
         
            .current-time{  
              padding-right:5px;
              margin-right: 3px; 
             filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
               
            }
         
            .total-duration{
              padding-left:5px;
              filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
            }
         
           .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
         cursor: url('cursor/main.gif');
    }
            
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
              background: transparent;
            }
            
            input[type=range]:focus {
                outline: none;
            }
            
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                 cursor: url('cursor/main.gif');
                height: 6px; /* thickness of seeking track */
                cursor: url('cursor/main.gif');
                border-radius: 6px;
                background: black; /* color of seeking track */
                border: 1px white solid;
            }
        
            input[type=range]::-webkit-slider-thumb {
              
                height: 42px; /* height of seeking square */
                 cursor: url('cursor/main.gif');
                width: 25px; /* width of seeking square */
                background-image:  url('https://files.catbox.moe/89vkdj.png'); /* image of  seeking square */
                background-size: 25px;
                -webkit-appearance: none;
                margin-top: -10px;
                
            }
            
        input[type=range].volume_slider::-webkit-slider-runnable-track { 
           cursor: url('cursor/main.gif');
            background: white; /* color of volume seeking track */
             filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
            }
            
         input[type=range].volume_slider::-webkit-slider-thumb {
            background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
            background-size: 20px;
            height: 20px; /* height of volume seeking square */
            width: 20px; 
            margin-top: -8px;
           }
         
         
        .slider_container {  
          width: 15%;       /* width of volume seeker */
          display: flex;
          justify-content: center;
          align-items: center;
        }    
        
.image { 
  width: 200px;
  height: 300px;
  object-fit: cover;
  margin: 40px 40px 40px 40px;
  border: 1px solid black;
  box-shadow: 0 0 5px white;
  border-radius: 13px;
} 

.center-content-box { 
  font-family: 'etherealwhisper';
  color: #f73e8b;
  text-shadow: 7px 7px 7px #fad9e7;
  max-width: 800px;
  height: auto;
background-color: #fff;
border: 1px solid black;
border-radius: 13px;
justify-content: center;
align-items: center;
text-align: center;
display: block;
margin: 20px auto;
padding: 20px;
} 

.shrine {
  border: 1px solid black;
  border-radius: 13px;
  box-shadow: 0 0 5px pink;
  height: 180px;
  width: 180px;
  object-fit: cover;
  align-items: center;
  will-change: transform;
  transition: transform 0.3s ease;
  transform: scale(1); 
}

.content-box-shrine {
  border: 1px solid black;
  margin: 0 auto;
  background-image: url('pics/Unknown-45.jpg');
  background-color: #fff;
  border-radius: 13px;
  height: 180px;
  width: 200px;
  text-align: center;
  align-items: center;
  display: block;
}

.content-shrines {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  gap: 40px;
}

.shrine:hover {
  transform: scale(1.2); 
    transition: transform 0.4s ease;
}