:root {
  --main-color: #555960;
  --transition: all 250ms cubic-bezier(.4,0,.2,1);
  --header1: 3.052rem;
  --header2: 2.441rem;
  --header3: 1.953rem;
  --header4: 1.563rem;
  --header5: 1.25rem;
  --header5hover: 1.28rem;
  --paragraph: 1rem;
  --button: 0.9rem;
  --img-height: 300px;
}

/* Define the bobbing animation */
@keyframes bob {
  0%, 30%, 60%, 100% {
    transform: rotateZ(90deg) translateX(0);
  }
  15%, 45% {
    transform: rotateZ(90deg) translateX(4px); 
  }
}

/* Accordion Controls Styling */
.accordion-controls {
  margin: 1rem 0; 
  text-align: left; 
  display: flex; 
  flex-direction: row-reverse;
  padding-left: 0.5rem; 
  position: sticky; /* Make the controls sticky */
  top: 0; 
  z-index: 10; 
  background: #fff; 
}

/* Button Styling */
#toggle-button {
  font-size: 1rem;
  font-weight: bold;
  color: var(--main-color);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.25rem 0; 
}

/* Hover Effect */
#toggle-button:hover {
  color: #333;
  text-decoration: underline;
}

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

#accordion p{
  text-align: justify;
}

#accordion ul {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  list-style: none;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

#accordion li {
  text-align: justify;
  cursor: pointer;
}

#accordion h2 {
  font-size: var(--header3);
  color: var(--main-color);
  padding-bottom: 2rem;
}

.container {
  margin: 0 auto;
}

.accordion-title {
  padding: 2rem 0px;
  border-bottom: 1px solid var(--main-color);
  position: relative;
  font-size: var(--header5);
  color: var(--main-color);
  transition: var(--transition);
  padding: 2rem .5rem;
  text-align: left;
}

.accordion-title span{
  flex-grow: 1; 
  text-align: justify;
  transition: var(--transition);
}

.accordion-title:hover span{
  display: inline-block;
  transform: scale(1.05); 
  transition: var(--transition); 
}

.accordion-title::after {
  content: "\276F";
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0.5rem;
  font-size: 1rem;
  transform-origin: center;
  transform: rotateZ(90deg);
  transition: var(--transition);
  top: 40%;
  bottom: 50%;
  color: var(--main-color);
}

.accordion-title:hover::after {
   transform: rotateZ(90deg) translateX(4px);
   animation: bob 2.5s cubic-bezier(.4,0,.2,1) infinite;
}

.rotate .accordion-title span{
  display: inline-block;
  transform: scale(1.05); 
}

.rotate .accordion-title::after {
  transform: rotateZ(-90deg);
  font-size: var(--header5hover);
  transition: none;
  animation: none;
}

.rotate:hover .accordion-title::after {
  
}


.accordion-content {
  height: 0px;
  opacity: 0;
  display: flex;
  text-align: left;
  gap: 2rem;
  overflow: hidden;
  padding-left: 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--main-color);
}

.accordion-content img {
  width: auto;
}

.accordion-content p {
  flex: 0 0 50%;
}

.accordion-content.text p {
  flex: 0 0 100%;
}

.accordion-content.text {
  flex-direction: column;
}

.open .accordion-content {
  min-height: var(--img-height);
  height: 100%;
  opacity: 1;
  margin-top: 1rem;
  transition: var(--transition);
}

@media screen and (max-width: 768px) {
   .accordion-content {
    flex-direction: column;
  }
  
  .accordion-content p {
    flex: 0 0 auto;
  }
  
  .open .accordion-content {
    min-height: calc(var(--img-height) + var(--img-height) / 2);
  }

  .accordion-item div span {
    display: block;
    width: 90%;
  }
}

/* Simple TABLE Styling */

.simple-date-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1em;
}

.simple-date-table td {
  padding: 10px;
}

.left-column {
  text-align: right;
  font-weight: bold;
  border-right: 2px solid var(--main-color);
}

.right-column {
  text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
  .simple-date-table {
    width: 100%; /* Make the table take full width on smaller screens */
    font-size: 0.9em; /* Slightly reduce font size */
  }

  .simple-date-table td {
    display: block; /* Stack cells */
    width: 100%;
    text-align: center; /* Center-align both columns */
    border: none; /* Remove borders for stacked view */
    padding: 6px 0; /* Reduce padding for less gap */
  }

  .left-column {
    font-weight: bold;
    text-align: center; /* Center-align event names */
    border-right: none; /* Remove the vertical line */
  }

  .right-column {
    text-align: center; /* Center-align dates */
  }

  .simple-date-table tr {
    margin-bottom: 5px; /* Reduce spacing between rows */
    display: block; /* Allow rows to stack */
  }
}