/* 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-color: #FFF3E8;
  background-image: url("Decor1.png");
  background-repeat: repeat;
  color: #D66A91;
  font-family: Verdana;
  text-align: center;
  font-weight: bold;
  
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

a {
  color: #FF9FBE;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #FF9AB8;
  text-decoration: underline;
}

a:link,
a:visited {
  color: #FF9FBE;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #FFBBD2;
  text-decoration: underline;
}

.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.image-row img {
  width: 100px;
  max-width: 100%;
  height: auto;
}

.image-row img:nth-child(2) {
  width: 500px;
}

.scroll-gallery {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 15px;
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;

  border: 3px solid #F5B2CD;
  border-radius: 12px;
  background-color: #FFF9F5;
}

.scroll-gallery img {
  height: 400px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 5px;
}

.link-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

.age-warning {
  background-color: #FFF9F5;
  border: 3px solid #F5B2CD;
  border-radius: 15px;
  padding: 30px;
  max-width: 550px;
  margin: 100px auto;
  text-align: center;
}

.age-buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
}

.age-buttons a {
  background-color: #FFE1EC;
  border: 2px solid #F5B2CD;
  border-radius: 10px;
  padding: 12px 25px;
  text-decoration: none;
}

.age-buttons a:hover {
  background-color: #FFC9DD;
}
.game-section {
  background-color: #FFF9F5;
  border: 3px solid #F5B2CD;
  border-radius: 15px;
  padding: 20px;
  max-width: 1100px;
  margin: 20px auto 50px;
}

.game-entry {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.game-entry img {
  width: 50%;
  height: auto;
  border-radius: 8px;
}

.game-comment {
  flex: 1;
  min-width: 0;
  background-color: #FFE9F0;
  border: 2px solid #F5B2CD;
  border-radius: 10px;
  padding: 15px;
  text-align: left;
}

.game-comment p {
  margin: 0;
}

@media (max-width: 600px) {
  .game-entry {
    flex-direction: column;
  }

  .game-entry img {
    width: 100%;
  }

  .game-comment {
    width: 100%;
    box-sizing: border-box;
  }
}
.likes-box {
  background-color: #FFF9F5;
  border: 4px solid #F5B2CD;
  border-radius: 20px;
  padding: 30px;
  max-width: 650px;
  margin: 40px auto;
  box-sizing: border-box;
}

.likes-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.likes-box li {
  margin: 15px 0;
}
.visitor-counter {
  background-color: #FFF9F5;
  border: 3px solid #F5B2CD;
  border-radius: 18px;
  padding: 20px;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  box-sizing: border-box;
}

.visitor-counter h2 {
  color: #D66A91;
  margin-top: 0;
}
.counter-window {
  width: 300px;
  height: 110px;
  overflow: hidden;
  margin: 0 auto;
}

.counter-window iframe {
  width: 300px;
  height: 110px;
  border: none;
}
.homepage-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;

  background-color: #FFF9F5;
  border: 3px solid #F5B2CD;
  border-radius: 18px;
  padding: 25px 35px;
  max-width: 600px;
  margin: 30px auto;
  box-sizing: border-box;
}
.art-accounts-box {
  background-color: #FFF9F5;
  border: 3px solid #F5B2CD;
  border-radius: 18px;
  padding: 25px 35px;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  box-sizing: border-box;
}

.art-accounts-box h2 {
  margin-top: 0;
}

.art-accounts-box ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.art-accounts-box li {
  margin: 15px 0;
}
.welcome-message {
  background-color: rgba(255, 249, 245, 0.88);
  border-radius: 30px;
  padding: 20px 35px;
  max-width: 1100px;
  margin: 30px auto;
  box-sizing: border-box;
  line-height: 1.8;
}

.welcome-message p {
  margin: 12px 0;
}
/* Cozy Corner photo layout */
.cozy-section .game-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.cozy-section .game-entry img {
  width: 45%;
  max-width: 450px;
  height: 300px;
  object-fit: contain;
  flex-shrink: 0;
}

.cozy-section .game-comment {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .cozy-section .game-entry {
    flex-direction: column;
  }

  .cozy-section .game-entry img {
    width: 100%;
    height: auto;
  }
}
/* Cozy Corner photo groups */
.cozy-section .cozy-photos {
  display: flex;
  gap: 10px;
  width: 55%;
  min-width: 0;
  overflow-x: auto;
  flex-shrink: 0;
  padding-bottom: 8px;
}

.cozy-section .cozy-photos img {
  width: 180px;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.cozy-section .game-comment {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .cozy-section .cozy-photos {
    width: 100%;
  }
}
/* COZY CORNER LAYOUT */

.cozy-section {
  width: 90%;
  max-width: 1100px;
  margin: 25px auto 50px;
  padding: 20px;
  box-sizing: border-box;
}

.cozy-section .game-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 25px;
  box-sizing: border-box;
}

.cozy-section .cozy-photos {
  display: flex;
  gap: 10px;
  width: 65%;
  min-width: 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.cozy-section .cozy-photos img {
  width: 350px;
  height: 300px;
  max-width: none;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 10px;
}

/* Single photos, like Maxie */
.cozy-section .game-entry > img {
  width: 45%;
  max-width: 450px;
  height: 280px;
  object-fit: contain;
  flex-shrink: 0;
}

.cozy-section .game-comment {
  flex: 1;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .cozy-section .game-entry {
    flex-direction: column;
  }

  .cozy-section .cozy-photos {
    width: 100%;
  }

  .cozy-section .game-entry > img {
    width: 100%;
    height: auto;
  }

  .cozy-section .game-comment {
    width: 100%;
  }
}