/* Variables. */
:root {
    --background: url("media/clover-background.jpg");
    --text-color1: #278b52;
    --text-color: black;
    --link-color: #6e8900;
    --link-hover-color: black;
    --body-font: sans-serif;
   --title-font: serif;
}

/* General */

body {
  background-image: var(--background);
  background-size: cover;       /* scales to cover screen */
  background-repeat: no-repeat; /* no tiling */
  background-position: center;  /* keep it centered */
  background-attachment: fixed; /* stays in place while scrolling */
  color: var(--text-color);
  font-family: var(--body-font);
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover-color);
}

#container {
  max-width: 1000px;
  margin: 2em auto;             /* centers content with space */
  padding: 2em;
  background-color: white;      /* solid white background */
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* subtle shadow like a page */
  border-radius: 8px;           /* optional: rounded corners */
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
}
code {
  background-color: #eee;
  word-break: break-all;
  white-space: pre-wrap;
}
  
/* Header */

#title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--text-color1);
  font-family: var(--title-font);
    font-size: 2rem;  /* makes the title bigger */

}
#title a, .title-text a, .title-nav a {
  color: var(--text-color1)!important;
}
.title-arrow {
  transition: 0.2s;
}
#description-toggle, .description {
  display: none;
}
#description-toggle:checked ~ .description {
  display: block;
}
#description-toggle:checked ~ * .title-arrow {
  transform: rotate(-180deg);
}
hr {
  border-top: 1px solid var(--text-color);
  border-bottom: none;
  margin: 1em 0;
}

/* Gallery Layout */
 
#gallery {
  display: grid;
  width: 100%;
  gap: 1em;
  grid-template-columns: repeat(3, 1fr);
}
#gallery a {
  color: var(--text-color);
  opacity: 1;
  transition: 0.5s all;
  display: grid;
  gap: 1em;
  align-items: flex-start;
}
#gallery a:hover {
  opacity: 0.75;
}
.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-image {
  line-height: 0;
  aspect-ratio: 1/1;
}
.item-title {
  text-align: center;
  font-size: 0.9rem;
}

/* Page Layout */

#page, #page-flipped, #two-column, #three-column, #page-about, #page-project {
  display: grid;
  gap: 1em;
}
#page-about .img-container {
  display: grid;
  justify-content: center;
  align-items: center;
}
#page-about .caption {
  text-align: left;
}
#page {
  grid-template-columns: 2fr 1fr;
}
#page-flipped {
  grid-template-columns: 1fr 2fr;
}
#two-column {
  grid-template-columns: repeat(2, 1fr);
}
#three-column {
  grid-template-columns: repeat(3, 1fr);
}
#two-column, #three-column {
  justify-content: center;
  align-items: center;
}
#page-about, #page-project {
  grid-template-columns: 1fr 1.5fr;
}
.img-container {
  width: 200px;   /* or any size you want */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops instead of squishing */
}


.page-divider {
  display: none;
  margin-top: 0;
}
.caption-always-centered {
  text-align: center;
}
.caption-always-left {
  text-align: left;
}
.caption-always-right {
  text-align: right;
}
#page-flipped .caption {
  text-align: right;
}
footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

/* Mobile */

@media (max-width:700px) {
  #gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-divider {
    display: block;
  }
  #page .caption, #page-flipped .caption {
    text-align: center;
  }
  #page, #page-flipped, #page-about, #page-project, #three-column, #two-column {
    grid-template-columns: 1fr;
  }
}