:root {
  --bg-body: #f8efe0;
  --bg-page: #fffcf9;
  --bg-infobox: #eadcc8;
  --bg-nav: #f7ebdb;
  --bg-content: #fefcf9;

  --nav-lines: #eadcc8;

  --txt-content: #957c67;

  --link: #957c67;
}

html {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
}

body {
  background-color: var(--bg-body);
  display: grid;
  place-items: start center;
  padding: 2rem 1rem;
}

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

a {
  color: var(--txt-content);
  text-decoration: unterline;
}
a.active {
  color: #000;
}
a:hover,
a:focus {
  color: #000;
  text-decoration: unterline;
}

#page {
  background: var(--bg-page);
  /* box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); */
  width: 935px;
  height: 590px;
  margin: 38px auto auto auto;
  padding: 21px 22px 11px 21px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr;
  grid-template-areas:
    "infobox content aside"
    "nav content aside";
  gap: 0.75rem;

  padding: 0.75rem;
}

.infobox {
  grid-area: infobox;
  background: var(--bg-infobox);
  padding: 0.75rem;
  height: 100%;
  position: relative;

  .infobox-bottom {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    right: 0.75rem;
  }

  & .infobox-top {
    display: grid;
    gap: 0.5rem;

    & h1 {
      font-size: 1.125rem;
      color: white;
      text-decoration: underline;
    }

    & p {
      font-size: 1rem;
      color: white;
      line-height: 1.25;
      font-weight: bold;
    }
  }

  & .infobox-bottom {
    display: flex;
    gap: 0.5rem;
    align-items: center;

    & p {
      font-size: 0.75rem;
      color: #957c67;
      font-weight: bold;

      & a {
        color: #957c67;
        text-decoration: none;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }
  }
}

.nav {
  grid-area: nav;
  background: var(--bg-nav);
  height: 100%;
  padding: 0.75rem;

  position: relative;

  & .primary {
    ul {
      padding: 0;
      list-style: none;

      & li {
        padding: 0.125rem 0;
        & a {
          font-size: 0.875rem;
          text-decoration: none;
          font-weight: bold;
          width: 273px;
          height: 19px;
          padding-left: 6px;
          display: block;
          font-size: 14px;
          font-weight: bold;
          color: #cdbca7;
          text-decoration: none;
          border-bottom: 1px solid #eadcc8;
        }
        & a:hover {
          color: #957c67;
        }
        & a.active {
          color: #957c67;
        }

        & ul li a {
          height: 18px;
          padding-left: 20px;
          font-weight: normal;
        }
      }
    }
  }

  & .secondary {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;

    & .hero {
      position: relative;

      & img {
        width: 100%;
      }

      & .hero-text {
        position: absolute;
        right: 0.75rem;
        bottom: 0.75rem;
        text-align: right;

        display: grid;
        gap: 0.25rem;

        & .greeting {
          color: #cdbca7;
          font-size: 1.5rem;
          font-weight: 600;
        }
        & .name {
          color: #cdbca7;
          font-size: 0.75rem;
          text-decoration: underline;
          padding: 30px 10px 0 0;
        }

        & .profession {
          color: var(--txt-content);
          font-size: 0.625rem;
        }
      }
    }

    & ul {
      display: flex;
      gap: 0.5rem;
      list-style: none;

      & li {
        font-size: 0.75rem;
      }
    }
    & .shortcuts {
      margin-top: 0.5rem;
    }
    & .shortcuts a {
      color: #cdbca7;
    }
    & .shortcuts a:hover {
      color: var(--txt-content);
    }
  }
}
.content {
  grid-area: content;
  background: var(--bg-content);
  overflow-y: auto;
  padding: 0.75rem 0;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: start;

  color: var(--txt-content);

  & h2 {
    font-size: 1.1rem;
    text-decoration: underline;
  }
  & h3 {
    padding-top: 0.5rem;
    font-size: 1rem;
  }
  & h4 {
    padding-top: 0.5rem;
    font-size: 0.9rem;
  }
  & h5 {
    padding-top: 0.5rem;
    font-size: 0.8rem;
  }
  & p,
  & li {
    font-size: 0.8rem;
    line-height: 1.25;
  }
  & ul {
    font-size: 0.8rem;
    padding-left: 1rem;

    & li {
      line-height: 1.5;
    }
  }

  & details {
    font-size: 0.8rem;
    margin-top: 0.5rem;

    & summary {
      cursor: pointer;
      margin-bottom: 1rem;
      & h2,
      & h3 {
        display: inline;
      }

      & h3 {
        font-size: 1rem;
      }
    }

    & div {
      display: grid;
      gap: 0.5rem;
      margin: 0.25rem 0 0 0.75rem;
    }
  }

  & dl {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;

    font-size: 0.8rem;

    & dt {
      display: block;
      font-weight: bold;
    }

    &.list {
      grid-template-columns: 1fr;
      gap: 0.25rem;

      & dt:not(:first-of-type) {
        margin-top: 0.5rem;
      }
    }
  }

  #map {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--txt-content);
    width: 100%;
  }
}
form input {
  max-width: 95%;
}
.aside {
  grid-area: aside;
  overflow: hidden;

  display: flex;
  place-content: center;

  & img {
    height: 100%;
  }
}

.scrollbars {
  overflow-y: auto;
  scrollbar-color: #888 var(--bg-content);
  scrollbar-width: none;

  &::-webkit-scrollbar {
    width: 0.25rem;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--bg-infobox);
    border-radius: 10px;
    border: 2px solid var(--bg-infobox);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-infobox);
  }
}