/*hi please dont take any of my art or assets, thank you.*/
  @import url('https://fonts.googleapis.com/css2?family=Mali&display=swap');

  @font-face {
   src: url(/assets/fonts/Testamento.ttf);
   font-family: testament;
  }

  * {
   box-sizing: border-box;
  }

  body {
   position: relative;
   width: 900px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   background: url(https://loves1ck.neocities.org/img/housebg.gif);
   box-sizing: border-box;
   margin-top: 50px;
   font-family: 'Mali', cursive;
     color: #826777;
  }

 a{
     text-decoration: none;
     color: #826777;
     font-weight: 900;
 }
 
 a:hover{
     color: hotpink;
     transition: 0.4s;
 }

  .canvas {
   position: relative;
   width: 500px;
   margin: 0 auto;


  }

  .curved-text {
   position: absolute;
   width: 600px;
   height: 600px;
   top: -70px;
   left: -100px;
   font-family: testament;
   fill: #f2f2f2;
   font-size: 30px;
   font-weight: 900;
   text-shadow: 0px 0px 3px #fac1e1, 0px 0px 5px #fac1e1;
    z-index: 9;
  }


  .header {
   width: 450px;
   height: 450px;
   background: url(/oc-notebook/images/milky/milky-by-KyouRibbitee.gif) center no-repeat, #fff2f7;
   background-size: 500px;
   border-radius: 48% 48% 2px 2px;
   margin: 0 auto;
   border: 1px dashed #8f787d;
   filter: brightness(125%) saturate(75%);
   box-shadow: 10px 2px 10px #fa7fc780;
   z-index: 1;
  }

  .container {
   margin: 0 auto;
   margin-top: -25px;
   width: 900px;
   height: 325px;
   border: 1px dashed #8f787d;
   background: url(/images/sozai/dots1.jpeg);
   padding: 25px 50px 50px 50px;
   text-align: center;
   box-shadow: 10px 10px 10px #fa7fc760;
  }

  .container p {
   text-align: justify;
  }

 .container2 {
   margin: 0 auto;
   margin-top: -25px;
   width: 900px;
   border: 1px dashed #8f787d;
   background: url(/images/sozai/dots1.jpeg);
   padding: 25px 50px 50px 50px;
   text-align: center;
   box-shadow: 10px 10px 10px #fa7fc760;
  }

  .container2 p {
   text-align: justify;
  }

 .spacer{
     margin-top: 50px;
 }

  .ribon {
   position: absolute;
   top: 410px;
   right: -30px;
   height: 89px;
   width: 115px;
   object-fit: contain;
   filter: pixelate;
   pointer-events: none;
   z-index: 99999;
   filter: drop-shadow(0 0 2px #c4849d);
 transform: rotate(40deg)
  }

  .ribon2 {
   position: absolute;
   top: 410px;
   left: -30px;
   height: 89px;
   width: 115px;
   object-fit: contain;
   filter: pixelate;
   pointer-events: none;
   z-index: 99999;
   filter: drop-shadow(0 0 2px #c4849d);
 transform: rotate(-40deg)
  }


  .button {
   display: inline-block;
   padding: 10px 20px;
   background: #fff2f7;
   color: #e6aac5;
   border: 4px double #e6aac5;
   border-radius: 5px;
   text-decoration: none;
   transition: 0.3s;
   font-weight: 900;
   font-family: testament;
   box-shadow: #fff5f7 0px -50px 36px -28px inset;
  }

  .button:hover {
   background-color: #e8bed2;
   color: white;
  }

  h1 {
   font-family: testament;
    margin: 0 auto;
    text-shadow: 0px 0px 3px #fac1e1, 0px 0px 5px #fac1e1;
    color: #f5abd6;
  }


  footer {
   text-align: center;
   margin-top: 50px;
   background: url(/images/sozai/dots1.jpeg);
   border: 1px dashed #8f787d;
   box-shadow: 10px 10px 10px #fa7fc760;
  }
  
  .fit{
      height: 300px;
      width: 300px;
      border-radius: 25px;
  }
  
  figure {
  display: inline-block;
  align-items: flex-start;
  margin: 1px;
}

figure img {
  height: 175px;
  width: 175px;
}

figure img:hover {
    filter:saturate(25%);
    
}

figure figcaption {
  width: 175px;
  color: white;
  background-color: #ff69b4;
  border-radius: 2px;
  font-size: 12px;
  margin-top:2px;
}

.nav-cont{
  width: 100%;
  height: 95px;
  position: fixed;
  right: 0px;
  top: 0px;
  z-index: 999999;
}

#navbar {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #efabd190;
   -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}


#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

#navbar a:hover{
    color: hotpink;
}