@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Quicksand:wght@400;600&display=swap');

   body {
     text-align: center;
     background: linear-gradient(to bottom, #fbe8c6, #f7d49e, #f2b86a);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
     overflow-x: hidden;
     position: relative;
     min-height: 100vh;

     background: linear-gradient(to bottom, #fff7e1, #fbe4b2, #f6c676);
     color: #4b2e05;
     font-family: 'Quicksand', sans-serif;
     margin: 0;
     overflow-x: hidden;
     position: relative;

     -webkit-user-select: none;
     /* Chrome, Safari */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* IE/Edge */
     user-select: none;
     /* Standard */

   }

   /* Or just for your letters */
   #letters-container {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }

   h1 {
     cursor: pointer;
   }

   a {
     font-family: 'Marcellus', serif;
     color: #4b2e05;
   }

   a:hover {
     color: #774908;
   }

   /* Headings with elegant serif font */
   h1,
   h2,
   h3 {
     font-family: 'Marcellus', serif;
     color: #8b4513;
     text-align: center;
     text-shadow: 1px 1px 3px rgba(120, 60, 10, 0.2);
     margin-top: 20px;
   }

   /* FALLING LEAVES ANIMATION */
   .leaf-1 {
     position: fixed;
     top: -100px;
     width: 64px;
     height: 64px;
     background: url('leaf-1.png') no-repeat center / contain;
     opacity: 0.8;
     animation: fall linear infinite;
     z-index: 0;
     color: black;
     font-family: 'Marcellus', serif;
     font-size: 36px;
     cursor: pointer;
   }

   .leaf-2 {
     position: fixed;
     top: -100px;
     width: 64px;
     height: 64px;
     background: url('leaf-2.png') no-repeat center / contain;
     opacity: 0.8;
     animation: fall linear infinite;
     z-index: 0;
     color: black;
     font-family: 'Marcellus', serif;
     font-size: 36px;
     cursor: pointer;
   }

   .leaf-3 {
     position: fixed;
     top: -100px;
     width: 64px;
     height: 64px;
     background: url('leaf-3.png') no-repeat center / contain;
     opacity: 0.8;
     animation: fall linear infinite;
     z-index: 0;
     color: black;
     font-family: 'Marcellus', serif;
     font-size: 36px;
     cursor: pointer;
   }

   .leaf-4 {
     position: fixed;
     top: -100px;
     width: 64px;
     height: 64px;
     background: url('leaf-4.png') no-repeat center / contain;
     opacity: 0.8;
     animation: fall linear infinite;
     z-index: 0;
     color: black;
     font-family: 'Marcellus', serif;
     font-size: 36px;
     cursor: pointer;
   }

   .leaf-1,
   .leaf-2,
   .leaf-3,
   .leaf-4 {
     border: 2px solid transparent
   }

   .leaf-1:hover,
   .leaf-2:hover,
   .leaf-3:hover,
   .leaf-4:hover {
     border: 2px solid transparent;
   }

   @keyframes fall {
     0% {
       transform: translateX(0) rotate(0deg);
       top: -100px;
       opacity: 0.9;
     }

     50% {
       transform: translateX(50px) rotate(180deg);
       opacity: 0.8;
     }

     100% {
       transform: translateX(-50px) rotate(360deg);
       top: 110vh;
       opacity: 0.7;
     }
   }

   /* Responsive autumn gallery */
   #gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 2px;
     padding: 10px;
     /* background: linear-gradient(180deg, #fff7e6, #fbe5c8, #f4d1a1); */
     background-color: transparent;
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(120, 60, 10, 0.2);
     max-width: 1000px;
     margin: 40px auto;
     position: relative;
     z-index: 2;
   }

   #gallery img {
     width: 75px;
     height: auto;
     border-radius: 12px;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     background: #fff8f0;
     padding: 4px;
     box-shadow: 0 2px 6px rgba(120, 70, 20, 0.2);
   }

   #gallery img:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 14px rgba(150, 80, 20, 0.35);
     background: #ffefdb;
     cursor: pointer;
   }

   ul,
   li {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   #word {
     font-size: 2em;
     letter-spacing: 0.5em;
     cursor: pointer;
     user-select: none;
   }

   #message {
     margin-top: 20px;
     font-size: 1.2em;
     color: green;
   }



   #solutionButton {
     margin-top: 30px;
     padding: 10px 20px;
     font-size: 1em;
     border-radius: 8px;
     border: none;
     background-color: #ee7824;
     color: rgb(255, 255, 255);
     cursor: pointer;
   }

   #solutionButton:hover {
     background-color: #b3541a;
   }

   #resetBtn {
     margin-top: 30px;
     padding: 10px 20px;
     font-size: 1em;
     border-radius: 8px;
     border: none;
     background-color: #d2691e;
     color: white;
     cursor: pointer;
   }

   #resetBtn:hover {
     background-color: #b3541a;
   }

   #cBtn {
     /* margin-top: 30px; */
     padding: 10px 20px;
     font-size: 1em;
     border-radius: 8px;
     border: none;
     background-color: #d2691e;
     color: white;
     cursor: pointer;
   }

   #cBtn:hover {
     background-color: #b3541a;
   }

   #word {
     font: 18px courier;
   }

   #hintBtn {
     /* margin-top: 30px; */
     padding: 10px 20px;
     font-size: 1em;
     border-radius: 8px;
     border: none;
     background-color: #d2691e;
     color: white;
     cursor: pointer;
   }

   #hintBtn:hover {
     background-color: #b3541a;
   }

   li {
     display: inline-flex;
     font-size: xx-large;
     padding: 2px;
     margin: 2px;
     border: 1px solid brown;
     border-radius: 5px;
   }

   li:hover {
     display: inline-flex;
     font-size: xx-large;
     padding: 2px;
     margin: 2px;
     border: 1px solid brown;
     background-color: #733000;
     color: orange;
     border-radius: 5px;
   }

   span {
     padding: 5px;
   }

   #word {
     font-size: 0;
     border: 2px solid transparent;
     border-radius: 2px;
   }

   #word span {
     font-size: 2rem;
     /* or whatever you want */
   }

   #theWordsUL {
     color: brown;
   }

   #theWordsUL2 {
     color: brown;
   }

   li {
     background-color: #ead9c2;
   }

   #category {
     color: orange;
     /* background-color: brown; */
   }

   .clickable {
     cursor: pointer;
   }

   #heading {
     cursor: pointer;
   }