:root {
  --deep-black: #222222;
  --ivory: #fffdf5;
  --darker-ivory: #DFDFD6;
  --tomato: #FE4A49;
}

:root {
  --color-accent-light: var(--darker-ivory);
  --color-accent-focus: var(--tomato);
  --color-font: var(--deep-black);
  --color-background: var(--ivory);
  --border-thickness: 2px;
  --semi-bold-weight: 600;
  --border-radius: 5px;
}

html {
  scrollbar-color: var(--color-font) var(--color-background); 
  scrollbar-width: thin;
}

body {
  margin: 0 auto;
  max-width: 50em;
  background-color: var(--color-background);
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  padding: 4em 1em;
  color: var(--color-font);
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

h1,
h2,
strong {
  color: var(--color-font);
}

a {
  color: var(--color-accent-focus);
  text-decoration: none;
}

.base-text {
  font-size: 1.2em;
}

.active-page {
  box-sizing: border-box;
  text-decoration: none;
  border: var(--border-thickness) solid var(--color-font);
  border-radius: var(--border-radius);
}

.non-active-page {
  text-decoration: none;
  border: var(--border-thickness) solid var(--color-background);
  border-radius: 5px;
}

.non-active-page:hover {
  background-color: var(--color-accent-light);
}

#menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-bottom: var(--border-thickness) solid var(--color-font);
  margin-bottom: 20px;
}

@media (width <= 600px) {
  body {
    padding-top: 2em;
  }

  #menu {
    grid-template-columns: auto;
    place-items: center;
  }

  #nav-years {
    justify-self: center;
  }
}

@media (width > 600px) {
  #nav-years {
    justify-self: right;
  }
}

#nav-years {
  list-style-type: none;
  display: block;
  margin: 0;
  font-size: 1.5em;
  align-self: center;
  padding-left: 0;
}

.focus {
  color: var(--color-accent-focus);
}

#nav-years li {
  display: inline-block;
}

#nav-years li a {
  padding: 0px 15px;
}

.month-calendar {
  text-align: center;
  vertical-align: center;
}

.month-calendar caption {
  font-size: 1.2em;
  border-bottom: var(--border-thickness) solid var(--color-font)
}

.months-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 30px;
  column-gap: 20px;
  row-gap: 20px;

  margin-bottom: 40px;
}

#logo {
  font-size: 2em;
}

.weekend-day {
  background-color: var(--color-accent-light);
}

.bank-holiday {
  background-color: var(--color-accent-focus);
}

.bank-holiday>.semibold {
  color: var(--color-background);
}

.semibold {
  font-weight: var(--semi-bold-weight);
}

#footer {
  border-top: var(--border-thickness) solid var(--color-font);
  padding-top: 15px;
  text-align: center;
  font-size: 1.1em;
  margin-top: 30px;
}