.calendar {
  border-width: 8px;
  border-style:solid;
  border-image: url("https://file.garden/aY1LRtRU6Qh46fOM/BG/border%20clue%20cal.png") 8 round;            
  height: 228px;
  border-radius: 15px;
  margin: 5px;
  width: 200px;
  background-color: #C2DAF5;}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}


.calendar-header button {
  color: #01019f;
  background-color: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
}

#month-year {
  font-size: 12px;
  font-weight: bold;
}

.calendar-weekdays, .calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays div, .calendar-dates div {
  text-align: center;
  padding: 5px;
}

.calendar-weekdays {
  background-color: #E0E8FD;
}

.calendar-weekdays div {
  font-weight: bold;
  font-family:valentine;
  font-size: 5px;
}

.calendar-dates div {
  border-bottom: 1px solid  #fff;
  cursor: pointer;
  font-size: 7px;
}

.calendar-dates div:hover {
  background-color: #E0E8FD;}
  
.current-date {
  background: rgba(166, 192, 222, 0.6);
  color:  #fff;
  border-radius: 15%;}