/* 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." */

body {
  background-image: url('https://i.pinimg.com/736x/54/c2/c4/54c2c4644b774f7b33a4876586c7802d.jpg');
  background-size: 20%;
  background-color: white;
  color: black;
  font-family: "Trebuchet MS";
  width: 875px; /* The container will always be 1000 pixels wide */
  height: 590px; /* The container will always be 700 pixels high */
  margin: 0 auto;
  font-size: 1em;
  text-shadow: 0px 1px #fff;
  overflow-y: hidden;
}
.char-img button {
  position: absolute;
  top: 20%; /* Example: positions the button in the vertical middle */
  left: 20%; /* Example: positions the button in the horizontal middle */
}
.char_but:hover {
  transform: scale(1.05);
}
.char_but {
  border: none;
    outline: none;
    background: none; /* In case the button has a default background */
    padding: 0; /* Remove default button padding */
}

.story-img button {
  position: absolute;
  top: 63%; /* Example: positions the button in the vertical middle */
  left: 40%; /* Example: positions the button in the horizontal middle */
}
.art-img button {
  position: absolute;
  top: 100%; /* Example: positions the button in the vertical middle */
  left: 46%; /* Example: positions the button in the horizontal middle */
}
.comic-img button {
  position: absolute;
  bottom: 50%; /* Example: positions the button in the vertical middle */
  left: 53%; /* Example: positions the button in the horizontal middle */
}
.news-img {
  position: absolute;
  bottom: -10%; /* Example: positions the button in the vertical middle */
  left: 72%; /* Example: positions the button in the horizontal middle */
  
}
#flexiblediv {
  position: relative;
  width: 875px; /* The container will always be 1000 pixels wide */
  height: 20px; /* The container will always be 700 pixels high */
}
#artbutton {
 position:absolute;
  right:500px;
  top:135px;
}
#charbutton {
 position:absolute;
  left:35px;
  top:100px;
}
#comicbutton {
 position:absolute;
  left:495px;
  top:250px;
}
#storybutton {
 position:absolute;
  left:340px;
  top:310px;
}
#socialsbutton {
 position:absolute;
  left:540px;
  top:50px;
}
#newsbutton {
 position:absolute;
  left:620px;
  top:60px;
}
#twtbutton {
 position:absolute;
  left:700px;
  top:-90px;
}
.headimg {
  height: auto; /* Adjust the pixel value as needed */
  width: 600px;  /* Maintains aspect ratio */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#journal {
 position:absolute;
  top:-40px;
}
#art_text {
   position:relative;
    top:-80px;
    left:200px;
}
.arttxt {
  position:absolute;
  right: 500px;
  top: -300px;
  white-space: nowrap; /* Prevents text from wrapping to the next line */
}
#tabhome {
  background: url('https://gardenviewhigh.neocities.org/assets/tabhome.png') top right;
  bottom: 10px;
  position:relative;
}
.navtab {
  border: none;
  outline: none;
    background: none; /* In case the button has a default background */
    padding: 0; /* Remove default button padding */
  width: 60px;
  height: 60px;
  position: absolute;
  display: block;
  left: 850px;
  top: 100px;
  transition: 0.25s;
  transition-timing-function: ease-out;
}
.navtab:hover {
  width: 150px;
  transition: 0.25s;
  transition-timing-function: ease-out;
}
@media only screen and (max-width: 700px) {
#gallery {
  position: relative;
  overflow: auto;
  height: 80vh;
  margin-right: 50px;
  margin-top: 10vh;
}

  }
.gallery-container {
  position:absolute;
  width:830px;
  height: 350px;
  top:50%;
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap;
  justify-content: center; /* Center items in the container */
  overflow-y: scroll;
}

.gallery-item {
  padding:10px;
  margin-bottom: 90px;
  margin-top: 90px;
  max-height: 170px; max-width: 200px; 
  transition: filter 0.3s ease;
}

.gallery-item:hover {
 max-height: 25%; max-width: 25%; filter: brightness(50%);
}

.gallery-item img {
  width: 100%; /* Ensure images fill their container */
  height: auto; /* Maintain aspect ratio */
}
.description {
  padding: 0px;
  text-align: center;
}