@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  --color1:#81ABE9;
  --color1Hover:#588ddd;
  --color2:#fff;
}

.calendar-wrapper {
  background:var(--color2);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  border-radius:10px;
  padding:30px 20px 40px
}

.calendar-wrapper .calendar-header {
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:50px
}

.calendar-wrapper .calendar-header .month-arrow {
  border-radius:10px;
  background:var(--color1);
  width:40px;
  height:40px;
  display:flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  transition:all .3s;
}

.calendar-wrapper .calendar-header .month-arrow:hover {
  background:var(--color1Hover)
}

.calendar-wrapper .calendar-header .month-arrow:after {
  content:'\f104';
  font-family:'Inter', 'FontAwesome', sans-serif;
  font-size:16px;
  line-height:100%;
  font-weight:700;
  color:var(--color2);
}

.calendar-wrapper .calendar-header .month-arrow.arrow-right:after {
  content:'\f105'
}

.calendar-wrapper .calendar-header .today-date {
  font-family:'Inter', 'FontAwesome', sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:100%;
}

.calendar-body .week-days {
  font-family:'Inter', 'FontAwesome', sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:100%;
  opacity:.5;
  margin-bottom:30px
}

.calendar-body > div {
  display:flex;
  flex-wrap: wrap;
  text-align:center;
  gap:30px 0
}

.calendar-body > div > div {
  width:calc(100% / 7);
  position:relative;
  z-index:1
}

.calendar-body .days {
  font-family:'Inter', 'FontAwesome', sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:100%;
}

.calendar-body .days > div.another {
  opacity:.5
}

.calendar-body .days > div.event {
  color:#fff;
  cursor:pointer
}

.calendar-body .days > div.today:before {
  content:'';
  width:40px;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:10px;
  z-index:-1;
  transition:all .3s;
  border:1px solid var(--color1)
}

.calendar-body .days > div.event:before {
  content:'';
  width:40px;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:10px;
  z-index:-1;
  transition:all .3s;
  border:1px solid var(--color1);
  background:var(--color1);
  color:#fff
}

.calendar-body .days > div.event:hover:before {
  background:var(--color1Hover)
}

.calendar-events h3{
  margin-top:40px;
  font-family: 'Inter', 'FontAwesome', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  margin-bottom:20px
}

.calendar-events a {
  background:var(--color1);
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:10px;
  border-radius:10px;
  color:#fff;
  padding:10px 20px;
  font-family: 'Inter', 'FontAwesome', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-decoration:none;
  transition:all .3s;
  pointer-events:none
}

.calendar-events a[href*='/'] {
  pointer-events: all;
}

.calendar-events a:hover {
  background:var(--color1Hover)
}

.calendar-events .event-name {
  flex:0 0 100%;
  margin-bottom:10px
}

@media(max-width:400px) {
  .calendar-wrapper {
    padding:20px 15px 30px
  }
  
  .calendar-body .week-days,
  .calendar-body .days,
  .calendar-events a{
    font-size:12px
  }
  
  .calendar-wrapper .calendar-header .today-date,
  .calendar-events h3 {
    font-size:16px
  }
  
  .calendar-body .days > div.today:before,
  .calendar-body .days > div.event:before,
  .calendar-wrapper .calendar-header .month-arrow{
    width:30px;
    height:30px
  }
}