@import url('https://googledonts.private.coffee/css2?family=Lexend:wght@100..900&family=Wendy+One&display=swap');

    body {
      background-image: linear-gradient(328deg, rgb(138, 228, 215) 0%, rgb(209, 129, 239) 100%);
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;   
      color: #000000;
      font-family: 'Lexend', sans-serif;
      font-size: .95rem;
      font-weight: 300;
    }

    @media (max-width: 999px) {
      section#content {
        max-width: 90%;
        max-height: 80%;
      }

      header {
        max-width: 95%;
      }
    }

    @media (min-width: 1000px) {
      header {
        max-width: 36%;
      }

      section#content {
        width: 36%;
        height: 75%;
      }
    }

    h1,
    h1 a,
    h1 a:link,
    h1 a:visited,
    h1 a:hover {
      font-size: 6rem;
      color: #ffffff;
      font-family: 'Wendy One', system-ui;
      font-weight: normal;
      text-shadow: 4px 4px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, 4px 4px 0 #000, 4px 5px 0 #000;
      font-weight: 700;
      letter-spacing: -.2rem;
      margin-bottom: .25rem;
      margin-top: .1rem;
      text-decoration: none;
    }

    h2 {
      color: #000000;
      font-family: 'Wendy One', system-ui;
      font-size: 2.5rem;
      font-weight: normal;
      letter-spacing: -.05rem;
      margin-bottom: .25rem;
    }

    a, 
    a:link, 
    a:visited {
      color: #E432EC;
      font-weight: bold;
      text-decoration: underline;
    }

    a:hover {
      text-decoration: none;
    }

    header {
      text-align: center;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    nav {
      margin-bottom: 2%;
    }

    ul.nav-links {
      display: flex;
      list-style: none;
      background-color: #E432EC;
      justify-content: space-evenly;
      box-shadow: .3rem .3rem #9C009A;
      border: .2rem solid #9C009A;
      border-radius: .5rem;
      margin: 0;
      padding-top: .2rem;
      padding-bottom: .2rem;
      padding-left: .2rem;
      padding-right: .2rem;
    }

    li.link-item {
      display: inline;
    }

    li.link-item a, 
    li.link-item a:link, 
    li.link-item a:visited {
      color: #ffffff;
      font-weight: bold;
      border-radius: .25rem;
      text-decoration: none;
      padding: .2rem;
    }

    li.link-item a:hover {
      color: #fff;
      position: relative;
      top: .1rem;
    }

    section#content {
      background: #fff;
      box-shadow: .4rem .4rem #000000;
      border: .2rem solid #000000;
      border-radius: 2%;
      position: absolute;
      overflow-y: auto;
      margin: auto;
      left: 0; right: 0;
      text-align: center;
    }

    a.button,
    button[type="submit"] {
      background-color: #1FD4DF;
      padding: .4rem; 
      font-size: 1.5rem;
      font-family: 'Wendy One', system-ui;
      border-radius: .5rem;
      border: .2rem solid #008B9C; 
      box-shadow: .3rem .3rem #008B9C;
      text-decoration: none; 
      color: #ffffff; 
      font-weight: normal;
      text-transform: lowercase;
    }

    a.button:hover,
    button[type="submit"]:hover {
      background-color: #1FBDDF;
      border-color: #00779C;
      box-shadow: .2rem .2rem #00779C;
      position: relative;
      top: .1rem;
      left: .1rem;
    }

    a.arrow {
      text-decoration: none;
      font-size: 1.6rem;
      font-weight: 800;
    }

    a.arrow:hover {
      color: #000;
    }

    ul.site-map,
    ul.current-list,
    ul.faves-list {
      text-align: justify;
      list-style: square;
      width: 90%;
    }

    hr {
      border: .07rem dashed #000;
      width: 90%;
    }

    #content p {
      padding-left: 3%;
      padding-right: 3%;
      text-align: justify;
    }

    #content p.center {
      text-align: center;
    }

    #content p.recent-played-track {
      text-align: center !important;
      font-weight: bold;
    }

    table.links {
      width: 100%;
    }

    img.top-divider {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    img.profile {
      border: .2rem solid #911BD7;
      border-radius: 5%;
      box-shadow: .25rem .25rem #911BD7;
      margin-top: .8rem;
      height: 10rem;
    }

    img.mood {
      border: none;
      width: 11%;
      vertical-align: top;
    }

    img.emoji,
    img.web-button {
      vertical-align: middle;
    }

    img.random-site {
      vertical-align: top;
    }

    input[type="text"],
    input[type="email"],
    input[type="spam-test"],
    select,
    textarea {
      width: 90%;
      padding: .2rem;
      border: .2rem solid #ddd;
      border-radius: 4px;
    }

    td.category {
      width: 45%;
      font-weight: bold;
      text-align: right;
    } 

    td.url {
      width: auto;
      text-align: left;
      padding-left: .6rem;
    }

    img.bottom-divider {
      margin-top: 1rem;
      margin-bottom: 1.5rem;
    }

    footer {
      position: absolute;
      bottom: 1%;
      left: 0;
      right: 0;
      text-align: center;
      color: #FFFFFF;
    }