/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
.community {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
}

h1 {
  display: block;
  font-size: 2.3rem;
  background-color: var(--color-destin-sand);
  border: solid var(--color-mid-green);
  border-radius: 15px;
  color: var(--color-dark-green);
  text-decoration: underline;
  text-shadow: var(--text-outline-heading);
  padding: 5px 100px;
  box-shadow: var(--shadow-subtle); 
}

#calendar-events-container {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border: none;
}

.calendar iframe {
  width: 975px;
  height: 750px;
  margin-top: 25px;
  margin-bottom: 20px;
  background-color: var(--color-light-teal);
  border-radius: 15px;
  box-shadow: var(--shadow-subtle); 
}

.upcoming-events {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.events {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-soft-golden);
  border: solid var(--color-dark-green);
  border-radius: 15px;
  padding: 10px;
  width: 80vw;
  box-shadow: var(--shadow-subtle); 
}

.events h2 {
  font-size: 1.875rem;
  text-align: center;
  text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
  -0.5px -0.5px .5px var(--color-dark-green),
  -0.5px 0.5px .5px var(--color-dark-green),
  0.5px -0.5px .5px var(--color-dark-green);
  color: var(--color-destin-sand);
  background-color: var(--color-mid-green);
  border: solid var(--color-destin-sand);
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  padding: 0 50px;
  box-shadow: var(--shadow-medium);
}

.upcoming-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-pale-green);
  border: solid var(--color-dark-green);
  border-radius: 15px;
  padding: 0px 20px 10px 20px;
  width: 95%;
  margin-top: 20px;
  box-shadow: var(--shadow-subtle);
}

.zoho-event {
  background-color: var(--color-destin-sand);
  border: solid var(--color-dark-green) 2px;
  border-radius: 15px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); 
  max-width: 1200px;
}

.zoho-event h3 {
  font-size: 1.875rem;
  text-align: center;
  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand),
  -0.5px -0.5px .5px var(--color-destin-sand),
  -0.5px 0.5px .5px var(--color-destin-sand),
  0.5px -0.5px .5px var(--color-destin-sand);
  color: var(--color-dark-green);
  background-color: var(--color-light-teal);
  border: solid var(--color-destin-sand);
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  padding: 0 50px;
  box-shadow: var(--shadow-medium);
}

.zoho-event p {
  margin-left: auto;
  margin-right: auto;
}

.display-date, .location, .add-events {
  font-weight: heavy;
  font-size: 1.5rem;
}

.description {
  font-size: 1.3rem;
  width: 80%;
  height: auto;
}

.event-list ul {
  list-style-type: none;
}

.event-list li {
  background-color: var(--color-destin-sand);
  border: solid var(--color-light-teal);
  border-radius: 15px;
  text-align: center;
  padding: 5px 10px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-subtle); 
}

.events strong {
  color: var(--color-dark-green);
  font-size: 1.1rem;
}

/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */