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

#logo {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 10px;
  margin-top: 10px;
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.game-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  padding: 40px 20px;
  /*box-sizing: border-box;*/
}

body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
}

/* Optional: remove max-width to let inner content center naturally */
#content {
  width: auto;
  margin: 0;
  padding: 0;
}

/* Specific backgrounds for each section */
#section-homm3 {
  background: url('/heroes-bg.png') repeat;
  background-position: -3px -3px;

}

#section-sims {
  background: url('/sims1bg.png') repeat;
  background-size: 600px;
}

#section-tt {
  background: linear-gradient(135deg, #121828, #6b1762);
}

/* Responsive dialog styling */
.homm3-box,
.sims1-dialog,
.tt-box {
  margin: 0 auto;
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
}


#content {
  width: 600px; 
  margin: 0 auto;
}

#games-list {
  position: relative;
  background: #fdfdfd;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  max-width: 600px;
  margin: 40px auto;
}

#newsletter {
  position: relative;
  border: 2px solid #0077cc;
  background-color: #f0f8ff;
  padding: 15px;
  border-radius: 10px;
  margin: 20px 0;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 600px;
}

.newsletter-content {
  display: flex;
  align-items: center;
}

.newsletter-flag {
  margin-right: 15px;
  flex-shrink: 0;
}

#newsletter a {
  color: #0077cc;
  text-decoration: none;
  font-weight: bold;
}

#newsletter a:hover {
  text-decoration: underline;
}
.homm3-box {
  background: url('/Heroes3LeatherBG.png') repeat;
  border: 48px solid transparent;
  border-image-source: url('Border-blue.png');
  border-image-slice: 48;
  border-image-width: 48px;
  border-image-repeat: stretch;
  border-image-outset: 0;

  padding: 20px;
  max-width: 500px;
  margin: 40px auto;
  font-family: 'Georgia', serif;
  color: #f2e3c6;
  position: relative;
  box-sizing: border-box;
  overflow: visible; /* important for floating outside */
}

.zealot-float {
  position: absolute;
  top: -110px; /* same as border width */
  right: -48px;
  width: 58px;
  pointer-events: none;
  z-index: 10;
}

.homm3-title {
  color: #f7de7b;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  margin: -10px -10px 20px -10px;
  font-family: 'Times New Roman', serif;
  font-size: 1.1em;
  letter-spacing: 1px;
}

/*.tt-box {*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*  background: linear-gradient(135deg, #121828, #6b1762);*/
/*  border: 2px solid #ffffff;*/
/*  padding: 20px;*/
/*  max-width: 500px;*/
/*  margin: 40px auto;*/
/*  font-family: 'Verdana', sans-serif;*/
/*  color: #ffffff;*/
/*}*/

.tt-box {
  position: relative;
  background: linear-gradient(135deg, #121828, #6b1762);
  border: 2px solid #ffffff;
  padding: 20px;
  max-width: 500px;
  margin: 40px auto;
  font-family: 'Verdana', sans-serif;
  color: #ffffff;
  overflow: visible; /* Let toodee overflow */
}

.tt-box-inner {
  position: relative;
  overflow: hidden; /* Only pig stays contained */
}


.pig-run {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 28px;
  animation: pig-run-across 12s infinite ease-in-out;
  transform: scaleX(1);
  pointer-events: none;
}

@keyframes pig-run-across {
  0% {
    left: 0;
    transform: scaleX(1);
  }
  49.9% {
    left: calc(100% - 26px);
    transform: scaleX(1);
  }
  50% {
    left: calc(100% - 26px);
    transform: scaleX(-1);
  }
  100% {
    left: 0;
    transform: scaleX(-1);
  }
}



.tt-title {
  background-color: transparent;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 1px;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 15px;
}

.tt-content p {
  margin-bottom: 1em;
  font-size: 1em;
  line-height: 1.6;
}

/* Topdee floating */
.topdee {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

/* Toodee gif on corner */
.edge-gif {
  position: absolute;
  top: -42px;
  right: -30px;
  width: 60px;
  pointer-events: none;
  z-index: 10;
}



.sims1-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #0e8c56;
}

.sims1-content p {
  font-size: 1em;
  line-height: 1.5;
}


.sims1-dialog {
  background: linear-gradient(to bottom, #00226d 0%, #001652 100%);
  color: white;
  font-family: 'Comic Sans MS', 'Comic Neue', sans-serif;

  /*font-family: 'Comic Sans MS', cursive, sans-serif;*/
  width: 400px;
  padding: 20px;
  display: flex;
  gap: 20px;
  border-radius: 2px;
  margin: 40px auto;
  
  /* Inner bevel */
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.2),
    inset -3px -3px 4px rgba(0, 0, 0, 0.6),
    
    /* Outer shadow */
    0 4px 8px rgba(0, 0, 0, 0.6);
}


.sims1-icon img {
  width: 64px;
  height: 64px;
}

.sims1-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;         /* center the title and button */
  text-align: left;            /* BUT... text stays left-aligned */
}

.sims1-text p {
  text-align: left;            /* ensures paragraph text is not centered */
  width: 100%;
}

.sims1-button {
  background: linear-gradient(to bottom, #01518c 0%, #01518c 100%);
  color: white;
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 28px;
  border: none;
  border-radius: 30px 6px 28px 5px;
  cursor: pointer;

  box-shadow:
    inset 0 3px 3px rgba(255, 255, 255, 0.5),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    1px 2px 3px rgba(0, 0, 0, 0.6);

  display: inline-block;
  margin-top: 12px;
}

.sims1-button:hover {
  filter: brightness(1.1);
}