@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Hi+Melody&display=swap');
@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/o5umfqvcshf0ugj/SantJoanDespiRegular.woff);
}
 @font-face {
font-family:'kiwi';
src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}
@font-face {
font-family: "spirit";
src: url(https://file.garden/Zj-dM_oh-G9Y8EzN/Spirit.ttf);
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
  border-radius:12px;
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background: #eec7ff;
background: linear-gradient(180deg, rgba(238, 199, 255, 1) 0%, rgba(217, 244, 255, 1) 25%, rgba(253, 255, 219, 1) 51%, rgba(255, 206, 173, 1) 74%, rgba(255, 204, 244, 1) 100%);
}


.warning-overlay {
  position: fixed;
  inset: 0;
font-family: sant joan;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.warning-box {
  position: relative;
  width: 300px;
  max-width: 80%;
  padding: 20px;
  background: #ffc1df;
  color: #5c1740;
  border: 1px solid #ff69b4;
  border-radius: 20px;
  text-align: center;
  }

.warning-box h2 {
  color: #d63384;
  font-family: 'kiwi';
  font-size:30px;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;

  background: none;
  border: none;

  color: #d63384;
  font-size: 30px;
  cursor: pointer;
}

.continue-btn {
  padding: 10px 25px;
  background: #ff69b4;
  font-family: sant joan;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

.continue-btn:hover {
  background: #e83e9d;
}


* {
  box-sizing: border-box;
}
body {
  background:url("https://file.garden/Z4-KIXj5okOfzeyR/STASH/Backgrounds/fe334507-172e-4a0c-a936-8d4cf0e49ce2.jpeg");
background-size:50px;
  }


.border {
  display:flex;
  flex-direction: row;
  gap:10px;
  background: url("https://i.postimg.cc/sxGhzZJc/25390ceb48ac84189c0132851ceaf2d9.jpg");
  background-size: 100px;
  position: relative;
  z-index: 1;
  height: 700px;
  width: 650px;
  margin:10%;
  padding: 10px;
  border: 1px solid #ff29b4;
  border-radius: 10px;
 box-shadow: inset 0px 0px 15px 0px #ff94da;
}
.miku img{
  position:absolute;
  top:540px;
  left:0;
  z-index: 999;
  height: 300px;
  width:auto;
  background-size: contain;
background-repeat: no-repeat;
  filter: grayscale(28%) brightness(125%) drop-shadow(0px 0px 5px rgba(255,111,222,0.49));
}
.lace {
  z-index: 999;
         width: 110%;
            height: 37px;
            position: fixed;
            right: 0px;
            top: 0px;
            background: url(http://media.tumblr.com/tumblr_ma3nmyLDqJ1qbq39l.gif) repeat left top;
     
}
.main {
  background: white;
    display: flex;
  flex-direction: column;
  gap: 10px;
  height: 670px;
  width:400px;
  border: 1px solid #ff4db5;
  border-radius: 10px;
  padding: 10px;
  
}

.side {
  padding:20px;
  display: flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #6b5751;
  border-radius:10px;
  height:670px;
  width:250px;
  align-items: center;
}
.all {
     border-radius: 5px;
    border-style: solid;
    border-image: url('https://files.catbox.moe/ad7cgi.png') 4 fill round;
  overflow-y: auto;
  overflow-x: hidden;
  padding:10px;
  height:100%;
  box-shadow: 0 0 3px 4px rgba(212, 58, 138,0.21);
}
h4::before {
  content:"♡ ";
  font-family: 
}

 h4 {
   font-family: sant joan;

     position: relative;
color: #8E7F85;
background: linear-gradient(180deg, #FFF5F9, #FFD6E7 70%);
padding: 3px 5px 3px 3px;
border: 1px solid #BF95A9;
border-radius: 5px 5px 0px 0px;
  padding: 5px;
  width: 100%;
  height: 30px;
margin-top: 50px;
   margin-bottom: 0px;
  box-sizing: border-box;
  }

 h4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 30px;
  left: 0;
  top: -40px;
  background-image: url("https://i.postimg.cc/T3kjfZmh/989166awa8yrlr89.gif");
  background-size: contain;
  background-repeat: repeat-x;
  
}
.textarea {
    font-family: "spirit";
  font-size:10px;
  line-height: 15px;
  color:#8E7F85;
  background: #FFF5F9;
border: 1px solid #BF95A9;
border-radius: 0px 0px 5px 5px;
padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
max-height: 200px;
}

.icon img{
  
  padding:20px;
  width:200px;
  height:200px;
  z-index: 1;
}
.icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://file.garden/aatuttfiM0cO89H8/Borders/By%20me/Lace/26.png");
  background-size: 200px;
  background-repeat: no-repeat;
  z-index: 99;
  filter:drop-shadow(0px 1px 2px #000000);
}

.icon {
  position: relative;
}

.status{
       padding:10px;
  position:relative;
  margin-top: 20px;
  height:250px;
  width:200px;
  border-width:7px;
border-style:solid;
border-image: url("https://file.garden/Z4-KIXj5okOfzeyR/borders/frill-7-i-give-ip.png") 20 round;
}
.info{
  margin-top:10px;
  height:170px;
  width:170px;
  
}

 .status h2 {
   filter: drop-shadow( 0 3px #d19bb0) drop-shadow( 2px 0 pink) drop-shadow( 0 -1px pink) drop-shadow( -1px 0 pink) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);
 font-family:'kiwi';
    border-radius:5px;
  padding:3px;
    text-transform: capitalize;
  font-size:30px;
  letter-spacing: 2px;
  color:white;
  position:absolute;
  top:-40px;
 }
  .status .div1, .div3, .div5, .div7{
    font-family: sant joan;
    color:white;
    text-shadow: 0px 0px 2px #CE2172;
      border: 1px solid pink;
    border-radius:5px;
  padding:2px;
    font-size:15px;
    background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 176, 218, 1) 51%, rgba(255, 214, 235, 1) 69%, rgba(255, 222, 240, 1) 100%);
  }
.status .div2, .div4, .div6, .div8{
  color:#9c6d57;
  font-family: "Hi Melody", sans-serif;
  font-size: 20px;
    border: 1px solid pink;
    border-radius:5px;
  padding-left: 3px;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 4 / 1 / 5 / 2;}
.div8 { grid-area: 4 / 2 / 5 / 3;}
  .menu {
                width: 100px;
                height:100px;
                padding: 3.5px;
                border-radius: 10px 10px 0px 0px;
                background-color: #fff;
                border: 1.25px solid #CC9A81;
                border-bottom: 0px;
                padding-bottom: 0px;
                text-align: center;
                top: 60px;
                left: 150px;
                position: absolute;
                display: block;
                          transition: .2s ease;
}

.menu:hover {
    height: 30%;
    transform: translatey(-22px);
    transition: .2s ease;
    
}    
            .button {
                padding: 3.5px;
                border: 1.25px dashed #CC9A81;
                border-bottom: 0px;
                border-radius: 8px 8px 0px 0px;
                padding: 5px;
                box-sizing: border-box;
                font-size: 12px;
                text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
                height: 100%;
            }
            
            .button a {
                text-decoration: none;
                font-weight: bold;
                color: #ffffff;
                text-shadow: 0 1px #977357, 1px 0px #977357, 0 -1px #977357, -1px 0px #977357;
                font-size: 1.5em;
                
            }
            
            .button:hover {
                text-decoration: none;
                font-style: italic;
            }