body {
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
background-image: url('https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
background-size: cover;
background-position: center center;
color: white;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
top: 0;
left: 0;
min-height: 100vh;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 350px;
transform: translate(-50%, -50%);
text-align: center;
box-shadow: 0 0 20px rgb(47, 231, 255), 0 0 20px rgb(47, 231, 255), 0 0 20px rgb(47, 231, 255);
}
.cal-head {
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
color: #483D8B;
padding-left: 20px;
padding-right: 20px;
background-color: azure;
font-size: 30px;
font-weight: bolder;
}
.year, .month {
font-size: 25px;
}
.back, .forward {
cursor: pointer;
}
.back:hover, .forward:hover {
color: rgb(85, 85, 253);
}
.week-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
height: 40px;
background-color: #483D8B;
font-size: 20px;
align-items: center;
}
.weekend {
color: #fb6767;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
color: #483D8B;
font-size: 20px;
font-weight: bolder;
background-color: aliceblue;
}
.days div {
height: 36px;
padding-top: 8px;
border: #483D8B solid 1px;
}
.blank {
background-color: silver;
}