@font-face {
font-family: spirit; 
src: url(https://dl.dropbox.com/scl/fi/npu6iooiwovhxljcjoeex/spirit.ttf?rlkey=eubwh1fc2c460q68exstay65d&dl=0);
}

* {
  cursor: url(https://cur.cursors-4u.net/smilies/smi-3/smi268.ani), url(https://cur.cursors-4u.net/smilies/smi-3/smi268.gif), auto !important;}
a {
    color: inherit;
}

body {
  background: url(imagens/pinkpolka.jpeg) 0px 0px / 10px;
  align-items: center;
  margin: 10px;
  padding: 10px;
}

.scale-down {
    transform: scale(0.8);
    transform-origin: top left;
    
}

#container {

    background-color: lightblue;
    border: 1px dashed deeppink;
    border-radius: 5px;
    position: relative;
    width: 720px;
    font-family: 'ms pgothic';
    margin: 5px auto;
    max-height:740px;
     
}

#header {
  grid-area: header;
  margin: 0 auto;
  box-sizing: border-box;
  width: 722px;
  border-radius: 10px;
  height: 150px;
  padding-top: 100px;
  background: url(imagens/backlight.jpg);
  background-size: 720px;
  background-clip: padding-box;
  align-items: center;
  
  
  img {
    image-rendering: pixelated;
  }

}

#musicplayer {
  margin-top: 100px;
  margin-left: -235px;
  
}

.lace {
                 /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
width: fit-content;
align-items: center;
margin: 0 auto;
border-image: url("https://i.imgur.com/8xftJ3v.gif") 7 fill round;         
    
}

text-area {
    position: absolute;
    top: 50px;
    left: 300px;
    z-index: 4;
    margin-bottom: 100px ;
}

h2 {
  font-family: 'spirit';
  display: inline;
  font-weight: 100;
  color: white;
  text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
  font-size: 45px;
}

 @keyframes squiggly-anim {
    0% {
      -webkit-filter: url("#squiggly-0");
              filter: url("#squiggly-0");
    }
    25% {
      -webkit-filter: url("#squiggly-1");
              filter: url("#squiggly-1");
    }
    50% {
      -webkit-filter: url("#squiggly-2");
              filter: url("#squiggly-2");
    }
    75% {
      -webkit-filter: url("#squiggly-3");
              filter: url("#squiggly-3");
    }
    100% {
      -webkit-filter: url("#squiggly-4");
              filter: url("#squiggly-4");
    }
  }

  #text {
    animation: squiggly-anim 0.5s linear infinite;
  }

  .svg-container {
    width: 0;
    height: 0;
    overflow: hidden;
  }

#bg {
    border-radius: 10px;
    background: radial-gradient(#fff, #FFF7EA, #FFF7EA);
    border: 3px solid #FFF7EA;
    box-shadow: 0px 0px 7px inset #FDF0DA, 0px 0px 4px #00000022;
    overflow: hidden;
    width: 400px;
    margin: 5px;
    height: 350px;
   
    
}

   
#header1 {
    width: 100%;
    height: 25px;
    background-color: #abebe5;
    min-height: 10px;
    mix-blend-mode: multiply;
    padding: 2px 5px;
    
}

#header1 p {
    text-shadow: -1px 0 #F562A0, 0 1px #DE4384, 1px 0 #DE4384, 0 -1px #F562A0, 0 0;
    font-family: 'ms pgothic';
    font-size: 14px;
    color: white;
    font-weight: 600;
    margin: 0;
}

.embaixo {
    min-height: 500px;
    width: 900px;
    display: flex;
    
}



.right { 
  margin-top: 5px;
}

.embaixo .right {
    width: 250px;
    
}


.left {
    width: 400px;
    flex-shrink: 0;
    margin-right: 0px;
    padding-right: 20px;
}



.review-area {
    display: flex;
    flex-direction: column;
    margin: 10px;
    overflow-y: scroll;
    height: 300px;
}

 ::-webkit-scrollbar {
    width: 10px;
    background: #ffffff55;
}
::-webkit-scrollbar {
    width: 10px;
    background: #ffffff55;
}
::-webkit-scrollbar {
    width: 10px;
    background: #ffffff55;
}
::-webkit-scrollbar {
    width: 10px;
    background: #ffffff55;
}
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
    border: 2px solid #d4e8fb99;
}
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
    border: 2px solid #d4e8fb99;
}
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
    border: 2px solid #d4e8fb99;
}

 ::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
    border: 2px solid #d4e8fb99;
}
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
    border: 2px solid #d4e8fb99;
}

.yaoimg {
  image-rendering: pixelated;
  border-radius: 5px;
  padding: 3px;
}

  
.img-grayscalehover{
  filter: grayscale(0%);
transition: .25s ease-out;
  }
  
.img-grayscalehover:hover{
  filter: grayscale(100%);
transition: .25s ease-in;
}     
    
#header2 {
    width: 100%;
    height: 25px;
    background-color: #d57bb4;
    min-height: 10px;
    mix-blend-mode: multiply;
    padding: 2px 5px;
}

#header2 p {
    display: inline;
    text-shadow: -1px 0 #F562A0, 0 1px #DE4384, 1px 0 #DE4384, 0 -1px #F562A0, 0 0;
    font-family: "ms pgothic";
    font-size: 14px;
    color: white;
    font-weight: 600;
}

#bgg {
   border-radius: 10px;
    background: radial-gradient(#fff, #FFF7EA, #FFF7EA);
    border: 3px solid #FFF7EA;
    box-shadow: 0px 0px 7px inset #FDF0DA, 0px 0px 4px #00000022;
    overflow: hidden;
    width: 290px;
    

}

.hikashiki {
  margin-top: 535px;
  margin-left: -245px;
}
.plan ul {
    margin-top: 0px;
    list-style-type: none;
    padding: 10px;
    margin-bottom: 0px;
    max-height: 80px;
    overflow-y: scroll;
}

.plan li {
    text-shadow: -1px 0 #396099, 0 1px #396099, 1px 0 #396099, 0 -1px #396099, 0 0;
    color: white;
    font-family: 'ms pgothic';
    font-size: 12px;
    border-bottom: 1px dashed #FFAD21;
    margin-bottom: 2px;
    font-weight: 900;
}

#header3 {
    width: 100%;
    height: 25px;
    background-color: #f2a1a1;
    min-height: 10px;
    mix-blend-mode: multiply;
    padding: 2px 5px;
}

#header3 p {
  display: inline;
    text-shadow: -1px 0 #F562A0, 0 1px #DE4384, 1px 0 #DE4384, 0 -1px #F562A0, 0 0;
    font-family: "ms pgothic";
    font-size: 14px;
    color: white;
    font-weight: 600;
}


.bar {
    width: 50%;
    border: 2px solid #FF9FBF;
    height: 15px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    background: url(https://i.pinimg.com/1200x/b7/54/7c/b7547c726157838a686bf40bb85b1ce8.jpg) 0px 0px / 10px;
}

.percent {
    height: 20px;
    background: linear-gradient(#FF9FBF, #FFE4ED);
    filter: blur(1px);
    top: -1px;
    left: -1px;
    position: absolute;
    opacity: .6;
    mix-blend-mode: multiply;
}