html {
  display: flex;
  justify-content: center;
}

main {
  --icon-size: max(150px, 10vh);

  width: 100%;
  height: var(--icon-size);
  bottom: 1em;
  right: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1;


  section.scrollbar {
    position: relative;
    overflow: scroll;
    width: 100%;
    height: 100%;
    padding-right: 1em;


    section.timeline {
      display: flex;
      flex-direction: row;
      justify-content: center;
      height: 100%;
      width: fit-content;
      padding-right: calc(50vw - var(--icon-size)*0.5);
      padding-left: calc(50vw - var(--icon-size)*0.5);
      padding-top: 0;
      padding-bottom: 0;
      gap: 0.5em;

      /* a {
        position: sticky;
        left: calc(var(--index) * 0.1em);
        z-index: calc(-1 * var(--index));
      } */

      article {
        height: var(--icon-size);
        width: var(--icon-size);
      }

    }
  }

}

.place-popup .maplibregl-popup-content {
  width: 200px;
  height: 200px;
  position: relative;
  padding: 0;
  border-radius: 5px;

  img.icon {
    object-fit: cover;
    object-position: top;
    height: 20%;
  }
}

article {
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  border-radius: 5%;

  &#current-location {
    border: solid 1px black;
    background-color: var(--background-color);

    h2 {
      display: flex;
      
      span.text {
        width: min-content;
      }

      span.icon {
        width: 2em;
        margin-left: 0.5em;
        background-image: url("/assets/bags/both_bags.svg");
        height: 2em;
        background-size: contain;
        margin: auto 0 auto 0.5em;
      }
    }

    p {
      padding: 0.5em;
      margin: 0;
      font-size: 0.8em;
    }
  }

  img.icon {
    object-fit: cover;
    position: absolute;
    border-radius: 5%;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }

  h2 {
    margin: 0;
    font-size: 1.2em;
    color: var(--title-color);
    padding: 0.5em;
    margin-top: 0.5em;
    backdrop-filter: blur(5px);

    display: inline-block;
    padding-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    border: solid 1px;
    border-left: 0;

    width: min-content;

    transition: padding-left 500ms ease;
  }
}

article.highlight h2 {
  padding-left: 1em;
}

h1,
h2,
h3 {
  font-family: var(--title-font);
}

body {
  margin: 0;
  font-family: var(--body-font);
}

#map {
  width: 100vw;
  height: 100%;
  background: var(--background-color)
}

div.banner {
  position: absolute;
  top: 46px;
  left: 18px;
  transform: rotate(-20deg);
  transition: top 400ms cubic-bezier(.32, -0.38, 0, .36);
  /* https://cubic-bezier.com */

  &.hidden {
    top: -150px;
  }

  &::before {
    background: var(--banner-color);
    border-radius: 0.2em 0.1em;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
    content: " ";
    width: 500%;
    height: 130%;
    left: -250%;
    bottom: -15%;
    position: absolute;
    transform: rotate(10deg) skewY(-10deg);
    z-index: -1;
    border: solid 2px black;
  }

  h1 {
    margin: 0;
    font-size: 2em;
  }

  h2 {
    margin-top: 0.5em;
    font-size: 1em;
  }
}

.maplibregl-ctrl-attrib {
  display: None;
}