calendar.css

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}
  
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.calendar {
width: fit-content;
margin: 50px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}

.year-month {
font-size: 35px;
}

.nav {
display: flex;
border: 1px solid #333333;
border-radius: 5px;
}

.nav-btn {
width: 28px;
height: 30px;
border: none;
font-size: 16px;
line-height: 34px;
background-color: transparent;
cursor: pointer;
}

.go-today {
width: 75px;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
.days {
display: flex;
margin: 25px 0 10px;
}

.day {
width: calc(95% / 7);
text-align: center;
}

.dates {
width:fit-content;
display: flex;
flex-flow: row wrap;
height: 500px;
padding-right:-30px;
/* border-top: 1px solid #333333;
border-right: 1px solid #333333;  */
}

.date {
border:1px solid #333333;
width: calc(92% / 7);
padding: 10px;
text-align: right;
/* border-bottom: 1px solid #333333;
border-left: 1px solid #333333; */
}
.day:nth-child(7n + 1),
.date:nth-child(7n + 1) {
color: #D13E3E;
}

.day:nth-child(7n),
.date:nth-child(7n) {
color: #396EE2;
}

.other {
  opacity: .3;
}

.today {
  position: relative;
  color: #FFFFFF;
}

.today::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 30px;
  height: 30px;
  background-color: #FF0000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  content: '';
}