body {
    font-size: 18px;
    line-height: 1.3;
    max-width: 800px;
    margin: 10px auto;
    padding: 0 20px;
    background-color: #f9f9f9;
    color: #333;
}

.week-button {
  width: 30px;               
  height: 90px;              /* 3:6 ratio */
  background-color: black;
  color: white;
  font-family: Georgia, serif;
  font-style: italic;         /* italic text */
  font-size: 10px;
  writing-mode: vertical-rl;  /* vertical text */
  text-orientation: upright;
  text-decoration: none;      /* no underline */
  white-space: nowrap;        /* never break into multiple lines */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: crosshair;
  border-radius: 0px;
  animation: breathing-button 6s ease-in-out infinite; /* whole button breathes */
  transition: background-color 0.3s ease;
}

.week-button:hover {
  background-color: #222;
  text-decoration: none;   /* prevent underline on hover */
}


/* Breathing animation: scale entire button */
@keyframes breathing-button {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}


/* Left side (1/5 of page width) */
#w1  { top: 12%; left: 9%; }
#w2  { top: 22%; left: 18%; }
#w3  { top: 32%; left: 12%; }

/* Right 2/3 of page */
#w4  { top: 10%; left: 42%; }
#w5  { top: 15%; left: 65%; }
#w6  { top: 28%; left: 50%; }
#w7  { top: 18%; left: 88%; }
#w8  { top: 30%; left: 58%; }
#w9  { top: 20%; left: 72%; }
#w10 { top: 34%; left: 47%; }
#w11 { top: 26%; left: 80%; }
#w12 { top: 14%; left: 95%; }


header {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, 'Libre Franklin', sans-serif;
  font-weight: 600;   /* SemiBold */  font-size: 25px;
  text-align: left;
  padding: 0;
  margin-top: 50px;
  margin-bottom: 0;
}

hr {
    font-family: 'Times New Roman', Times, serif;
    margin: 1em;
}

.section-header {
  font-size: 150%;
  font-style: italic !important;
  text-align: left;
  margin: 30px auto;
  padding-bottom: 5px;
  padding-top: 5px;
  max-width: 700px;
}


main {
  padding-bottom: 60px;  /* breathing room at bottom */
}

p {
  margin-top: 0.2em;
  margin-bottom: 1.9em;
}

/* Footer with full-width image */
footer.monolith-footer {
  background: url("./images/week 1/Image-Website.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  min-height: 40vh;      /* responsive height */
  margin-top: 40px;
  margin-bottom: 60px;
}

.centered-text {
  max-width: 700px;    /* your text width */
  margin: 0 auto;
  text-align: left;
}



img {
    max-width: 80%;
    height: auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 50px;
}


/* Top bar (nav) spans full width */
.topbar {
  font-size: 16px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: lighter;
  text-align: left;
  padding: 10px 20px;
  width: 100%;
}

.topbar a {
    text-decoration: none;
    color: rgb(0, 0, 255);
    margin: 0 5px;
}

.topbar a:hover {
    color: rgb(0, 255, 0);
    text-decoration: underline;
}

.topbar .name {
    color: rgb(0, 0, 0);
    font-weight: bold;
}

/* Shared style for all sub-pages (about, field, weeks, etc.) */
.centered-text {
  text-align: left;   /* text lines centered */
  margin: 20px auto;    /* block itself centered */
  max-width: 700px;     /* readable width */
}

.redacted-text {
    text-align: left;
    color: grey;
    margin: 10px auto;
    max-width: 700px;   /* keep it narrower for readability */

}
a {
  color: blue;            /* matches surrounding text by default */
  text-decoration: none;     /* remove underline */
}

a:hover {
  color: rgb(0, 255, 0);              /* turn green on hover */
  text-decoration: underline; /* optional underline on hover */
}

.image-wrapper {
  position: relative;   /* buttons now position relative to the image */
  max-width: none;      /* remove body constraint */
  width: 100%;          /* stretch full width */
  margin: 0;
  padding: 0;
}

.image-wrapper img {
  max-width: none;      /* remove body constraint */
  display: block;
  width: 100%;  !important        /* make image span full width of screen */
  height: auto;
}



.button-one {
    position: absolute;
    bottom: 35%;
    left: 5%;
    width: 10px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    align-items: center;    /* vertical center */
    display: flex;
    justify-content: center;
}

.button-one:hover {
    background-color: blue;
    cursor: crosshair;
}

.button-two {
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 10px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    transition: 0.2s ease-in-out;
    cursor: pointer;
    align-items: center;    /* vertical center */
    display: flex;
    justify-content: center;
}


.button-two:hover {
    background-color: blue;
    transform: scale(1.5);
    cursor: crosshair;
}

.button-three {
    position: absolute;
    bottom: 20%;
    left: 65%;
    width: 10px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    align-items: center;    /* vertical center */
    display: flex;
    justify-content: center;
}

.button-three:hover {
    background-color: blue;
    cursor: crosshair;
}

.button-four {
    position: absolute;
    bottom: 12%;
    left: 35%;
    width: 10px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    align-items: center;    /* vertical center */
    display: flex;
    justify-content: center;
}

.button-four:hover {
    background-color: blue;
    cursor: crosshair;
}



@keyframes rotating {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

.rotating {
    animation: rotating 4s linear infinite;
    animation-direction: alternate-reverse;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-wrapper iframe {
  position: left;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.video-embed {
  width: 100%;          /* make it narrower than the text */
  max-width: 800px;    /* prevent it from growing too big */
  height: 300px;       /* set proportional height */
  display: block;
  margin: 20px auto;   /* center it with breathing room */
}



h2.section-header {
  font-style: italic;
  font-size: 150%;
}

.image-row {
  display: flex;       /* put items in a row */
  justify-content: center; /* center them horizontally */
  gap: 20px;           /* space between images */
  max-width: 1500px;    /* your text width */
  margin: 0 auto;
  }


.image-row img {
  max-width: 35%; !important;     /* each takes less than half the space */
  height: auto;        /* keep aspect ratio */
  display: inline-block !important;
}