/* CSS HSL */
/* --charcoal-brown: hsla(34, 6%, 24%, 1);
--aquamarine: hsla(150, 97%, 85%, 1);
--mauve: hsla(265, 100%, 87%, 1);
--amber-earth: hsla(33, 83%, 50%, 1);
--crayola-blue: hsla(221, 100%, 61%, 1); */
:root {
  /* CSS HEX */
--mauve-shadow: #5e4955ff;
--lavender: #e9ebf8ff;
--pale-slate: #b4b8c5ff;
--fern: #556f44ff;
--dark-slate-grey: #283f3bff;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  background-color: var(--dark-slate-grey);
  max-width: 900px;
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

body p {
  color: var(--pale-slate);
  padding-bottom: 20px;
}

body nav {
  background-color: var(--fern);
  padding: 10px;
}

body nav a {
  color: var(--pale-slate);
  font-size: 18px;
  padding: 10px 16px;
}

h1 {
  color: var(--lavender);
}

h2 {
  color: var(--lavender);
}

footer {
  position: static;
  text-align: center;
  padding: 16px;
}

footer a {
  color: var(--pale-slate);
  font-size: 22px;
  text-decoration-color: var(--pale-slate);
  text-decoration: none;
}

@media (max-width: 768px) {
  body {
    padding: 0 16px;
  }

  body nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body nav a {
    font-size: 16px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  body nav {
    flex-direction: column;
  }

  body nav a {
    font-size: 15px;
    padding: 10px;
    display: block;
  }
}