@font-face {
    font-family:basiic;
    src:url(https://files.catbox.moe/jtvuhg.ttf);
  }
  #basiic {
    font-family:basiic;
  }
    
  @font-face {
    font-family:sweetheart; /* extra font incase you dont like the basiic one */
    src:url(https://files.catbox.moe/33n03y.ttf);
  }
    
  #sweetheart {
    font-family:sweetheart;
  }

  * {
    box-sizing: border-box;
    image-rendering: pixelated;
    line-height: 20px;
  }

  body {
    
    background-color: lavenderblush;
    background-image: url("");
    background-position: center;
    color: #6d5f54;
    font-family: 'basiic';
    font-size: 18px;
    image-rendering: pixelated;
    cursor: url('https://64.media.tumblr.com/23cc2bc23b71f3fddf182a4cfe28d672/38ab7f2c2f5ff87e-5a/s75x75_c1/34dba02017a839b83a5367bbdc4ed44edef37be4.gifv'), auto;
  }

 

  @keyframes background {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
  }

  #pinkborder {
    border-image: url(vpqkkx.png) 6 fill round;
    border-style: solid;
    border-width: 9px;
    height: auto;
    left: 50%;
    position: relative;
    top: 100px;
    transform: translateX(-50%);
    width: 850px;
  }

  #box {
    background: url(https://64.media.tumblr.com/fbda7b14722a3ffb1c3bb08ac3d129e4/tumblr_inline_n25c0klxKY1qhwjx8.png);
    border: 3px solid lightgrey;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    width: 100%;
  }

  #box a {
    color: blue;
    text-decoration: none;
  }

  #box a:hover {
    color: hotpink;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    transform: scale(1.12);
  }

  #headercontainer {
    background-image: url('https://i.pinimg.com/1200x/3e/be/ed/3ebeedd4cd6c089b82dc26c263e93aca.jpg');
    background-position: center;
    background-size: cover;
    border: 3px solid lightgrey;
    border-radius: 30px 30px 0px 0px;
    box-shadow: 0 0 13px 13px white inset;
    font-weight: 600;
    height: 120px;
    position: relative;
    width: 100%;
  }

  #box-footer {
    background: linear-gradient(80deg, #ffc7d1, #ffd5b8, #fffbd4, #e2ffd9, #d8f3ff, #d6dcff, #ebd4ff, #ffd6f0);
    border: 3px solid lightgrey;
    border-radius: 0px 0px 10px 10px;
    border-top: 0px;
    color: pink;
    font-family: 'basiic';
    font-size: 13px;
    font-weight: 600;
    padding: 10px 7px 10px;
    text-align: center;
    text-shadow: 2px 1px white;
  }

  #box-footer a {
    color: blue;
    text-decoration: none;
  }

  #box-footer a:hover {
    color: hotpink;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    transform: scale(1.12);
  }

  .header-text {
    color: lightblue;
    left: 10px;
    padding-top: 10px;
    position: absolute;
    text-align: left;
    text-shadow: 2px 1px white;
    top: 20px;
  }

  .header-text h1 {
    font-family: Garamond;
    font-size: 55px;
    margin: 0;
  }

  .header-text p {
    font-size: 14px;
    margin: 4px 0;
  }


 h2 {
    color: hotpink;
    font-size: 20px;
    letter-spacing: 3px;
    font-family: sweetheart;
    margin-bottom: -10px;


  }

  .straightrainbowbar {
    background: linear-gradient(80deg, #ffc7d1, #ffd5b8, #fffbd4, #e2ffd9, #d8f3ff, #d6dcff, #ebd4ff, #ffd6f0);
    border-bottom: 1px dotted red;
    border-top: 1px dotted red;
    color: #6d5f54;
    font-family: Garamond;
    font-size: 18px;
    font-weight: 600;
    padding: 7px;
    text-shadow: 2px 1px lavenderblush;
  }

  .straightrainbowbar-header {
    background: linear-gradient(80deg, #ffc7d1, #ffd5b8, #fffbd4, #e2ffd9, #d8f3ff, #d6dcff, #ebd4ff, #ffd6f0);
    border-bottom: 1px dotted red;
    border-radius: 30px;
    border-top: 1px dotted red;
    color: #6d5f54;
    font-family: Garamond;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 7px 0;
    position: sticky;
    text-align: center;
    text-shadow: 2px 1px lavenderblush;
    top: 0;
    z-index: 10;
  }




  .topmarq {
    background: linear-gradient(to bottom, rgba(254,250,254,1) 0%, rgba(254,232,247,1) 50%, rgba(254,224,244,1) 51%, rgba(255,219,244,1) 100%);
    border: 3px solid lightgrey;
    border-bottom: 0;
    
    padding: 2px;
    width: 100%;
    height: 35px;
  }

  .topmarq-inner {
    align-items: center;
    display: flex;
    font-style: italic;
    justify-content: space-between;
    width: 100%;
    height: 35px;
  }

  .marquee-left {
    color: hotpink;
    flex: 1;
    font-family: 'basiic';
    font-size: 15px;
    overflow: hidden;
    padding: 10px;
    white-space: nowrap;
    height: 35px;
  }

  .marquee-right {
    background: linear-gradient(to bottom, rgba(254,251,250,1) 0%, rgba(254,246,232,1) 50%, rgba(254,245,224,1) 51%, rgba(255,242,219,1) 100%);
    border-left: 3px solid lightgrey;
    border-bottom: 1px dotted red;
    color: lightsalmon;
    font-size: 15px;
    padding: 7px;
    white-space: nowrap;
    height: 34px;
    margin-top: -6px;
  }

  .box-sections {
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    padding: 10px;
    width: 100%;
  }

  .left-col,
  .mid-col,
  .right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .left-col,
  .right-col {
    flex: 1;
  }

  .mid-col {
    flex: 2;
  }

  .inner-box {
    background: lavenderblush;
    border: 2px solid lightgrey;
    border-radius: 5px;
    box-shadow: inset 0 0 4px #ffffff;
    min-height: 100px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    }

  

  .inner-box-text {
    margin-top: 6px;
    padding-right: 15px;
    overflow-y: scroll;
    width: 100%;
  }

  ::selection {
    background: hotpink;
    color: lavenderblush;
  }
  
  /* scrollbar */
  ::-webkit-scrollbar{ width: 2px; } 
  ::-webkit-scrollbar-track{ background-color: transparent; }
  ::-webkit-scrollbar-thumb{ background-color: hotpink; }