* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --alice-blue: aliceblue;
  --light-sky-blue: rgb(180, 213, 241);
  --dark-blue: rgb(0, 0, 97);
  --font-family: Arial, Helvetica, sans-serif;
}

header {
  text-align: center;
  padding: 2rem;
  background-color: var(--alice-blue);
  color: var(--dark-blue);
}

nav {
  display: flex;
  padding: 1rem;
  width: 100%;
  justify-content: space-evenly;
  background-color: var(--light-sky-blue);
  align-items: center;
}

#date-select-field {
  width: 50%;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

#month-select,
#year-input {
  font-size: 1.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 5px;
  background-color: var(--alice-blue);
  color: var(--dark-blue);
  font-family: var(--font-family);
  cursor: pointer;
}

#year-input {
  max-width: 7rem;
}

#navigate-button-field {
  width: 20%;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  height: 2rem;
}

.navigate-button {
  font-size: 2.5rem;
  color: var(--dark-blue);
  background-color: var(--light-sky-blue);
  border: 0;
}

.navigate-icon:hover,
.navigate-button:focus {
  color: var(--alice-blue);
  transform: scale(1.2);
  cursor: pointer;
}

#calendar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#calendar-header,
#calendar-body {
  width: 98%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

#calendar-header {
  height: 3rem;
}

.weekdays {
  border: solid 0.1rem var(--dark-blue);
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: var(--dark-blue);
  width: auto;
}

.empty-cell {
  background-color: var(--alice-blue);
  border: solid 0.1rem var(--dark-blue);
  list-style: none;
}

.date-cell {
  border: solid 0.1rem var(--dark-blue);
  height: 5rem;
  width: auto;
}

.date-cell-header {
  text-align: center;
  font-size: large;
  color: var(--dark-blue);
}

.date-cell-body {
  height: 70%;
}

.event-title {
  background-color: var(--alice-blue);
  color: var(--dark-blue);
  text-align: center;
  font-size: auto;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--alice-blue);
  color: var(--dark-blue);
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  text-align: center;
}