:root {
  --palepink: #fff7f8;
  --pale: #f4e2e9;
  --bg: #f2dada;
  --pink: #f7c9c8;
  --dusty: #7f6969; 
  --font: #aa6363;
  --bg-image: url('/images/bg/gamer_palepink_demonicpedigree.PNG');
  --magenta: #b24270;
  --dark: #1b1a1a;
  --cherry: #AC1E44;
}

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

a {
  color: var(--font);
}

a:hover {
  color: var(--palepink);
  text-shadow: white -2px 0 , white 0 2px , white 2px 0 , white 0 -2px ;
}

header {
  font-size: 42px;
  text-align: center;
  text-shadow: white -2px 0 , white 0 2px , white 2px 0 , white 0 -2px ;
  margin-bottom: 0%;
}

header h1 {
  font-family: Warmheart, cursive;
  margin-top: 1%;
  color: var(--font);
  margin-bottom: 0%;
}

nav {
  color: var(--dusty);
  text-align: center;
}

  nav li {
    background: none;
    display: inline-block;
    padding: 3px;
    border: 9px solid transparent;
    border-image: url('/images/borders/stamp\ border.gif') 5 round;
    border-image-slice: 8 fill;
  }

    nav a {
      text-decoration: none;
      color: var(--font);
    }

    nav a:hover {
      color: var(--dusty);
    }

main {
  margin: 3%;
}

#outer {
  display: block;
  background: #fff;
  background-image: url('/images/bg/lapin\ pale\ \(my\ edit\)\ repeating\ heart\ quilt.png');
  background-size: 150px;
  color: var(--font);
  max-height: 700px;
  min-height: 500px;
  max-width: 600px;
  
  margin: auto; /*centers container*/

  padding: 2%;
  padding-top: 2%;
  border: 22px solid transparent;
  border-image: url('/images/borders/whitelace\ solaria\ on\ neocities.png') 17 round;
  
  background-clip: padding-box;
  }

  #outer a {
    color: var(--cherry);
    font-weight: bold;
    text-decoration: none;
  }

  #outer a:hover { 
    color: var(--pink);
    text-shadow: var(--font) -1px 0 , var(--font) 0 1px , var(--font) 1px 0 , var(--font) 0 -1px ;
  }

#inner {
  background-color: var(--palepink);
  background-image: url('/images/bg/polkadots_lightpink_jasminefeng.png');
  background-size: 75px;
  max-height: 700px;
  border: 1px solid var(--font);
  overflow: auto;/*allows scrollbar*/
}

#inner li a {
  color: var(--font);
}

#inner li a:hover {
  color: var(--pink);
  text-shadow: var(--font) -1px 0 , var(--font) 0 1px , var(--font) 1px 0 , var(--font) 0 -1px ;
}

.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;
  }

  /* ===== 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 */
  }

  #leftpagedoll {
    position: fixed;
    bottom: 2%;
    left: 3%;

    filter: 
      drop-shadow(1px 1px #fff) 
      drop-shadow(-1px 1px #fff) 
      drop-shadow(1px 1px #fff) 
      drop-shadow(1px -1px  #fff) 
      drop-shadow(1px 1px #fff) 
      drop-shadow(-1px 1px #fff) 
      drop-shadow(1px -1px #fff) 
      drop-shadow(-1px -1px #fff);     
    }

  #leftpagedoll img {
    max-width: 70%;
    }

  @media only screen and (max-width: 900px) { 
    #leftpagedoll {
      display: none;
      }
    }

  #rightpagedoll {
    position: fixed;
    bottom: 0px;
    right: 3%;

        filter: 
      drop-shadow(1px 1px #fff) 
      drop-shadow(-1px 1px #fff) 
      drop-shadow(1px 1px #fff) 
      drop-shadow(1px -1px  #fff) 
      drop-shadow(1px 1px #fff) 
      drop-shadow(-1px 1px #fff) 
      drop-shadow(1px -1px #fff) 
      drop-shadow(-1px -1px #fff);
    }

  #rightpagedoll img {
    max-width: 70%;
    }

  @media only screen and (max-width: 900px) { 
    #rightpagedoll {
      display: none;
      }
    }