/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'CloisterBlack';
  src: url('https://bannerman.neocities.org/CloisterBlack.ttf');
}

body {
  background-color: black;
  color: white;
}

@media only screen and (max-width: 1080px) {
  /* Mobile-specific styles go here */
  #container {
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
  }
  #photo img {
    height: auto;
    width: 90%;
    
  }
  #photo {
    position: relative;
    margin: auto;
  }
      .scroll-box1 {
        width: 80vw; /* Optional: Define a width */
        height: 20vh; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        font-family: serif;
        margin-bottom: 2em;
        scrollbar-color: #868686 black;
    position: static;
    font-size: 15px;
    }
          .scroll-box2 {
        width: 80vw; /* Optional: Define a width */
        height: 20vh; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        font-family: serif;
        margin-bottom: 2em;
    position: static;
        scrollbar-color: #868686 black;
    font-size: 15px;
    }
          .scroll-box3 {
        width: 80vw; /* Optional: Define a width */
        height: 20vh; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        font-family: serif;
        margin-bottom: 2em;
    font-size: 15px;
    position: static;
        scrollbar-color: #868686 black;
    }
          .scroll-box4 {
        width: 80vw; /* Optional: Define a width */
        height: 20vh; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        font-family: serif;
    font-size: 15px;
        margin-bottom: 2em;
    position: static;
        scrollbar-color: #868686 black;
    }
    .title1, .title2, .title3, .title4 {
      font-size: 30px;
      font-family: 'CloisterBlack', serif;
      color: #868686;
    position: static;
    }
    .raven, .dog, .ghoul, .dog2 {
      visibility: hidden;
      width: 0;
      height: 0;
    position: static;
    }
    .raven, .dog, .ghoul, .dog2 img {
      visibility: hidden;
      width: 0;
      height: 0;
    position: static;
    }
  .text {
    position: relative;
    text-align: center;
    margin-top: -1em;
    margin-bottom: 0;
}
}
/* Styles for screens larger than or equal to 768px (tablets and desktops) */
@media only screen and (min-width: 1280px) {
  /* Desktop/tablet-specific styles go here */
  #container {
    height: 800px;
    width: 950px;
    margin: auto;
  }
  #photo img {
    height: auto;
    width: 90%;
  }
  #photo {
    text-align: center;
    margin: auto;
    position: fixed;
  }
      .scroll-box1 {
        width: 300px; /* Optional: Define a width */
        height: 100px; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        margin: auto;
        font-family: serif;
        margin-bottom: 2em;
        scrollbar-color: #868686 black;
        position: fixed;
        top: 10%;
        background-color: black;
        left: 33%;
        z-index: 0;
        text-align: justify;
    }
          .scroll-box2 {
        width: 300px; /* Optional: Define a width */
        height: 100px; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        margin: auto;
        font-family: serif;
        margin-bottom: 2em;
        scrollbar-color: #868686 black;
        position: fixed;
        top: 15%;
        background-color: black;
        left: 53%;
        text-align: justify;
    }
          .scroll-box3 {
        width: 300px; /* Optional: Define a width */
        height: 100px; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        margin: auto;
        font-family: serif;
        margin-bottom: 2em;
        scrollbar-color: #868686 black;
        position: fixed;
        top: 30%;
        left: 33%;
        background-color: black;
        text-align: justify;
    }
          .scroll-box4 {
        width: 300px; /* Optional: Define a width */
        height: 100px; /* Essential: Define a fixed height */
        border: 1px solid #868686; /* Optional: Add a border for visibility */
        overflow: auto; /* Enables scrolling when content overflows */
        padding: 10px; /* Optional: Add padding inside the box */
        margin: auto;
        font-family: serif;
        margin-bottom: 2em;
        scrollbar-color: #868686 black;
        position: fixed;
        top: 35%;
        left: 53%;
        background-color: black;
        text-align: justify;
    }
    .title1 {
      font-size: 35px;
      font-family: 'CloisterBlack', serif;
      margin-left: 2em;
      color: #868686;
      position: fixed;
      top: 7%;
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black;
    }
    .title2 {
      font-size: 35px;
      font-family: 'CloisterBlack', serif;
      margin-left: 16.5em;
      color: #868686;
      position: fixed;
      top: 12%;
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black;
    }
        .title3 {
      font-size: 35px;
      font-family: 'CloisterBlack', serif;
      margin-left: 2em;
      color: #868686;
      position: fixed;
      top: 27%;
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black;
    }
    .title4 {
      font-size: 35px;
      font-family: 'CloisterBlack', serif;
      margin-left: 16.5em;
      color: #868686;
      position: fixed;
      top: 32%;
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black;
    }
    .raven {
      position: fixed;
      top: 34%;
      left: 43%;
      z-index: 1000;
}
    .marquee-container {
      width: 100%;
      overflow: hidden;
      /* Optional: display: flex; if you have multiple items inside */
    }

    .marquee-content {
      display: inline-block; /* Or flex if using multiple items */
      white-space: nowrap;
      animation: scroll-left 20s linear infinite; /* Adjust duration and timing */
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%); /* Adjust based on content duplication and desired effect */
      }
    }
.dog {
      position: fixed;
top: 15%;
      z-index: 3000;
      left:43%;
}
.dog img {
        height: 120px;
      width: 120px;
}
.ghoul {
      position: fixed;
top: 20%;
      z-index: 3000;
      left:63.5%;
}
.ghoul img {
        height: 110px;
      width: 110px;
}
.dog2 {
      position: fixed;
top: 40%;
      z-index: 3000;
      left:63.5%;
}
.dog2 img {
        height: 120px;
      width: 110px;
}
.raven img {
        height: 100px;
      width: 100px;
}
.text {
visibility: hidden;
}
}