body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-image: url('https://vampireapologist.neocities.org/images/borders_and_backgrounds/bg24.jpg');
      background-size: cover;
      image-rendering: cover;
      background-attachment: fixed;
  }

  h2 {
      font-family: fantasy;
      /*"Jacquard 24", sans-serif;*/
      font-size: 40px;
      color: #e25555;
      text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
      text-align: center;
      margin-bottom: 20px;
  }

  img {
      width: 100%;
      height: auto;
  }

  h2::before,
  h2::after {
      content: "";
  }


  a {
      text-decoration: none;
      color: #000000;
      font-size: 20px;
      text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
      background-color: #ffffff;
      border: 1px solid black;
      padding: 5px;
      border-radius: 25px;
  }



  .container {
      border: 1px solid black;
      width: 700px;
      background-color: rgba(255, 255, 255, 0.534);
      padding: 20px;
      margin: auto;
  }




  .blog-page {
      display: block;
      /* hide all by default */
      margin-bottom: 40px;
  }


  .blog-page h2 {
      font-family: fantasy;
      /*"Jacquard 24", sans-serif;*/
      font-size: 30px;
      color: #e25555;
      text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
      text-align: center;
  }

  .blog-page h2::before,
  .blog-page h2::after {
      content: "";
  }


  .blog-page p {
      background-image: linear-gradient(rgb(82, 134, 76), rgb(72, 72, 122));
      color: transparent;
      background-clip: text;
      font-size: 20px;

  }

  li {
      font-size: 20px;
      list-style-type: none;
  }

  .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-top: 20px;
  }

  .pagination button {
      padding: 8px 14px;
      cursor: pointer;
      color: aliceblue;
      border: 1px solid #333;
      background: #000000;
  }

  .page-number {
      font-weight: bold;
  }


  footer {
      text-align: center;
      margin-top: 20px;
      padding: 0px;
      color: #440d0d;
      background: #00000000;
  }

  @media (max-width: 768px) {

      h2,
      .blog-page h2 {
          font-size: 1.3rem;
          text-align: center;
          margin: 0px;
      }

      h2::before,
      h2::after {
          content: " ";
      }

      .page-number {
          font-size: .5rem;
      }

      @media (max-width: 800px) {
          .container {
              width: auto;
          }
      }


  }