:root {
  --color-grey: rgb(235, 235, 235);

  --box-shadow-dark: 0.3px 0.5px 0.5px hsl(0deg 0% 55% / 0.62),
    0.6px 1.2px 1.2px -1.3px hsl(0deg 0% 55% / 0.5),
    1.9px 3.7px 3.7px -2.7px hsl(0deg 0% 55% / 0.39),
    5.2px 10.4px 10.5px -4px hsl(0deg 0% 55% / 0.27);
  --box-shadow-light: 0.3px 0.5px 0.5px hsl(0deg 0% 61% / 0.52),
    0.6px 1.1px 1.1px -1.3px hsl(0deg 0% 61% / 0.42),
    1.7px 3.5px 3.5px -2.7px hsl(0deg 0% 61% / 0.32),
    4.8px 9.5px 9.6px -4px hsl(0deg 0% 61% / 0.23);
}

html {
  background-color: var(--color-grey);
  font-family: system-ui, sans-serif;
}

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: -1rem;
}

.site-title {
  color: black;
  flex-grow: 1;
  padding-left: 1rem;
}

.site-title__link,
site-title__link:hover {
  text-decoration: none;
  color: inherit;
}

.nav {
  transition: opacity 0.5s ease, height 0.5s ease, margin-bottom 0.5s ease;
  opacity: 0;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.hamburger:focus ~ .nav,
.nav--open {
  opacity: 1;
  height: 3.5rem;
  margin-bottom: 1rem;
}

.nav__list {
  display: flex;
  column-gap: 1rem;
  justify-content: flex-end;
  font-size: 0.9rem;
  padding: 0 1rem;
}

.nav__item {
  background-color: rgb(218, 218, 218);
  border-radius: 0.5rem;
  list-style-type: none;
  padding: 0.5rem 0.6rem;
  position: relative;
  box-shadow: var(--box-shadow-light);
}

@media (min-width: 440px) {
  .nav__list {
    font-size: 1rem;
  }

  .nav__item {
    padding: 0.5rem 1rem;
  }
}

.nav__item:hover {
  background-color: rgb(225, 225, 225);

  box-shadow: var(--box-shadow-dark);
}

.nav__link {
  color: black;
  text-decoration: none;
}

.nav__link:hover {
  color: blue;
  text-decoration: none;
}

.nav__link:before {
  inset: 0px;
  content: "";
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  /* z-index: 1; */
}

.nav__divider {
  border-left: 2px solid #dadada;
}

.container {
  padding: 1rem;
}

@media (min-width: 500px) {
  .container {
    padding: 1rem 2rem;
  }
}

.container-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.container-group--smaller {
  gap: 1rem;
}

.content-container {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1rem;

  box-shadow: var(--box-shadow-light);
}

.content-container--error {
  text-align: center;
}

.footer {
  display: flex;
  font-size: 0.8rem;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 0.5rem 0;
}

.footer__link {
  color: blue;
  text-decoration: none;
}