:root {
    --bgdarker: #ebe5d5; /* Use for body */
    --bg: #fcfcf0;      /* Use for main */
    --txt: #281e1e;     /* Use for text */
    --accent: #4a3432;  /* Use for asides and links */
    --accent2: #736b9b; /* Use for buttons */
    --accent3: #e07e3d; /* Use for buttons */
    --transbg: rgba(255, 255, 255, 0.8);
    --longcat: url(../images/orangOobie.png);

    --buttonRounded: 20px;
    }

 @font-face {
    font-family: "Balsamiq Sans";
    src: url(../fonts/BalsamiqSans-Regular.ttf) format("truetype"),
}

    body {
        font-family: "Balsamiq Sans";
        color: var(--accent3);
        padding-left: 3vw;
        padding-right: 3vw;
    }

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

    a:hover {
        text-decoration: wavy underline var(--accent3);

    }


/* CODE JANK? IDK */

            /*LIGHTBOX*/

        .lightbox {
          display: none;
          position: fixed;
          z-index: 999;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 0;
          left: 0;
          background: rgba(255, 255, 255, 0.8);
        }
        .lightbox img {
          max-width: 90%;
          max-height: 80%;
          margin-top: 2%;
        }
        .lightbox:target {
          outline: none;
          display: block;
        }

        /* GALLERY ITEMS */

          .gallery {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          
        }

        .gallery-item {
          border: 3px solid var(--secondarycolor);
          height: 120px;
          margin: 0.2vw;
          border-radius: 5px;
        }

        .gallery-item:hover {
          border: 3px solid var(--accentcolor);
          transition: 0.3s;
        }

        .gallery-item img {
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }