@import url("https://fonts.googleapis.com/css?family=Anton|Overpass+Mono:600&display=swap");
/* Variables */
/* Mixins and functions */
/* Reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Typography */
body {
  font-family: "Overpass Mono", monospace;
}

h1,
h2,
h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}

h1 {
  font-size: 3rem;
}
@media (min-width: 40em) {
  h1 {
    font-size: 5rem;
  }
}
@media (min-width: 60em) {
  h1 {
    font-size: 6.875rem;
  }
}

h2 {
  font-size: 1.875rem;
  letter-spacing: 0.03em;
  margin: 0;
}
@media (min-width: 40em) {
  h2 {
    font-size: 3.75rem;
  }
}
@media (min-width: 60em) {
  h2 {
    font-size: 5.5rem;
  }
}

a {
  color: inherit;
}

/* Header */
.page-header {
  position: fixed;
  z-index: 2;
  width: 100%;
}

/* Scroll behaviour */
@media (min-height: 30em) {
  main {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }
}

/* Nav */
.nav__list {
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.625rem 1.25rem;
}

.nav__item a {
  color: white;
  display: block;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
}
.nav__item a:hover, .nav__item a:focus {
  text-decoration: underline;
}

.nav__item--cta {
  margin-left: 1.25rem;
}
.nav__item--cta a {
  font-family: "Anton", sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  color: black;
  background: #ffa700;
  border-radius: 0.375rem;
  min-width: 11.25rem;
  text-align: center;
}
.nav__item--cta a:hover, .nav__item--cta a:focus {
  text-decoration: none;
  background-color: #b37500;
}

/* Sections */
.section {
  color: white;
  position: relative;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media (min-height: 30em) {
  .section {
    height: 100vh;
  }
}
.section a {
  text-decoration: underline;
  color: white;
}
.section a:hover, .section a:focus {
  opacity: 0.7;
}

.section__header {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  padding: 1.25rem;
  color: #6b6a67;
  height: 5rem;
  flex: 0 0 auto;
  z-index: 2;
  align-items: center;
  width: 300px;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  background-color: black;
}
@media (min-width: 60em) {
  .section__header {
    display: flex;
  }
}

.section__title {
  margin: 0;
  font-size: 1.375rem;
  letter-spacing: 0.03rem;
}

.section__content {
  --pad: 1.25rem;
  padding: var(--pad);
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 60em) {
  .section__content {
    --pad: 2.5rem;
    display: grid;
    grid-template-columns: 4fr 3fr 1fr 4fr 2fr 2fr 4fr 1fr 3fr 4fr;
    grid-template-rows: minmax(0, 1fr) repeat(6, minmax(2.5rem, auto)) minmax(0, 1fr);
    gap: 1.25rem;
  }
}
@media (min-height: 30em) {
  .section__content > * {
    opacity: 0;
    transform: translate3d(0, 4rem, 0);
    transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
  }
}

.is-visible .section__content > * {
  opacity: 1;
  transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
  opacity: 0.75;
}

.section__main-title {
  width: 100%;
  text-align: center;
}
@media (min-width: 60em) {
  .section__main-title {
    text-align: left;
  }
}

.section__main-title--left {
  grid-column: 2 / -2;
  grid-row: 4 / 6;
}

.section__main-title--right {
  grid-column: 2 / -2;
  grid-row: 4 / 6;
}
@media (min-width: 60em) {
  .section__main-title--right {
    text-align: right;
  }
}

.section__img {
  max-width: 18.75rem;
  margin-bottom: 1.875rem;
  grid-column: 4 / -1;
  grid-row: 1 / -1;
}
@media (min-width: 60em) {
  .section__img {
    margin-bottom: 0;
    max-width: none;
  }
}

.section__img--left {
  grid-column: 1 / -4;
}

.section__intro {
  text-align: center;
  max-width: 50ch;
}
@media (min-width: 60em) {
  .section__intro {
    text-align: left;
  }
}

/* Hero */
.hero {
  max-height: 50rem;
  position: relative;
  color: #fff;
  background-color: #364b3b;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}

.hero__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero__bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  background: radial-gradient(rgba(0, 0, 0, 0.6) 70%, black);
  opacity: 1;
  transition: opacity 4000ms;
}

.is-visible .hero__bg {
  filter: grayscale(0);
}
.is-visible .hero__bg::after {
  opacity: 0.6;
}

.hero__text {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-shadow: 0 0.1em 0.9375rem rgba(0, 0, 0, 0.25);
}

.hero__title {
  margin-bottom: 0;
  width: 100%;
  z-index: 1;
}

.hero__intro {
  width: 100%;
  z-index: 1;
}
@media (min-width: 60em) {
  .hero__intro {
    font-size: 1.375rem;
  }
}

.hero__footprint {
  opacity: 0.7;
  position: absolute;
  width: 150%;
  height: 150%;
  object-fit: contain;
  object-position: cneter;
}

.gentle-giants {
  background-color: rgba(43, 138, 130, 0.8);
}

.gentle-giants__intro {
  grid-column: 3 / 6;
  grid-row: 6 / 8;
}

.gentle-giants__img {
  grid-column: 4 / -1;
  grid-row: 1 / -1;
}

.carnivore-kingdom__intro {
  grid-column: -6 / -3;
  grid-row: 6 / 8;
}

.aerial-adventure {
  background-color: rgba(138, 43, 68, 0.8);
}

.aerial-adventure__intro {
  grid-column: 3 / 6;
  grid-row: 6 / 8;
}