/*   ・゜ ♡   these ⤵ are codes for adapting your layout to different screen sizes and viewports   ♡ ゜ ・   -/
    /* ・゜ ♡  defining the original size of #everything to fit the entire page   ♡ ゜ ・ */
     #everything { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100% }
    
    /* ・゜ ♡  this ⤵ will make sure that the text size adapts properly   ♡ ゜ ・ */
      html { text-size-adjust: 100%; }
    
    /* ・゜ ♡  these ⤵ are specifications for mobile phones in vertical view   ♡ ゜ ・ */
      @media screen and (max-width: 1000px) and (orientation: portrait){
        #everything {
          position: absolute; /* let's make sure that everything is fixed on the screen ◝꒰ ´ ˘ ` */
          zoom: 160%; /* this viewport makes your site smaller, so let's apply zoom ◝꒰ ´ ˘ ` */
          /* ・゜ ♡ if your website has a vertical layout, you may delete the line below - this is for rotating your whole site, so it is always horizontally oriented   ♡ ゜ ・ */
          /* transform: rotate(90deg); */
        }
        #container { 
          width: 95% !important; /* let's make the width of the container bigger for phone users! */
        }
      } 
    
    /* ・゜ ♡  these ⤵ are specifications for mobile phones in horizontal view   ♡ ゜ ・ */
      @media screen and (max-width: 1000px) and (orientation: landscape){
      #everything { position: absolute;
      	zoom: 95%; /* this viewport makes your site bigger, so let's remove zoom ◝꒰ ´ ˘ ` */
      }}
    
    /* ・゜ ♡  these ⤵ are specifications for ipad screens   ♡ ゜ ・ */
      @media screen and (min-width: 2000px) and (orientation: landscape){
      #everything { position: absolute;
      zoom: 100%; /* this viewport usually doesn't require zoom ◝꒰ ´ ˘ ` */
      }}
    
    /* ・゜ ♡  these ⤵ are specifications for 1920 x 1080 monitors   ♡ ゜ ・ */
      @media screen and (min-width: 1700px) and (orientation: landscape){
      #everything { position: absolute;
      	zoom: 130%; /* this viewport makes your site smaller, so let's apply zoom ◝꒰ ´ ˘ ` */
      }}
    
    /* ・゜ ♡  these ⤵ are specifications for 3840 x 2160 monitors ( 4k )   ♡ ゜ ・ */
      @media screen and (min-width: 3000px) and (orientation: landscape){
      #everything { position: absolute;
      	zoom: 260%; /* this viewport makes your site way smaller, so let's apply zoom ◝꒰ ´ ˘ ` */
      }}

/* ・゜ ♡  define background  ♡ ゜ ・ */
  /* ・゜ ♡  this is a fallback, so let's use !important when overriding in the html of a page  ♡ ゜ ・ */
  body {
    background-color: #fffaf9;
    background-image: url("");
    background-repeat: repeat;
    background-attachment: fixed;
    
    /* Size settings:
    background-size: contain; == resize to make sure the image is fully visible given the parameters, no cropping or clipping
    background-size: cover; == resize to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
    background-size: [X]px; == sets the width and height. first value sets the width, second value sets the height. if only one value is given, the second is set to "auto"
    background-size: [X]%; == sets the width and height in percent of the parent element. first value sets the width, second value sets the height. if only one value is given, the second is set to "auto"
    */
    
    /* Repeat settings:
    background-repeat: repeat; == repeats both X and Y
    background-repeat: repeat-x; == repeats horizontally only
    background-repeat: repeat-y; == repeats vertically only
    background-repeat: no-repeat == does not repeat
    */
    
    /* Scroll settings:
    background-attachment: scroll; == scrolls with page (default)
    background-attachment: fixed; == does not scroll with page
    */
  }

/* ・゜ ♡  define cursor  ♡ ゜ ・ */
  /* ・゜ ♡  this is a fallback, so let's use !important when overriding in the html of a page  ♡ ゜ ・ */
  body {
    cursor: url(https://i.imgur.com/A5hKsxg.png), progress; } /* normal cursor - "progress" notes that it will show a loading cursor until the custom one can be loaded. set to "auto" for it to show the normal cursor during this period instead */
    a:hover { cursor: url(https://i.imgur.com/Pt0nH2m.png), progress } /* hover cursor ◝꒰ ´ ˘ ` */

/* ・゜ ♡  define scrollbar ♡ ゜ ・ */
  ::-webkit-scrollbar {
    width: 5px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.01); /* this makes the background of the scrollbar transparent */
    }
  ::-webkit-scrollbar-thumb {
    background-color: #eddedd;
    -webkit-border-radius: 5ex; /* this is how round your scrollbar is, the bigger the number, the rounder */
    border: 1px solid #fcf4f2; /* this is the border info of the scrollbar, it can also be "dashed" or "dotted" */
    }

/* ・゜ ♡  define body's normal text  ♡ ゜ ・ */
  body {
    font-family: verdana;
    font-size: 10px;
    color: #a6938f;
    }

/* ・゜ ♡  define text when drag-and-highlighted  ♡ ゜ ・ */
  ::selection {
    color: #c2a7a7;
    background-color: #eddedd;
   }

/* ・゜ ♡  define link style  ♡ ゜ ・ */
  a { /* regular ◝꒰ ´ ˘ ` */
    text-decoration: none; 
    color: #baadb0;
    }
  a:hover { /* hover ◝꒰ ´ ˘ ` */
    color: #d4b8be;
   }

/* ・゜ ♡  define strikethrough style  ♡ ゜ ・ */
  del, s, strike {
    text-decoration: line-through #8a7470 solid 1px;
    }

/* ・゜ ♡  define SIDEBAR div id  ♡ ゜ ・ */
  #sidebar { 
    visibility: visible; /* decide whether or not to show the sidebar - choose "visible" or "hidden" */
    top: 105px; left: 235px; /* adjust the position on screen */
    height: 400px; width: 120px; /* adjust the size */
    position: absolute; /* this will keep the content fixed on the screen */
    z-index: 10; /* the z-index values define the order in which elements appear on top of each other */
    line-height: 8px; /* this will change how much space the line breaks take */
    text-align: center; /* this will keep the content centered in the menu area */
    overflow: hidden; /* this will keep the scrollbar hidden */
    background-color: transparent; /* set the background color of this section */
   }

/* ・゜ ♡  define SIDEBARBUTTON div class  ♡ ゜ ・ */
  .sidebarbutton {
    background-image: url("https://i.imgur.com/Aw2zrq3.png"); /* background image to each button */
    background-size: contain; /* background adjusts to size specified */
    height: 125.28px; width: 120px; /* size of button; remember to keep aspect ratio */
    padding-top: 40px !important; padding: 5px; box-sizing: border-box; /* spacing between edge of container and text */
    line-height: 20px; /* spacing between lines if text has a line break */
    font-family: 'Rouge Script'; font-size: 32px; letter-spacing: 0px; color: #b09b97; text-shadow: 1px 1px #fff; text-align: center; /* style your button text */
   }

  .sidebarbutton:hover {
    color: #fff; /* change text color when hovered */
    text-shadow: 1px 1px #fff;
   }

/* ・゜ ♡  define CONTAINER div id  ♡ ゜ ・ */
  #container { 
    position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); /* keep the container centered vertically on the page */
    margin: auto; /* keep the container centered horizontally on the page */
    height: 95%; width: 50%; /* set the height and width to a % of the whole screen */
    padding: 20px; /* make a margin between the content and the edge */
    padding-right: 15px !important; /* make a margin between the content and the scrollbar */
    border: 5px solid #fffaf9; border-radius: 20px; /* rounded edge border */
    box-sizing: border-box; /* padding and border sizes will be taken into account when computing the size of the container */
    background-color: #fffaf9; /* set the background color of this section */
    z-index: 1; /* what layer the container and its content sits on */
    overflow: auto; overflow: scroll; /* these are important for making the scrollbar work on mobile */
    overflow-wrap: break-word; /* this is for making line breaks automatic when the text reaches the border */
  }

/*   ・゜ ♡   。・　゜ ♡   。・゜ ♡   ゜・。。 ♡　。・゜ ♡ ・  。・゜ ♡   ・゜ ♡ ゜・。 ・ ♡ °  .   */
/* ・゜ ♡  DIVIDERS  ♡ ゜ ・ */
  /* ・゜ ♡  define DASHED hr class  ♡ ゜ ・ */
    .dashed {
      border: none; border-top: 2px dashed #d1cfcf;
      }
  
  /* ・゜ ♡  define DOTTED hr class  ♡ ゜ ・ */
    .dotted {
      border: none; border-top: 3px dotted #d1cfcf;
      }
  
  /* ・゜ ♡  define SOLID hr class  ♡ ゜ ・ */
    .solid {
      border: none; border-top: 3px solid #d1cfcf;
      }
  
  /* ・゜ ♡  define ROUNDED hr class  ♡ ゜ ・ */
    .rounded {
      border: none; border-top: 8px solid #d1cfcf; border-radius: 5px
      }
  
    /* ・゜ ♡  define LACE1 hr class  ♡ ゜ ・ */
    .lace1 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(1).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }
  
  /* ・゜ ♡  define LACE2 hr class  ♡ ゜ ・ */
    .lace2 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(2).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }

  /* ・゜ ♡  define LACE3 hr class  ♡ ゜ ・ */
    .lace3 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(3).png'); background-repeat: repeat-x;
      background-position: 0px 0px; height: 30px; background-size: 20%; 
      }

  /* ・゜ ♡  define LACE4 hr class  ♡ ゜ ・ */
    .lace4 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(4).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }

    /* ・゜ ♡  define LACE8 hr class  ♡ ゜ ・ */
    .lace8 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(8).png'); background-repeat: repeat-x;
      background-position: 0px -10px; height: 30px; background-size: 39%; 
     }

    /* ・゜ ♡  define LACE9 hr class -- TODO: FIX ON DARKER BACKGROUND, CAN'T SEE ON LIGHT COLOR BACKGROUND TO ADJUST  ♡ ゜ ・ */
    .lace9 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(9).png'); background-repeat: repeat-x;
      background-position: 0px 0px; height: 30px; background-size: 50%; 
     }

      /* ・゜ ♡  define LACE10 hr class  ♡ ゜ ・ */
    .lace10 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(10).png'); background-repeat: repeat-x;
      background-position: 0px -20px; height: 30px; background-size: 30%; 
     }

  /* ・゜ ♡  define LACE11 hr class  ♡ ゜ ・ */
    .lace11 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(11).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }

    /* ・゜ ♡  define LACE12 hr class  ♡ ゜ ・ */
    .lace12 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(12).png'); background-repeat: repeat-x;
      background-position: 0px -32px; height: 30px; background-size: 41%; 
     }

  /* ・゜ ♡  define LACE13 hr class  ♡ ゜ ・ */
    .lace13 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(13).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }
  
  /* ・゜ ♡  define LACE14 hr class  ♡ ゜ ・ */
    .lace14 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(14).png'); background-repeat: repeat-x;
      background-position: bottom; height: 30px; background-size: 40%; 
     }

      /* ・゜ ♡  define LACE15 hr class  ♡ ゜ ・ */
    .lace15 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(15).png'); background-repeat: repeat-x;
      background-position: 0px -18px; height: 30px; background-size: 40%; 
     }

      /* ・゜ ♡  define LACE16 hr class  ♡ ゜ ・ */
    .lace16 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(16).png'); background-repeat: repeat-x;
      background-position: 0px -8px; height: 30px; background-size: 30%; 
     }

      /* ・゜ ♡  define LACE17 hr class  ♡ ゜ ・ */
    .lace17 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(17).png'); background-repeat: repeat-x;
      background-position: 0px -15px; height: 30px; background-size: 35%; 
     }

  /* ・゜ ♡  define LACE18 hr class  ♡ ゜ ・ */
    .lace18 {
      border: none;
      background-image: url('https://sozai.pooftie.me/lace/lace%20(18).png'); background-repeat: repeat-x; background-size: contain;
      height: 30px;
      }

/* ・゜ ♡  TOOLTIPS  ♡ ゜ ・ */
  /* ・゜ ♡  define TOOLTIPTOP div class  ♡ ゜ ・ */
    .tooltiptop { position: relative } /* making the .tooltip span a container for the tooltip text */
    .tooltiptop:before { 
      content: attr(data-text); /* here's the magic */
      position: absolute;
      right: 50%; transform:translateX(50%); /* center vertically */
      bottom: 100%; /* move to top */
      margin-bottom: 15px; /* and add a small gap between hover and tooltip */
      opacity: 0; transition: .3s opacity; /* hide until hovered over, then fade-in animation */
      
      /* style the tooltip */
      width: 100px; /* sizing */
      padding: 10px; /* space between edge and text */
      border-radius: 10px; /* border */
      background: #eddedd; /* background color */
      text-align: center; color: #fff; /* text */
     }
    .tooltiptop:after { /* arrow */
      content: "";
      position: absolute;
      right: 50%; transform:translateX(50%); /* center vertically (keep the same as tooltip before) */
      bottom: 100%; /* move to top (keep the same as tooltip before) */
      margin-bottom: 0px; /* position arrow correctly so it does not overlap tooltip */
      opacity: 0; transition: .3s; /* hide until hovered over, then fade-in animation */
      
      /* style the arrow */
      border: 7.5px solid #000; border-color: #eddedd transparent transparent transparent; /* the transparent parts make it so that the arrow is arrow-shaped */
      }
    .tooltiptop:hover:before, .tooltiptop:hover:after { display: block; opacity: 1 } /* fade-in the tooltip when hovered */
  
  /* ・゜ ♡  define TOOLTIPRIGHT div class  ♡ ゜ ・ */
    .tooltipright { position: relative } /* making the .tooltip span a container for the tooltip text */
    .tooltipright:before { 
      content: attr(data-text); /* here's the magic */
      position: absolute;
      top: 50%; transform:translateY(-50%); /* center vertically */
      left: 100%; /* move to right */
      margin-left: 15px; /* and add a small left gap between hover and tooltip */
      opacity: 0; transition: .3s opacity; /* hide until hovered over, then fade-in animation */
      
      /* style the tooltip */
      width: 100px; /* sizing */
      padding: 10px; /* space between edge and text */
      border-radius: 10px; /* border */
      background: #eddedd; /* background color */
      text-align: center; color: #fff; /* text */
      }
    .tooltipright:after { /* arrow */
      content: "";
      position: absolute;
      top: 50%; transform:translateY(-50%); /* center vertically (keep the same as tooltip before) */
      left: 100%; /* move to right (keep the same as tooltip before) */
      margin-left: 0px; /* position arrow correctly so it does not overlap tooltip */
      opacity: 0; transition: .3s; /* hide until hovered over, then fade-in animation */
     
      /* style the arrow */
      border: 7.5px solid #000; border-color: transparent #eddedd transparent transparent; /* the transparent parts make it so that the arrow is arrow-shaped */
      }
    .tooltipright:hover:before, .tooltipright:hover:after { display: block; opacity: 1 } /* fade-in the tooltip when hovered */
  
      /* tooltip HTML layout:
        <span  data-text="Thanks for hovering! I'm a tooltip" class="tooltip">Hover over me!</span>
      */