.navbar {
	background: rgba(35, 59, 122, 1);
}
.navbar-default .navbar-nav>li>a:hover {
    color: #fff !important;
    border: none !important;
}
#mainbody {
	margin-top: 100px;
}
<!-- ==============================
     STYLES FOR CALENDAR (EDIT COLOURS HERE)
     ============================== -->

	#google-cal {
  background: #34a853;
}
#google-cal:hover {
  background: #2c8e44;
}

.calendar-section .calendar-download {
  margin: 1rem 0;
}

.calendar-section .download-btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #0077cc;
  color: #fff;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: bold;
  transition: background 0.2s;
}

.calendar-section .download-btn:hover {
  background: #005fa3;
}

.calendar-section { margin: 1.5rem 0; text-align: center; }

.calendar-section .calendar-month-filter { margin-bottom: 1rem; }

.calendar-section .calendar-month-filter label {
  margin-right: .5rem;
  font-weight: bold;
}

.calendar-section .calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.calendar-section .filter-btn {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #333;
  transition: all .2s;
}

.calendar-section .filter-btn:hover { opacity: 0.85; }

.calendar-section .filter-btn.active {
  outline: 2px solid rgba(0,0,0,.3);
}

.calendar-section .color-key {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.calendar-section .color-key li {
  flex: 1 1 auto;
  min-width: 140px;
  text-align: center;
  padding: .4rem .75rem;
  border-radius: .25rem;
  color: #000;
  font-size: 1.5rem;
}
.filter-btn {
		background: #fff; border: 1px solid black; 
	}
/* 🎨 Category colours — customise here */
.calendar-section .item1 { background: #8db3e2; border: 1px solid black; } /* School Holidays */
.calendar-section .item2 { background: #92d050; border: 1px solid black; } /* Not Used */
.calendar-section .item3 { background: #ffd966; border: 1px solid black; } /* Training Days */
.calendar-section .item4 { background: #f4cccc; border: 1px solid black; } /* Bank Holidays */
	
	.calendar-year-filter {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.calendar-year-filter label {
  font-weight: 500;
  cursor: pointer;
}
.calendar-date-block {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #076fa1;
}
.calendar-date-heading {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
	background-color: #f3f3f3;
}
.calendar-date-events {
  list-style: none;
  padding: 0;
  margin: 0;
}
.calendar-date-events li {
  margin: 0.25rem 0;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
}
.cal-title {
	font-size: 18px;
}
	.cal-monthyear {
	font-size: 20px;
	}
	.cal-dayofmonth {
		color: #076fa1;
	}
/* ✅ Example colour mapping */
.calendar-date-events li.cal-general { background: #eee; }
.calendar-date-events li.cal-training-day { background: #92d050; }
.calendar-date-events li.cal-bank-holiday { background: #ffd966; }
.calendar-date-events li.cal-sats-week { background: #f4cccc; }
.day-suffix {
  font-size: 0.4em;   /* half the size */
  vertical-align: super; /* lifts it up like a superscript */
}
.day-suffix {
  font-size: 0.5em;
  vertical-align: super;
}
/* make the entire event row anchor fill the li and inherit colours */
.calendar-date-events li a.event-link { display:block; color:inherit; text-decoration:none; }
.calendar-date-events li a.event-link:hover { text-decoration:underline; }
#main-navbar .navbar-brand img {
    height: 150px;
}