@keyframes fade{
from{
  opacity:0;
}
to{
  opacity: 1;
}
}
.hero{
  width: 100%;
  height: 60vh;
  position: relative;
}
#calendar{
  width: 80%;
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation-name: fade;
  animation-duration: 5s;
  margin: 80px auto;
}
.calendar-sidebar
{
  background-image: linear-gradient(270deg, #210000, rgb(102, 35, 35));
}
.calender-months .month{
  background: red;
}
@media screen and (max-width:425px){
  .hero{
    height:47vh;
  }
}