* {
  @import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quattrocento", serif;
  font-weight: 400;
  font-style: normal;
}
body {
  background: #f1fbff;
}
.calendar {
  padding: 20px 40px;
}
.months-container {
  width: 100%;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.calendar .months-container .month-container {
  background: #fff;
  padding: 20px;
  min-width: 280px;
  box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.51);
}
.calendar table.month th.month-title {
  /* color: #f00; */
  @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Quattrocento:wght@400;700&display=swap');
  color: #5a8990;
  font-size: 1.9em;
  font-weight: 200;
  font-family: "Dancing Script", cursive;
}
table.month td:first-child,
table.month td:last-child,
table.month thead tr:nth-child(2) th:first-child,
table.month thead tr:nth-child(2) th:last-child

{
  color: #ff1a1a;
}
.calendar table.month td.day .day-content {
  padding: 6px 8px;
}
.calendar table.month th.day-header {
  color: #777;
  font-size: 0.9em;
  font-weight: 700;
}
.mon tr td {
  font-size: 0.9em;
  font-weight: 500;
  color: #777;
}
table.monthh td.day .day-content:hover {
  background: #ff1a1a;
  color: #fff;
}
.calendar .calendar-header {
  border: none;
}
.calendar .calendar-header table th:hover {
  background: transparent;
}
.calendar .calendar-header .year-title {
  font-size: 4em;
  color:  #ff1a1a;
  font-family: "Dancing Script", cursive;
}
.calendar .calendar-header .year-neighbor {
  font-size: 2.25em;
}
.calendar .calendar-header .year-neighbor2 {
  font-size: 1em;
}