daybyday.css

.day-of-week,
.date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.month-name {
	font-family: Helvetica;
	font-size: 20px;
}
.calendar {
    border-width:.15em;
    border-style:solid;
    border-color: grey;
    border-radius:3%;
}

.day-of-week {
    margin: .25em;
    margin-top: .75em;
    border-bottom: .15em;
    border-bottom-style:solid;
    border-bottom-color:grey;
}


.day-of-week > * {
    /* font-size: 0.7em; */
    /* font-weight: 500; */
    /* letter-spacing: 0.1em; */
    /* font-variant: small-caps; */
    text-align: center;
    font-family: Helvetica;
    font-weight: bold;
}

.day-by-day {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.month-name {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
}

.date-grid button{
    position: relative;
    border: 0;
    width: 4.5ch;
    height:4.5ch;
    border-radius: 50%;
    background-color: transparent;
}

.date-grid > *{
	font-weight:normal;
}

.date-grid > *:nth-child(7n-6){
    color:red; 
}

.date-grid > *:nth-child(7n){
    color:red; 
}

.weekend {
    color:red;
}
.arrow {
    place-self: center;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    display:flex;
    text-align:center;
    justify-content:center; 
    width:40px;
    height:40px;
}
.arrow > button {
    border-radius: 100%;
    border:none;
    color: white;
    text-align: center;
    font-size:30px;
    background-color: rgba(0,0,0,0);
    padding:0px;
    /* position: relative; */
    /* top: 50%; */
    /* margin: 0 auto; */
    /* display: inline-block; */
    /* transform: translateY(-50%); */
}

.other-month{
    opacity:0;
}