body {
   font-family: "Belleza", sans-serif; 
   background-color:#264428;

}


#logo {
   width: 250px;
   height: auto;

}

.header{
   display: flex; 
   align-items: center;
   position: relative;
   margin-top: 40px;

}

.header span{
  color: #fbeaed;
  font-size: 120px;
  font-family: "Belleza", sans-serif;
  text-align: center;
 position: absolute;
   left: 50%;
   transform: translate(-50%, -50%); /* Compensate for the container's width move it half of its width to ensure perfect centering */

   justify-content: center;
   align-items: center;
   margin-top: 100px;

}

.Chapter {
   background-color: #fbeaed;
   color:#264428;
   font-size: 60px;
   padding-left: 19px;
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 2px;
}
.Chapter p{
   padding-top: 8px;
   padding-bottom: 8px;
}

.events{
   background-color: #fbeaed;
   color:#264428;
   font-size: 60px;
   width: 100%;
}


.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: .1em; /* Adjust this value to control the gap between items */
    align-items: center;
    justify-items: center;
   margin: 0px 50px 0px 50px;
}


.wrapper img{
   width: 100%;
   background-color:#264428;
}


.section {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    font-size: 60px;
    color: #f5f1ed;
    text-align: center; /* Optional: Center text within the section */
   padding-right: 20px;
}


.link{
   color: #fbeaed;
   background-color:#172f19;
   padding: 30px;
   border-radius: 20px;
}

.link:hover {
    background-color: #fbeaed;
    color: #172f19;
}

h2 {
   font-size: 60px;
   justify-content: center;
}
.cal{
   font-size: 50px;
   justify-content: center;
   margin-top: 0px;
   padding-top: 0px;
}

#add{
   font-family: "Belleza", sans-serif; 
   font-size: 50px;
   color: #fbeaed;
   background-color:#172f19;
   border-radius: 20px;
   padding: 10px 15px;
}

#add:hover{
    background-color: #fbeaed;
    color: #172f19;
}


/* STYLE NAV BAR */
/* Centering the tabs container */
.tabs-container {
  display: flex;
  justify-content: center; /* Center horizontally */
 /* Optional: Add padding to ensure some space around */
}

/* Styling the tabs */
.tabs {
  display: flex; /* Arrange tabs in a row */
  gap: 15px; /* Optional: Add space between tabs */
   text-align: center;
    display: flex;                       /* Use Flexbox for layout */
    align-items: center;                 /* Align items vertically centered */
}

.tabs a {
  color: #fbeaed;
  text-decoration: none;
  padding: 10px;
  border-radius: 20px;
  font-size: 30px; /* Adjust font size if needed */
}

.tabs a:hover {
  background-color: #f5f1ed;
  color: #264428;
}