:root {
   --primary-color: #FDF1D5;
   --header-color: #333322;
   --window-color: #F0F0EE;
   --alt-window-color: #EAE5DE;
   --button-color: rgba(51, 51, 34, 0.25);
   --button-hover-color: rgba(51, 51, 34, 0.75);
   --button-text-color: #FDF1D5;
   --button-font: Arial, sans-serif;
   --button-font-weight: bold;
 }
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 body {
   position: relative;
   background-color: var(--primary-color);
   font-family: Arial, sans-serif;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   padding-bottom: 3em; /* Prevent content from being overlapped by footer */
 }
 nav {
   position: fixed;
   top: 5em;
   background-color: var(--header-color);
   min-height: 2.5em;
   width: 100%;
   text-align: center;
   color: var(--primary-color);
 }
 header {
   padding-top: 0.5em;
   display: flex;
   justify-content: space-between;
   font-family: "Comic Sans MS", cursive;
   position: fixed;
   top: 0;
   min-height: 5em;
   width: 100%;
   background-color: var(--header-color);
   color: var(--primary-color);
   text-align: center;
 }
 footer {
   padding: 0.25em;
   font-size: 0.75em;
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: var(--header-color);
   color: var(--primary-color);
   text-align: center;
 }
 main {
   display: flex;
   justify-content: center;
   text-align: justify;
   padding: 8.5em 2.5em 2.5em;
 }
 .window {
   display: flex;
   flex-direction: column;
   text-align: center;
   padding: 3em;
   margin: 3% auto;
   border-radius: 25px;
   min-height: 60vh;
   max-height: 60vh;
   width: 95%;
   max-width: 100%;
   background-color: var(--alt-window-color);
   box-shadow: 0 0 20px 10px var(--alt-window-color);
   overflow: auto;
 }
 .button-left, .button-right {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: absolute;
   top: 55%;
   transform: translateY(-50%);
   width: 5em;
   height: 5em;
   border-radius: 50%;
   background-color: var(--button-color);
   color: var(--button-text-color);
   font-weight: var(--button-font-weight);
   font-family: var(--button-font);
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 .button-left {
   left: 35px;
 }
 .button-right {
   right: 35px;
 }
 .button-left:hover, .button-right:hover {
   background-color: var(--button-hover-color);
 }
 .under-construction {
   position: fixed;
   bottom: 1.5em;
   width: 100%;
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   color: darkgray;
 }
 .img {
   text-align: left;
   width: 35%;
   min-height: 35vh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 .photo_frame {
   margin-bottom: 1.5em;
   border: solid white 0.75em;
   background-color: white;
   position: relative;
   width: 30%; /* Adjust as needed */
   height: 35vh; /* Adjust as needed */
   max-height: 35vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: top;
   border-radius: 15px;
 }
 .photo_pre {
   position: absolute;
   height: 75%;
   top: 0;
   width: 100%;
     padding-top: .25em;
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   z-index: 2; /* Higher value means it's on top */
 }
 .photo_text {
   position: absolute;
   height: 24%;
   justify-content: center;
   width: 100%;
   top: 76%;
   font-size: 0.9em;
   font-weight: bold;
   z-index: 1; /* Lower value means it's underneath */
 }
 .tree {
   text-align: left;
   width: 18%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 .container {
   display: flex;
   align-items: center; /* Align elements vertically */
   gap: 20px; /* Space between elements */
 }
 .block {
   flex: 1; /* Allows it to take up available space */
   text-align: justify;
   font-family: "Times New Roman", Times, serif;
   font-weight: bold;
   font-size: 1.5em;
   padding: 0.5em;
   min-height: 35vh;
 }