@font-face {font-family:font1;src: url(https://files.catbox.moe/qgge0y.ttf);}
@font-face {font-family:font2;src: url(https://files.catbox.moe/ga8l8d.ttf);}

@font-face {font-family:font3;src: url(https://files.catbox.moe/glnezw.ttf);}

body {
  background: #ffe0eb99;
    background-image: url("https://neocities.org/site_thumbnails/79/07/milkteethdoll/background/8.jpeg.210x158.webp");

}
.header {font-family: font1, sans-serif;
    font-size: 50px;
    position: absolute;
    align-items: center;
    left: 480px;
    top: 70px;
    color: #ff9ac8ab;
    
}

.flex-container {
    position: fixed;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 100vh;           /* Makes the container fill the entire viewport height */
}

.nav { 
    position: fixed;
    right: 200px;
    top: 200px;
}

.nav1 {
  position: fixed;
  left: -15px;
  top: 160px;

}

.nav2 {
  position: fixed;
  left: -15px;
  top: 260px;

}

.nav3 {
  position: fixed;
  left: -15px;
  top: 360px;

}

.nav4 {
  position: fixed;
  left: px;
  top: 460px;

}

.row1{
    font-family: font2, sans-serif;
    color: pink;
    font-size: 20px;
    text-align: center;
    position: fixed;
    padding: 1px;
    left: 200px;   
    top:190px;
    
}
.row1link{
    font-family: font3, sans-serif;
    font-size: 15px;
    text-align: left;
    position: fixed;
    padding: 1px;
    left: 215px;
    top:240px;
    
}
.border1 {
  border-width: 45px;
  border-style: solid;
  border-image: url(https://files.catbox.moe/ymjw1u.png)40% round;
   width: 105px;
  height: 50px;
  padding: 20px;
  position: fixed;

}

.row1title{
  font-family: font2, sans-serif;
  font-size: 20px;
  color: pink;
  text-align: center;
  position: fixed;
  left: 265px;
  top: 210px;
  
  
}

.row2{
    font-family: font2, sans-serif;
    font-size: 20px;
    text-align: center;
    color: pink;    
    display: grid;
    grid-template-columns: 400px;
    grid-gap: 2px;
    position: fixed;
    padding: 1px;
    left: 200px;   
    top:390px;
}

.row2link{
    font-family: font3, sans-serif;
    display: grid;
    grid-template-columns: 200px;
    grid-gap: 2px;
    text-align: center;
    position: fixed;
    padding: px;
    left: 170px;   
    top:365px;
}

.border2 {
    border-width: 45px;
  border-style: solid;
  border-image: url(https://files.catbox.moe/ymjw1u.png)40% round;
   width: 105px;
  height: 50px;
  padding: 20px;
  position: fixed;
}

.row2title{
  font-family: font2, sans-serif;
  font-size: 20px;
  color: #ffc0cb;
  text-align: center;
  position: fixed;
  left: 235px;
  top: 410px;
}
.row3{
    font-family: font2, sans-serif;
    font-size: 20px;
    color: pink;    
    display: grid;
    grid-template-columns: 300px;
    grid-gap: 2px;
    text-align: center;
    position:   fixed;
    padding: 1px;
    left: 585px;   
    top:190px;
    
}

.row3link{
    font-family: font3, sans-serif;
    display: grid;
    grid-template-columns: 200px;
    grid-gap: 2px;
    text-align: center;
    align-items: center;
    position: fixed;
    padding: 1px;
    left: 670px;   
    top:245px;
    
}


.border3 {
       border-width: 45px;
  border-style: solid;
  border-image: url(https://files.catbox.moe/ymjw1u.png)40% round;
   width: 105px;
  height: 50px;
  padding: 20px;
  position: fixed;


}

.row3title{
  font-family: font2, sans-serif;
  font-size: 20px;
  color: pink;
  text-align: center;
  position: fixed;
  left: 630px;
  top: 210px;
}

.row4{
    font-family: font2, sans-serif;
    font-size: 20px;
    color: pink;    
    display: grid;
    grid-template-columns: 300px;
    grid-gap: 2px;
    text-align: center;
    position: fixed;
    padding: 1px;
    left: 585px;   
    top:390px;
}

.row4link{
    font-family: font2, sans-serif;
    font-size: 20px;
    color: pink;    
    display: grid;
    grid-template-columns: 300px;
    grid-gap: 2px;
    text-align: center;
    position: fixed;
    padding: 1px;
    left: 555px;   
    top: 345px;
}

.border4{
         border-width: 45px;
  border-style: solid;
  border-image: url(https://files.catbox.moe/ymjw1u.png)40% round;
   width: 105px;
  height: 50px;
  padding: 20px;
  position: fixed;

}
.row4title{
  font-family: font2, sans-serif;
  font-size: 20px;
  color: pink;
  text-align: center;
  position: fixed;
  left: 630px;
  top: 410px;
}
.zoom {
  padding: 50px;
  background-color: #00000000;
  transition: transform .1s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(3.0); 
}

.text {
  font-family: font3, sans-serif;
  white-space: nowrap; 
  color: #ad8091;
  font-size: 20px;
  position: fixed;
  overflow: hidden;
  top: 270px;
  left: 25px;
  
}

.text2 {
  font-family: font3, sans-serif;
  white-space: nowrap; 
  color: #ad8091;
  font-size: 20px;
  position: fixed;
  overflow: hidden;
  top: 370px;
  left: 25px;
  
}


.text3 {
  font-family: font3,sans-serif;
  white-space: nowrap; 
  color: #ad8091;
  font-size: 20px;
  position: fixed;
  overflow: hidden;
  top: 470px;
  left: 40px;
  
}

.text4 {
  font-family: font3,sans-serif;
  white-space: nowrap; 
  color: #ad8091;
  font-size: 20px;
  position: fixed;
  overflow: hidden;
  top: 570px;
  left: 40px;
  
}
#statuscafe {
    position: fixed;
    text-align: center;
    padding: .5px;
    color: #ad8091;
    background-color: #f0ffff00;
    border: 1px solid #ffe0eb00;
   word-break: normal;
}
#statuscafe-username {
    margin-bottom: .5em;
    text-align: center;
    
  
    
    
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    text-align: left;
    position: fixed;
    width: 200px;

    
    
}



/* FIXED MINI PLAYER */
.mini-player {
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff3f8;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 182, 193, 0.4);
  z-index: 9999;
    
}

@keyframes glow {
  0% { box-shadow: 0 0 6px rgba(255,182,193,0.4); }
  50% { box-shadow: 0 0 14px rgba(255,182,193,0.7); }
  100% { box-shadow: 0 0 6px rgba(255,182,193,0.4); }
}

/* BUTTONS */
button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #00000000;
  color: pink;
  font-size: 0.65rem;
  cursor: pointer;
}

button:hover {
  background: white;
}

/* VOLUME SLIDER */
input[type="range"] {
  width: 50px;
  height: 4px;
  appearance: none;
  background: #ffd6e6;
  border-radius: 10px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  background: #ff9ac8ab;
  border-radius: 50%;
  cursor: pointer;
}

.milkteethdoll{
  position: fixed;
  left: 1065px;
  top: -200px;
}

.welcome {
  position: fixed;
  left: 900px;
  top: 200px;
}