/* 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: #499f24;
  background-image: url('../images/Green_Gingham.jpg');
  background-size:200px,200px;
  font-size: 18px;
  font-family: Georgia;
  margin: 0;
  cursor: url('../images/Cursor_Open.png') 16 0, auto;
}

a:hover,
button:hover,
.gallery-item img:hover,
.lightbox-arrow:hover ,
#lightbox-close:hover {
  cursor: url('../images/Cursor_Clickable.png') 16 0, pointer;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
  border: solid #c7b591;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

/* unvisited link */
a:link {
  color: #24598f;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: #b36217;
}

/* selected link */
a:active {
  color: blue;

}

h1, h2, h3, h4, h5 {
  font-family: Georgia;
  color: #8f4024;
}

marquee {
            color: #00ff00; /* Lime Green */
            font-weight: bold;
            font-family: "Courier New", Courier, monospace;
            background: #000;
            padding: 2px;
        }
        
.title-row {
  display: flex;
  align-items: center;   /* vertically centers image + text */
  justify-content: center; /* centers whole block */
  gap: 10px; /* space between image and text */
  margin-bottom:0;
}

.title-row img {
  width: 80px;
  height: 80px;
}

.blog-title-row {
  color: black;
  display: flex;
  align-items: center;   /* vertically centers image + text */
  justify-content: center; /* centers whole block */
  gap: 10px; /* space between image and text */
}

.blog-title-row img {
  width: 30px;
  height: 30px;
}

.guestbook-btn {
  position: absolute;
  top: 15px;   /* tweak this */
  right: -20px; /* tweak this */

  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.guestbook-btn img {
  width: 120px;
  transition: transform 0.2s ease;
}

.guestbook-btn:hover img {
  transform: scale(1.1);
}

/* LABEL (ABOVE) */
.guestbook-label {
  position: absolute;
  bottom: 100%;              /* puts it above the image */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  font-size: 0.9em;
  white-space: nowrap;
  color: white;
  text-shadow:
    1px 1px 0 #8f4024,
    -1px 1px 0 #8f4024,
    1px -1px 0 #8f4024,
    -1px -1px 0 #8f4024;

  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* SHOW ON HOVER */
.guestbook-btn:hover .guestbook-label {
  opacity: 1;
}

.rainbow-title span:nth-child(4n+1) { color: #24598f; } /* blue */
.rainbow-title span:nth-child(4n+2) { color: #c62626; } /* red */
.rainbow-title span:nth-child(4n+3) { color: #499f24; } /* green */
.rainbow-title span:nth-child(4n+4) { color: #8f4024; } /* brown */

/* GRID (3 columns like Instagram) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gallery-item {
  width: 100%;
  padding-top: 100%; /* makes a perfect square */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.gallery-item img:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.mascot {
  position: absolute;
  height: auto;
  transition: transform 0.2s ease;
}

/* Homepage mascot */
.mascot-home {
  left: -120px;
  top: 220px;
  width: 200px;
}

/* Archive mascot */
.mascot-archive {
  right: -80px;
  top: 180px;
  width: 200px;
}

/* Gallery mascot */
.mascot-gallery {
  left: -150px;
  top: 250px;
  width: 200px;
}

/* About mascot */
.mascot-about {
  right: -80px;
  top: 220px;
  width: 180px;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 70px;
  height: auto;

  max-width: none;   /* Large hands fix*/
  max-height: none;  

  cursor: pointer;
  z-index: 1000;
}

/* Left hand */
#lightbox-prev {
  left: 5px;
}

/* Right hand */
#lightbox-next {
  right: 5px;
}

/* Hover effect (optional, cute!!) */
.lightbox-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}


/* LIGHTBOX (popup) */
#lightbox {
  display: none;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Instead of fixed 80vw/80vh */
  max-width: calc(100vw - 192px);  /* 96px left + right */
  max-height: calc(100vh - 60px);  /* ~30px top + bottom */

  background: rgba(0, 0, 0, 0.85);

  padding: 30px 96px; /* top/bottom | left/right */
  flex-direction: column;
  align-items: center;

  z-index: 999;
}

#lightbox img:not(.lightbox-arrow) {
  max-width: 100%;
  max-height: calc(100vh - 140px); 
  /* leaves space for padding + caption */

  object-fit: contain;
}

#lightbox-caption {
  color: white;
  margin-top: 10px;
  text-align: center;
  max-width: 100%;
}

#lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  position: relative;
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #f1e3c9;
  color: #151515; 
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
  text-align: center;
  align-items:center;
  
}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header {
  background-color: #c62626;
  padding: 0 5%;
  border-color: #a9a9a9;
  border-style: ridge;
  border-width: 0 0 4px 0;
  text-align: center;
  font-family: Georgia;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/* ===== ANIMATIONS ===== */

/* Jump animation (homepage) */
@keyframes jump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

/* Wiggle animation (archive) */
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(-5deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

/* Bounce animation (gallery) */
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-20px); }
  60%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* Spin (about page, just for fun) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== MASCOT HOVER ANIMATIONS ===== */

/* Homepage mascot → jump */
.mascot-home:hover {
  animation: bounce 0.4s ease infinite;
}

/* Archive mascot → wiggle */
.mascot-archive:hover {
  animation: wiggle 0.5s ease;
}

/* Gallery mascot → bounce */
.mascot-gallery:hover {
  animation: bounce 0.4s ease infinite;
}

/* About mascot → spin */
.mascot-about:hover {
  animation: wiggle 0.6s linear;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}