@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background: rgb(92, 53, 200);
  background: radial-gradient(circle, rgb(29, 151, 251) 0%, rgba(148,187,233,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Quicksand", sans-serif;
  user-select: none;
}

.calendarCard {
  width: 316px;
  height: fit-content;
  background-color: #f9fafa;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #efefef;
}

.toolbar-calendar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #efefef;
}

.toolbar-calendar > .current-month {
  font-size: 20px;
  font-weight: bold;
  color: #19181a;
}

.toolbar-calendar > [class$="month-btn"] {
  width: 40px;
  aspect-ratio: 1;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #19181a;
  background: #f8f7fa;
  
  border: none;
  border-radius: 15px;
}

.weekdays,
.calendar-days {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 18px;
}
.weekdays {
  padding-top: 12px;
  
}
.calendar-days {
  padding-bottom: 12px;
}

.weekday-name,
[class$="-day"] {
  width: 40px;
  height: 40px;
  color: #19181a;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 14px;
}

.weekday-name {
  color: rgb(41, 205, 9);
  font-weight: 700;
}

.current-day {
  background-color: rgb(112, 71, 235);
  color: #f8f7fa;
  border-radius: 15px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
}

.padding-day {
  color: #a5a5a5;
  user-select: none;
}

.toolbar-calendar > [class$="month-btn"]:hover,
.month-day:hover,
.btn:hover {
  border-radius: 15px;
  background-color: #f8f7fa;
  color: rgb(112, 71, 235);
  transition: 0.1s;
  cursor: pointer;
  box-shadow: inset 0px 0px 0px 1.5px rgb(112, 71, 235);
}

.toolbar-calendar > [class$="month-btn"]:focus,
.month-day:focus,
.btn:focus {
  border-radius: 15px;
  background-color: rgb(112, 71, 235);
  color: #f8f7fa;
}

.goto-buttons {
  border-top: 1px solid #efefef;
  padding-block: 18px;
  display: flex;
  justify-content: space-evenly;
}

.btn {
  background: #f8f7fa;
  border: none;
  border-radius: 15px;
  padding: 11px 13px;
  color: #19181a;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 1px;
  box-shadow: 0px 0px 0px #efefef;
}