body {
    background-color: #fff;
    font-family: Nunito;
    background-image: var(--body-bg-image);
    background-size: 350px;
  }

  h1, h2, h3, h4 {
    color: #070092;
    font-family: Nunito;
  }

p {
    font-family: Nunito;
    font-size: px;
  }

p a:hover{
  color: #ffb6c1;
}

table, tr, th{
  border: 1px solid;
  }

hr {
  border-top: 2px dashed #AC1E44;
}

.title {
  font-family: October Twilight;
  font-size: 42px;
  text-align: center;
  margin-top: 0%;
  text-shadow: white -2px 0 , white 0 2px , white 2px 0 , white 0 -2px ;
  color: #b15e6a;

}

.main {
    background: #fff;
    background-image: url('/images/bg/lapin\ pale\ \(my\ edit\)\ repeating\ heart\ quilt.png');
    background-size: 150px;
    color: #ac1e44;
    max-height: 800px;
    min-height: 500px;
    overflow: auto;
    max-width: 500px;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 1%;
    padding: 3%;
    padding-top: 1%;
    border: 14px solid transparent;
    border-image: url('/images/borders/whitelace\ solaria\ on\ neocities.png') 16 round;
    border-image-outset: 10px;
    }

    .main a{
      color: #ac1e44;
      font-weight: bold;
    }

    #logocontainer{
        max-width: 775px;
        margin: 0 auto;
    }
    .header img {
        display:block;
        max-width: 100%;
        max-height: auto;
        margin: 0 auto;
        text-align: center;
    }

    .navbar{
        background: #fff;
        color: #ac1e44;
        max-height: 30px;
        overflow: auto;
        max-width: 500px;
        margin: auto;
        margin-top: 2%;
        margin-bottom: 0%;
        padding: 1%;
        padding-top: 1%;
        padding-bottom: 1%;
        border-radius: 5px;
        border: 2px dashed #ac1e44;
        font-family: Nunito;
        font-size: 16px;
        font-weight: bold;
    }

    .navbar ul{
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
    }

    .navbar a{
      font-weight: bold;
      color: #ac1e44;
    }

    .navbar a:hover{
      font-weight: bold;
      color: #ffb6c1;
    }

    .navbar li a{
      color: #ac1e44;
      text-decoration: none;
    }

    .footer{
      background: #fff;
      color: #ac1e44;
      max-height: 30px;
      margin: 25%;
      margin-top: 0%;
      margin-bottom: 2%;
      border-radius: 5px;
      border: 2px dashed #ac1e44;
      padding-top: 1%;
      padding-bottom: 2%;
      text-align: center;
  }

  .footer p {
    font-family: Nunito;
      font-size: 14px;
      font-weight: bold;
  }

  .footer a{
    font-weight: bold;
    color: #ac1e44;
  }

  .footer a:hover{
    font-weight: bold;
    color: #ffb6c1;
  }

    @font-face {
      font-family: Nunito;
      src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
  }
  
  @font-face {
      font-family: Nunito;
      src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
      font-weight: bold;
  }
  
  @font-face {
      font-family: Nunito;
      src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
      font-style: italic;
  }
  
  @font-face {
      font-family: Nunito;
      src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
      font-style: italic;
      font-weight: bold;
  }

  @font-face {
    font-family: Warmheart;
    src: url('/fonts/212 Warmheart Script Demo.ttf');
}

@font-face {
  font-family: Bangalore;
  src: url('/fonts/Bangalore.ttf');
}

@font-face {
  font-family: Heartland;
  src: url('/fonts/Heartland.otf');
}

@font-face {
  font-family: RoundedPixel;
  src: url('/fonts/roundedpixel.ttf');
}

@font-face {
  font-family: Caps Lock;
  src: url('/fonts/caps_lock/caps_lock.ttf');
}

@font-face {
  font-family: October Twilight;
  src: url('/fonts/October\ Twilight\ -\ OTF.otf');
}


  /* ===== Scrollbar CSS ===== */

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #f7e8eb;
    border-radius: 10px;
    border: 3px outset #e5d7d7;
  }

  @media only screen and (max-width:900px){
    .navbar {
      margin: 0%;
      margin-top: 2%;
      margin-bottom: 0%;
    }
    .main{
      margin: auto;
      margin-top: 2%;
      margin-bottom: 1%;
    }
    .footer{ 
      margin: 0%;
      margin-top: 0%;
      margin-bottom: 2%;
  }
  }
  
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }

  ::selection {
    color: white;
    background: #932649; /* WebKit/Blink Browsers */
  }
  ::-moz-selection {
    color: white;
    background: #932649; /* Gecko Browsers */
  }