:root {
  
}

@font-face {
                font-family: basiic;
                src: url('fonts/basiic.ttf');
            }
            @font-face {
                font-family: porkys;
                src: url('fonts/PORKYS_.TTF');
            }
            @font-face {
                font-family: kinkee;
                src: url('fonts/KINKIE__.TTF');
            }
            @font-face {
                font-family: pixelscript;
                src: url('fonts/PixelScript.otf');
            }
      
      body {
        background-color: white;
        color: black;
        font-family: basiic;
      }
      
      .maincontainer {
        display: flex;
        flex-flow: column wrap;
        max-width: 1600px;
        max-height: 900px;
        margin: 70px auto 0;
        gap: 10px;
      }
      
      .columncontainer {
        display: flex;
        flex-flow: column wrap;
        gap: 10px;
      }
      
      .rowcontainer {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
      }
      
      .sidebarcontainer {
        display: flex;
        flex-flow: column wrap;
        gap: 10px;
      }
      
      main {
       max-width: 800px;
       left: 400px;
       display: block;
       background-color: white;
       padding: 20px;
      }
      
      sidebar {
        display: block;
      }
      .left {
        width: 200px;
      }
      .right {
        width: 300px;
      }
      
      splits {
       display: block;
       background-color: white;
       height: 40px;
      }
      .cute {
        background-image: url('/assets/bg/pastels2.gif');
        background-size: auto;
      }
      
      .base {
        background-color: white;
        padding: 20px;
      }
      
      .displaycase {
        background-image: url('/assets/bg/heartgrid.gif');
        background-size: auto;
        padding: 10px;
      }
      
      #displaycase {
        height: 60px;
        background-size: 100%;
      }
      
      .pastelrainbow {
        background-image: url('/assets/pastelrainbowbanner.jpg');
      }
      .indiestyle {
        background-image: url('/assets/indiestylebanner.jpg');
      }
      
      
      .linksout {
        background-image: url('/assets/bg/pastelgoth2.jpg');
        background-size: 100%;
        padding: 10px;
        width: 200px;
      }
      
      .linksout h2 {
        color: #ff83d9;
        width: 82%;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        background-color: white;
        padding: 10px;
        border-radius: 20px 20px 0px 0px;
        border: 3px ridge #f6a0ff;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
      }
      .linksout a {
        display:block;
        font-weight: bold;
        width: 82%;
        color: #ff83d9;
        text-decoration: none;
        background-color: white;
        padding: 10px;
        border: 3px ridge #f6a0ff;
      }
      
      .linksout a:hover {
        color: black;
        text-decoration: underline wavy #D6FFFF 1px;
      }
      
      .borderend {
        border-radius: 0px 0px 20px 20px;
      }
      
      .images {
        width: 100%;
        max-height: 80px;
        overflow: hidden;
      }
      
      .border {
        border-width:7px;
        border-style:solid;
        border-image: url("/assets/borders/border.png") 8 round;
        border-radius: 10px;
      }
      .border2 {
        border-width:7px;
        border-style:solid;
        border-image: url("/assets/borders/border2.png") 8 round;
        border-radius: 10px;
      }
      
      .border3 {
        border-width: 10px;
        border-style: solid;
        border-image: url(https://foollovers.com/mat/plate/pl034-plate-i08.gif) 20 fill round;
        border-radius: 20px;
      }
      
      .header {
        background-image: url('/assets/bg/rainbow.gif');
        height: 30px;
        width: auto;
        margin: 0 20px 10px;
      }

      .navbar {
        position:fixed;
        left:-230px;
        top:0;
        width:230px;
        height:100%;
        box-shadow:2px 2px 3px 3px #ccc;
        box-sizing:border-box;
        padding:20px 30px;
        background:white;
        background-image: url('/assets/bg/gingham.gif');
      }
      
      .navbar .menu a {
        display:block;
        margin-bottom:10px;
        font-size:1.2rem;
        text-decoration:none;
        font-weight: bold;
        color:white;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #8a77a9;
        font-family: porkys;
        padding: 10px;
        text-align: center;
        background-image: url('/assets/bg/heartgrid.gif');
        border-radius: 30px;
        border: 3px dashed #f6a0ff;
      }
      
      .menu {
        width: 100%;
      }
      
      .close-icon {
        position:absolute;
        right:15px;
        top:23px;
        text-decoration:none;
        font-size:1.4rem;
        color: white;
      }
      
      .open-icon {
        position:fixed;
        left:5px;
        top:25px;
        text-decoration:none;
        padding:10px 5px;
        box-shadow:1px 1px 1px 1px white;
        background-color: #EEC7FF;
      }
      
      .hide {
        transition:left 0.8s linear;
        left:-230px;
      }
      
      .show {
        transition:left 0.8s linear;
        left:0px;
      }
      .trimt {
        background-image: url('/assets/borders/trimt.gif');
        position: fixed;
        z-index: 10;
        width: 1920px;
        height: 33px;
        top: -5px;
      }
      
       .trimb {
          background-image: url('/assets/borders/trimb.gif');
          position: fixed;
          z-index: 10;
          width: 1920px;
          height: 33px;
          bottom: -5px;
        }
        
      .blockimages {
        display: block;
        margin: 0 auto;
      }
      .inlineimages {
        width: inherit;
      }
      
      .sweetsdivider {
        background-image: url(/assets/pixels/sweetsdivider.webp);
        background-size: auto;
        background-repeat: repeat-x;
        width: 100%;
        height: 34px;
        margin-bottom: 10px;
      }
      .rainbowdivider {
        background-image: url(/assets/pixels/rainbowdivider.webp);
        background-size: auto;
        background-repeat: repeat-x;
        width: 100%;
        height: 34px;
        margin-top: 10px;
      }
      h1, h2, h3, h4 {
        font-family: kinkee;
      }