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

html, body {
  overflow-x: auto !important; /* allow sideways scroll on phones */
}
body {
  background-color: pink;
  color: black;
  font-family: Verdana;
  background-image: url("bg/heartpinkbg.gif");
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  min-width: 1024px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;          /* removes default spacing */
  font-weight: normal; /* removes bold if you want */
  font-size: 1em;      /* reset all to normal text size */
}
h1 { font-size: 32px; }  /* big title */
h2 { font-size: 24px; }    /* section title */
h3 { font-size: 19lx; }  /* subsection */
h4 { font-size: 16px; }
h5 { font-size: 13.5px; }
h6 { font-size: 11px; }
.container2 {
  display: grid;
  grid-template-columns: 100px 1fr 150px;
  gap: 10px;
  width: 1024px; /* fixed desktop width */
  margin: 0 auto;    /* center it on wide screens */
  width: 1024px !important;   /* lock grid to 1024px */
  margin: 0 auto !important;
  box-sizing: border-box;
  min-width: 1024px;
}
.header {
  grid-column: 1 / 4;
  background-color: lightyellow;
  background-image: url("bg/sakura.gif");
  border-style: double;
  padding: 10px;
  border-style: double;
  border-width: 3px;
}
.left {
  grid-column: 1;
  border-style: double;
  background-image: url("bg/patterntape.gif");
  padding: 10px;
  border-style: double;
  border-width: 3px;
}
.links {
  grid-column: 2;
  background-image: url("bg/patterntile.gif");
  border-style: double;
  border-width: 3px;
  gap: 5px;
  min-height: 50px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
a:link {
  color: palevioletred;      /* unvisited links */
}

a:visited {
  color: crimson;        /* visited links */
}

a:hover {
  color: deeppink;       /* hover color */
  text-decoration: underline; /* optional */
}

a:active {
  color: deeppink;         /* while clicking */
}
.links h4 {
  text-align: center;
  font-size: 20px;
  border-bottom-style: double;
  border-bottom-width: 3px;
  background-image: url("bg/bowsbows.gif");
  padding-top: 5px;
  padding-bottom: 3px;
}
.main, .submain{
  grid-column: 2;
  background-image: url("bg/kawaii.png");
  padding: 10px;
  border-style: double;
  border-width: 3px;
}
.right {
  grid-column: 3;
  background-image: url("bg/patterntape.gif");
  padding: 10px;
  border-style: double;
  border-width: 3px;
}
.footer {
  grid-column: 1 / 4;
  background-image: url("bg/kawaii.png");
  padding: 15px;
  border-style: double;
  border-width: 3px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.main a:link, .submain a:link    { 
  color: darkcyan; 
  background-color: rgba(255, 255, 255, 0.7); 
}
.main a:visited, .submain a:visited {
  color: mediumaquamarine; 
  background-color: rgba(255, 255, 255, 0.7);
}
.main a:hover, .submain a:hover   {
  color: aquamarine; 
  background-color: rgba(255, 255, 255, 0.7);
}
.main a:active, .submain a:active  {
  color: aquamarine; 
  background-color: rgba(255, 255, 255, 0.7);
}
.header3 {
  grid-column: 1 / 4;
  background-color: orange !important;
  border-style: double;
  padding: 10px;
  border-style: double;
  border-width: 3px;
}
.image-button {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 5px;
}
.image-button img {
  display: block;
  margin: 0 auto;
  position: fixed;
  left: 0;
  bottom: 0;
  transition: transform 0.3s ease;
  transform-origin: top center; /* Pivot from the top of the image */
  padding: 15px;
}
/* Hover animation */
.image-button:hover img {
  animation: wobble 2.5s infinite ease-in-out;
}
@keyframes wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
/* ==== DEBUG + Force horizontal scrolling: paste this at the END of style.css ==== */

/* allow smooth horizontal scrolling on phones */
html, body {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Visual debug: a border so you can immediately see the container width.
   Remove or comment out the outline after it's working. */
.container2 {
  outline: 4px dashed rgba(0, 120, 255, 0.6); /* debug only — remove later */
  background-clip: padding-box;
}

/* Force the layout to be at least desktop width and not shrink */
.container2 {
  width: 1024px !important;     /* fixed desktop-ish width */
  min-width: 1024px !important; /* ensure it never compresses smaller */
  max-width: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Make the three grid columns fixed for sidebars and flexible center */
.container2 {
  grid-template-columns: 220px 1fr 220px !important; /* increase sidebar width so text won't overflow */
}

/* Prevent sidebars from shrinking and force text wrapping inside them */
.left, .right {
  min-width: 220px !important;
  max-width: 220px !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  box-sizing: border-box;
}

/* Prevent images or other elements inside the container from forcing a weird reflow.
   Images will scale up to the container width instead of shrinking the grid down. */
.container2 img, .container2 video {
  max-width: none !important;
  height: auto !important;
}

/* Optional: make main content flexible but not collapse too small */
.main {
  min-width: calc(1024px - 440px - 20px) !important; /* 1024 - (left+right) - approx gap */
  box-sizing: border-box;
}

/* If any global rule elsewhere is forcing max-width:100%, undo it inside container */
.container2 * {
  max-width: none !important;
}