/* Calendar */

.calendar {
  width: 100%;
  max-width: 920px;
  min-width: 300px;
  /* margin: 20px auto; */
  margin: 40px auto;
  border-radius: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.calendar-base {
  height: 460px;
  width: 67%;
  float: right;
  border: 1px solid var(--clr-primary);
  border-radius: 0px 20px 20px 0px;
  background-color: white;
  position: relative;
  color: black;
}

.time {
  color: var(--clr-grey);
  font-size: 2rem;
  font-weight: 600;
  margin: 25px 0 0 15px;
}

.year {
  color: var(--clr-grey);
  font-size: 2rem;
  font-weight: 600;
  float: right;
  position: relative;
  right: 30px;
  top: 20px;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 14px solid var(--clr-lightgrey);
  border-bottom: 7px solid transparent;
  float: right;
  position: absolute;
  left: -21px;
  top: 0.8rem;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 14px solid var(--clr-lightgrey);
  border-bottom: 7px solid transparent;
  float: right;
  position: absolute;
  right: -18px;
  top: 0.8rem;
}

.triangle-left:hover {
  border-right: 10px solid var(--clr-secondary);
}
.triangle-right:hover {
  border-left: 10px solid var(--clr-secondary);
}

.active-month {
  color: var(--clr-primary);
  font-weight: 600;
}

.month:hover {
  color: var(--clr-primary);
}

.months {
  color: var(--clr-grey);
  font-size: 1rem;
  word-spacing: 0.6em;
  text-align: center;
  margin: 10px auto;
}

.month-line {
  border-color: #e8e8e8;
  width: 85%;
  margin: 10px auto;
}

.days {
  color: var(--clr-grey);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

.day {
  padding: 0 2.5%;
}

.active-day {
  color: var(--clr-primary);
  font-weight: 600;
}

.dates {
  text-align: center;
  font-size: 1.4rem;
}

.week {
  margin: 15px 0;
}

.date {
  margin: 5px;
  padding: 2.5%;
  color: black;
}

.date:hover {
  color: var(--clr-primary);
  font-weight: 600;
}

.active-date {
  background-color: var(--clr-primary);
  border-radius: 50%;
  margin: 2.5%;
  padding: 5px;
  color: white;
  font-weight: 600;
}

.next-month,
.last-month {
  color: var(--clr-grey);
}

.active-date:hover {
  color: white;
  background-color: var(--clr-secondary);
}

.next-month:hover,
.last-month:hover {
  color: var(--clr-grey);
  font-weight: 600;
}

/* Billboard */

.calendar-left {
  width: 33%;
  height: 460px;
  margin-top: 10px;
  border-radius: 20px 0px 0px 20px;
  background-color: var(--clr-primary);
  position: relative;
  color: white;
}

.hamburger {
  display: none;
  position: absolute;
  padding: 5px;
  top: 5%;
  left: 8%;
}

.burger-line {
  width: 25px;
  height: 3px;
  background-color: white;
  border-radius: 15%;
  margin-bottom: 3px;
}

.hamburger:hover {
  background-color: var(--clr-secondary);
}

.current-date {
  font-size: 7rem;
  font-weight: 700;
  padding: 0 0px 0 10px;
  text-align: left;
  float: left;
}

.current-day {
  font-size: 1.6rem;
  text-align: left;
  padding-top: 5rem;
  padding-bottom: 2rem;
}

.current-events {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0px 30px;
}
.current-events h3 {
  padding-top: 10px;
}
.current-events ul {
  list-style: circle;
  padding: 0px 0px;
}

.current-events li {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 150%;
}

.button,
.button-member {
  display: block;
  width: 8em;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 10px 20px;
  margin: 0px auto;
  background: rgb(252, 106, 0);
  background: radial-gradient(circle, rgba(252, 106, 0, 1) 0%, rgba(245, 123, 0, 1) 70%, rgba(255, 171, 0, 1) 100%);
  /* background-color: var(--clr-highlight); */
  /* border: solid white 2px; */
  border: none;
  border-radius: 10px;
  color: white;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.button:hover,
.button-member:hover {
  background-color: var(--clr-highlight);
  color: white;
}