.gboy-homebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  font-size: 36px;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: bold;
  
}

.gboy-homebar table {
  font-size: 32px;
  max-width: 700px;
  width: 100%;
  height: auto;
  text-align: left;
  margin-left: 80px;
}

.gboy-homebar a {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gboy-homebar :hover {
  color: #ff0000;
  transition: linear 0.2s;
}




/* gracious boy credit styles */

#gboy-credits {
  background: url('./images/gboy/creditsbackground.webp');
  background-size: cover;
}

#gboy-cast-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #CCFFFF;
  position: fixed;
  left: 40%;
  transform: translateX(-50%);
  bottom: 80px;
  width: 100%;
  z-index: 10;
  text-shadow: 0 4px 12px #000, 0 2px 8px #ffbaff;
}

#gboy-crew-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #CCFFFF;
  position: fixed;
  left: 60%;
  transform: translateX(-50%);
  bottom: 130px;
  width: 100%;
  z-index: 10;
  text-shadow: 0 4px 12px #000, 0 2px 8px #ffbaff;
}

#gboy-credits-gifs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px auto;
  max-width: 1600px;
}

#gboy-credits-biggif {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

@media (max-width: 600px) {
  #gboy-credits {
    background-size: cover;
    background-position: center center;
    background-size: 100vw 100vh;
  }
  #gboy-cast-credits,
  #gboy-crew-credits {
    position: static;
    max-width: 100vw;
    width: 100%;
    padding: 8px;
    left: unset;
    transform: unset;
    bottom: unset;
    font-size: 16px;
    text-align: center;
  }
  #gboy-credits-gifs {
    gap: 8px;
    max-width: 100vw;
  }
  #gboy-credits-biggif {
    margin-bottom: 16px;
  }
}

/* sackhead styles */

#sackhead-credits-body {
  background: url('./images/credits/sackhead-credits.gif') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}


#sackhead-crew-credits {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #CC0033;
position: fixed;
left: 62%;         /* Move horizontally (e.g. 60% from left edge) */
transform: translateX(-55%); /* Center horizontally based on left */
bottom: 0px;     /* Move vertically (e.g. 130px from bottom) */
width: 100%;
font-family: "Eater", serif;
font-weight: 400;
font-size: 17px;
  text-shadow: 0 8px 12px #33FFFF, 0 2px 8px #bafff7;
}

#sackhead-cast-credits {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #CC0033;
position: fixed;
left: 62%;         /* Move horizontally (e.g. 60% from left edge) */
transform: translateX(-55%); /* Center horizontally based on left */
bottom: 300px;     /* Move vertically (e.g. 130px from bottom) */
width: 100%;
font-family: "Eater", serif;
font-weight: 400;
font-size: 17px;
  text-shadow: 0 8px 12px #33FFFF, 0 2px 8px #bafff7;
}

/* banana kombat styles */

#banana-kombat-credits-body {
  background: url('./images/credits/banana-kombat-credits.gif') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}


#banana-kombat-cast-credits {
  display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #ffffff;
position: fixed;
left: 40%;         /* Move horizontally (e.g. 60% from left edge) */
transform: translateX(-55%); /* Center horizontally based on left */
bottom: 500px;     /* Move vertically (e.g. 130px from bottom) */
width: 100%;
font-family: "Special Gothic Expanded One", sans-serif;
font-weight: 400;
font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;

}

#banana-kombat-crew-credits {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #ffffff;
position: fixed;
left: 68%;         /* Move horizontally (e.g. 60% from left edge) */
transform: translateX(-55%); /* Center horizontally based on left */
bottom: 500px;     /* Move vertically (e.g. 130px from bottom) */
width: 100%;
font-family: "Special Gothic Expanded One", sans-serif;
font-weight: 400;
font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;
}

@media (max-width: 600px) {
  #banana-kombat-credits-body {
    background-size: cover;
    background-position: center center;
    background-size: 100vw 100vh;
  }
  #banana-kombat-cast-credits,
  #banana-kombat-crew-credits {
    position: static;
    max-width: 95vw;
    width: 100%;
    padding: 10px;
    left: unset;
    transform: unset;
    bottom: unset;
    font-size: 14px;
    text-align: left;
  }
}

/* twitch streamer styles */

#twitch-streamer-credits-body {
  background: url('./images/credits/twitch-streamer-credits.gif') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

#twitch-streamer-crew-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 80%;
  transform: translateX(-55%);
  bottom: 500px;
  width: 100%;
  font-family:'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;
}

#twitch-streamer-cast-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 80%;
  transform: translateX(-55%);
  bottom: 300px;
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;
}

@media (max-width: 600px) {
  #twitch-streamer-credits-body {
    background-size: fill;
    background-position: 20% 40%;
    background-size: 300vw 150vh;
  }
  
  #twitch-streamer-crew-credits {
    position: static;
    max-width: 95vw;
    width: 100%;
    padding: 10px;
    transform: translateY(60%);
    text-align: left;
  }

  #twitch-streamer-cast-credits {
    position: static;
    max-width: 95vw;
    width: 100%;
    padding: 10px;
   transform: translateY(50%);
    font-size: 16px;
    text-align: left;
  }
}

/* spanish profanities club styles */

#spanish-profanities-club-credits-body {
  background: url('./images/credits/spanish-profanities-club-credits.gif') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

#spanish-profanities-club-cast-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 75%;
  transform: translateX(-55%);
  bottom: 500px;
  width: 100%;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;
}

#spanish-profanities-club-crew-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 100%;
  transform: translateX(-55%);
  bottom: 500px;
  width: 100%;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: 17px;
  text-shadow: 0 4px 12px #000000, 0 2px 8px #bafff7;
}

@media (max-width: 600px) {
  #spanish-profanities-club-credits-body {
    background-size: cover;
    background-position: 15% 20%;
    background-size: 500vw 200vh;
  }
  #spanish-profanities-club-cast-credits,
  #spanish-profanities-club-crew-credits {
    position: static;
    max-width: 95vw;
    width: 100%;
    padding: 10px;
    left: unset;
    transform: unset;
    bottom: unset;
    font-size: 14px;
    text-align: left;
  }
}

/* hans on with mr hans styles */

#hans-on-credits-body {
  background: url('./images/credits/hans-on-credits.gif') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

#hans-on-cast-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 60%;
  transform: translateX(-55%);
  bottom: 435px;
  width: 100%;
  font-family: Impact, sans-serif;
  font-weight: 200;
  font-size: 24px;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 16px #000,
    0 0 8px #000,
    0 0 4px #000,
    0 0 2px #000;
}

#hans-on-crew-credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 84%;
  transform: translateX(-55%);
  bottom: 500px;
  width: 100%;
  font-family: Impact, sans-serif;
  font-weight: 200;
  font-size: 24px;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 16px #000,
    0 0 8px #000,
    0 0 4px #000,
    0 0 2px #000;
}

/* the deal styles */

#the-deal-credits-body {
  background: url('./images/credits/the-deal-credits-background.webp') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

#the-deal-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  width: 100%;
  font-size: 48px;
}

@media (max-width: 600px) {
  #the-deal-credits-body {
    background-size: cover;
    background-position: center center;
    background-size: 100vw 100vh;
  }
  #the-deal-credits {
    position: static;
    max-width: 100vw;
    width: 100%;
    padding: 8px;
    left: unset;
    transform: unset;
    bottom: unset;
    font-size: 18px;
    text-align: center;
  }
}

/* sophonisba styles */
#sophonisba-credits-body {
  background: url('./images/credits/sophonisbacredits2.webp') no-repeat center center;
        background-repeat: repeat;
        background-size: auto;
  min-height: 100vh;
}
#sophonisba-credits {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: 50px;
  max-width: 800px;
  padding: 20px;
  color: #ffffff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  width: 100%;
  font-size: 48px;
}
@media (max-width: 600px) {
  #sophonisba-credits-body {
    background-size: cover;
    background-position: center center;
    background-size: 100vw 100vh;
  }
  #sophonisba-credits {
    position: static;
    max-width: 100vw;
    width: 100%;
    padding: 8px;
    left: unset;
    transform: unset;
    bottom: unset;
    font-size: 18px;
    text-align: center;
  }
}