:root {
      --transparent: #ff000000;
      --content: #3A114D;
      --header-image: url('https://file.garden/aaJPuXRWsEcDcP0P/gifs/IMG_8950.png');
      }
      
      body {
        font-family: Georgia, sans-serif;
        font-size: 1em;
        color: var(--darkest);
        background-image: var(--body-bg-image);
      }
      
      #container {
        width: 100%; 
        max-width: 1000px;
        margin: 0 auto;
      }
      
      a {
        font-family: Fredericka the Great;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
        color: var(--sidebar-cl);
      }
      
      #header {
        height: 130px;
        background-image: var(--header-image);
        background-size: 100%;
        max-width: 100%;
        margin: 1em;
        padding: 1em;
        border-radius: 3px;
      }
      
      #relationships-box::-webkit-scrollbar {
        background-color: transparent;
        width: 5px;
      }

      #relationships-box::-webkit-scrollbar-thumb {
        background-color: var(--sidebar-cl);
        border-radius: 25px;
      }
      
      #flex {
        display: flex;
      }
      
      #mainstuff {
        margin: 1em;
        padding: 1em;
        flex: 1;
        order: 2;
        padding: 2em;
        max-width: 80%;
        width: 100%;
        border-radius: 3px;
        border: 3px inset var(--extra);
        background-image: var(--main-bg-image);
      }
      
      aside {
        background-color: var(--sidebar-cl);
        color: var(--lightest);
        padding: 1em;
        margin: 1em;
        width: 20%;
        font-size: .9em;
        border: 3px inset var(--lightest);
        border-radius: 3px;
      }
      
      .box {
        background-color: var(--lightest);
        overflow: scroll;
        overflow-x: hidden;
        height: 10em;
        padding: 1rem;
        font-size: .9em;
        color: var(--darkest);
        border: 3px solid var(--boxes-cl);
      }
      
      #main-story {
        display: flex;
        flex-direction: row;
        background-color: var(--boxes-cl);
        border: 3px double var(--lightest);
        padding: 1em;
        margin: 1em;
      }
      
      .main-story-info {
        display: flex;
        flex-direction: column;
        margin-right: 3px;
        max-width: 400px;
      }
      
      #other-info {
        background-color: var(--boxes-cl);
        border: 3px double var(--lightest);
        padding: 1em;
        margin: 0 1em 1em 1em;
      }
      
      #relationships-box {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        overflow: scroll;
        overflow-x: hidden;
        background-color: var(--extra);
        border: 3px inset var(--lightest);
        width: 37em;
        height: 16em;
        padding: 1em;
        font-size: .9em;
      }
      
      .relationship {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color: var(--darkest);
        width: 34em;
        height: 12em;
        margin: .2em;
        border: 3px double var(--lightest);
        border-radius: 5px;
        padding: .2em;
      }
      
      .relationship .desc {
        color: var(--lightest);
        font-size: .9em;
      }
      
      .relationship img {
        border: 1px solid var(--lightest);
        margin-right: 2em;
        margin-left: 1em;
        align-self: center;
        border-radius: 3px;
      }
      
      @keyframes squiggly-anim {
        0% {
        -webkit-filter: url("#squiggly-0");
              filter: url("#squiggly-0");
        }
        25% {
        -webkit-filter: url("#squiggly-1");
              filter: url("#squiggly-1");
       }
        50% {
        -webkit-filter: url("#squiggly-2");
              filter: url("#squiggly-2");
        }
        75% {
        -webkit-filter: url("#squiggly-3");
              filter: url("#squiggly-3");
        }
        100% {
        -webkit-filter: url("#squiggly-4");
              filter: url("#squiggly-4");
        }
      }
  
      #text {
        animation: squiggly-anim 0.5s linear infinite;
      }

    .svg-container {
      width: 0;
      height: 0;
      overflow: hidden;
      }

      #float {
        animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }

      @keyframes floating {
        0% { transform: translate(0,  0px); }
        50%  { transform: translate(0, 15px); }
        100%   { transform: translate(0, -0px); }    
      }
      
      #leftSidebar {
        order: -1;
      }
      
      main {
        order: 2;
      }
      
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
      font-family: Fredericka the Great;
      }
      
      h1,
      h2,
      h3 {
      text-align: center;
      }
      
      h1 {
        font-size: 2em;
        
      }
      
      h2 {
        font-size: 1.5em;
      }
      
      .side-info img {
        border: 3px double var(--lightest);
      }
      
      ul {
        padding-left: 20px;
      }
      
      #stampies {
        display: flex;
        flex-wrap: wrap;
      }
      
      .main-flex {
        display: flex;
      }

      #back-button {
        width: 1em;
        height: 1em;
        position: sticky;
        background-color: var(--extra);
        color: var(--darkest);
        top: 10px;
        margin-left: 10px;
        padding: .5em;
        border: 3px inset var(--lightest);
      }
      
      .full-body {
        margin-left: 3px;
      }