@import url('https://waps.l3s.uni-hannover.de/live/cs_/https://fonts.googleapis.com/css2?family=Creepster&family=Lexend:wght@100..900&display=swap');

    body {
      background-image: linear-gradient(328deg, rgb(233, 52, 240) 0%, rgb(234, 67, 135) 100%, rgb(0, 212, 255) 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: 5.5rem;
      color: #ffffff;
      font-family: 'Creepster', system-ui;
      font-weight: normal;
      letter-spacing: -.05rem;
      text-shadow: .3rem .2rem 0 #000, -.1rem .2rem 0 #000, 0 -.1rem 0 #000, .1rem -.2rem 0 #000, .1rem .2rem 0 #000, .2rem .3rem 0 #000;
      margin-bottom: .25rem;
      margin-top: .1rem;
      text-decoration: none;
    }

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

    a, 
    a:link, 
    a:visited {
      color: #A8007E;
      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;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }

    li.link-item {
      display: inline;
    }

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

    li.link-item a:hover {
      background-color: #ffffff;
      color: #000000;
    }

    section#content {
      background-color: #ffffff;
      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 {
      background-color: #000000;
      padding: .4rem; 
      font-size: 1.5rem;
      border-radius: .25rem; 
      text-decoration: none; 
      color: #ffffff; 
      font-weight: bold;
    }

    a.button:hover {
      background-color: #222222;
      position: relative;
      top: .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: .1rem solid #000000;
      width: 90%;
    }

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

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

    table.links {
      width: 100%;
    }

    img.top-divider {
      margin-top: .8rem;
      max-width: 85%;
    }

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

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

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

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

    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: .8rem;
      margin-bottom: .8rem;
      max-width: 85%;
    }

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