@font-face {
  font-family: NewRocker;
  src: url("https://peachyvoid.com/fonts/NewRocker.ttf");
}

.calendar {
  width: 280px;
  padding: 12px 10px;
  box-sizing: border-box;
  background-color: #614e36;
  background-image: url(https://peachyvoid.com/backgrounds/LCRQAiI.jpeg);
    /*linear-gradient(rgba(144, 120, 160, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 120, 160, 0.08) 1px, transparent 1px);*/
  background-size: 150px 150px;
  background-repeat: repeat;
  margin: 0 auto;
  border: 1px dashed #ddcda2;
  border-radius: 5px;
  font-family: 'NewRocker';
  color: #f2fff5;

}


.calendar-month {
  text-align: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-style: italic;
  font-weight: bold;
}


.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-transform: lowercase;
}


.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}


.calendar-days > span {
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce8d8;
  border-radius: 6px;
  background: rgba(141, 129, 102, 0.774);
  font-size: 9px;
}


.calendar-days > .empty {
  border: none;
  background: transparent;
}


.calendar-day-number {
  font-weight: bold;
}


.calendar-days > .today {
  background: #493311;
  border-color: #fdf7d3;
  color: #ffffff;
}


.calendar-days > span:not(.empty):hover {
  background: #4e3e25;
}