h1,h2 { margin-top: 0; font-size: 2rem; }
main { margin-bottom: -1rem; }
section { padding: 1rem; }
@keyframes globe {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
header {
  background-image: url("/public/img/black.webp"); color: var(--gray-3);
  position: relative; overflow: hidden; height: 30rem; text-align: center;
  h1 { font-size: 3rem; }
  a {
    background-color: var(--gray-3);
    padding: 0.5rem 1rem; border-radius: 1rem;
  }
  #header-b4g {
    width: 12rem; height: auto; margin: 8rem auto 0;
    position: relative; left: 10%; z-index: 1;
  }
  #header-globe {
    width: 200%; margin: -1rem 0 0 -40%;
    object-fit: cover; object-position: 50% 0;
    animation: globe 120s linear infinite;
  }
}
.art {
  padding: 0 1rem 0;
  div {
    display: flex; gap: 1rem; overflow-x: scroll;
    figure {
      margin: 0; text-align: center; padding: 1rem;
      img { max-height: 12rem; width: auto;}
    }
  }
}
#contact {
  background-image: url("/public/img/black.webp"); color: var(--gray-3);
  padding-bottom: 2rem;
  nav {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
    a {
      background-image: url("/public/img/sand.webp");
      border-radius: 1rem; padding: 0.5rem 1rem;
    }
  }
}
/* Large mobile view */
@media screen and (min-width: 30rem) {
}

/* Tablet view */
@media screen and (min-width: 40rem) {
}

/* Desktop view */
@media screen and (min-width: 67rem) {
}