body {
        /* font-family: Comfortaa, sans-serif; */
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: #333;
        background-color: #E0D4AC;
        min-height: 100vh;
        min-width: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

    h2 {
      margin-top: 10px;
      margin-bottom: 10px;
    }

  #content {
    flex: 1;
    margin-top: 3%;
  }

  #content {
    width: 97%;
  }

  @media only screen and (min-width: 900px) {
    
    #content {
      width: 33%;
    }
  }

  .hovertext {
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
    display: none;
  }
  a:hover + span {
    display: inline;
  }

  @keyframes slideIn {
    0% {
      opacity: 0;
      transform: translate(0%, -15%);
    }
    100% {
      opacity: 1;
      transform: translate(0);
    }
  }
  .story {
    display: none;
  }
  :target{
    display: block;
  }
  :target li {
    opacity: 0;
    animation: slideIn 0.25s ease-out forwards;
  }
  :target p {
    opacity: 0;
    animation: slideIn 0.25s ease-out forwards;
  }

  :target li:nth-child(1) { animation-delay: 0.2s; }
  :target li:nth-child(2) { animation-delay: 0.4s; }
  :target li:nth-child(3) { animation-delay: 0.6s; }
  :target li:nth-child(4) { animation-delay: 0.8s; }
  :target li:nth-child(5) { animation-delay: 1s; }
  
  .expand {
    color:#333;
    text-decoration-color: blue;
  }

  .bold {
    font-weight: 120;
  }

  .blue {
    /* color:blue; */
    font-weight: normal;
    text-decoration: none ;
  }

  p.sign {
    font-family: 'Courier New', Courier, monospace;
  }