body  {background-color: rgb(255, 242, 230);}




h1 {color: rgb(223, 32, 32);
font-family: 'Georgia', serif;
font-size: 60px;
text-align: left;
margin: 30px;
text-shadow: 3px 4px 2px #f0aa7b;
 position: absolute;
    left: 25%;}




h2 {background-color: rgb(236, 135, 52);
color: white;
font-family: 'Monoton', cursive;
font-size: 35px;
margin: 0%;
text-align: left;
Padding: 5px;
}




h3 {background-color:rgb(236, 135, 52);
color: rgb(255, 255, 255);
font-family: 'Monoton', cursive;
font-size: 35px;
text-align: left;
Padding: 5px;
}






p {color: rgb(206, 67, 25);
font-family: 'unkempt', cursive;
font-style: normal;
font-weight: 999;
font-size: 16px;
margin: 8px;
size: 50px;


}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e04242;
  justify-content: center;
  position: sticky;
  top: 0;
 
}


li {
  float: left;
}


li a {
  display: block;
  color: rgb(255, 234, 194);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 1px solid #ff8d22;
}


.active {
  background-color: #bd1c3f;
}


li:last-child {
  border-right: none;
}


/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #fa713b;
}






ol {color: rgb(238, 55, 55);
font-family: 'unkempt', cursive;
font-style: normal;
font-weight: 200;
font-size: 17px;
margin: 10px;
size: 0px;
padding: 5px}




#centerbox {
    float: center;
    background:rgb(255, 227, 191);
    max-width: 87%;
    height: 580px;
    margin: 30px;
    padding: 0px;
    border: double;
    border-width: 10px;
    border-color: rgb(168, 79, 109);
    background-image: linear-gradient(rgb(238, 196, 148), rgb(255, 177, 131), rgb(252, 202, 127));
    opacity: 0.;
    border-radius:2%;
    box-shadow: 20px 30px 4px rgb(240, 178, 142);
    display: inline-block;
    position: absolute;
    top: 10%;
    left: 25%;
    }




.banner {
  margin: auto;
  padding: 0px;


}


div {
overflow: hidden;
}


img:hover {
  transform: scaleX(-1);
}


strong{
  font-size: 18px;
  font-weight: 900;
  color: rgb(160, 26, 26)
}


.my-scrollable-div {
    height: 150px; /* Set a fixed height */
    overflow-y: auto; /* Add scrollbars only when content overflows */
    border: 1px solid #db4343; /* Optional: for visual clarity */
    padding: 10px;
    scrollbar-color: #811d1d #fad8bb;
}


.header4 {
  margin: auto;
  padding: 8px;
  font-size: 20px;
  font-weight: 900;
}


hr {
  border-top: 4px dashed #f8ab62;
  border-bottom: 4px dashed #ffffff;
}
/*
NOTES:
<div id = "centerbox">  
    <h2>Morning Tea</h2>
      <ul>
        <li> Tea </li>
        <li> Coffee </li>
        <li> Milk </li>
        </ul>
 </div>  
  for width in div: 44
   !LEARN HOW TO DO COLUMNS!
   CHANG COLORS LATER, MAKE IT LOOK PRETTY


  for texts:
  <br>
  <strong>a</strong>
  stuff:
  •►▻▷●◯⟩⟫‖
  */








</style>