html,
body {
  background-color: #ffffff;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #111111;
  }
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.c-homepage__skipnav {
  @include hide-visually();

  &:focus {
    background-color: #111111;
    box-shadow: 0 0 0 0.25rem #ffffff;
    color: #f5ed52;
    display: block;
    font-size: var(--scale3);
    padding-top: var(--scale2);
    padding-bottom: var(--scale2);
    position: fixed;
      top: var(--scale2);
      left: var(--scale2);
    text-align: center;
    text-decoration-color: #48d7e7;
    width: calc(100% - var(--scale4));

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  @media screen and (prefers-color-scheme: dark) {
    &:focus {
      background-color: #ffffff;
      box-shadow: 0 0 0 0.25rem #111111;
      color: #111111;
    }
  }
}


.c-homepage__hello,
.c-homepage__about,
.c-homepage__interests,
.c-homepage__writing,
.c-homepage__speaking,
.c-homepage__projects,
.c-homepage__contact,
.c-homepage__footer {
  color: #111111;
  font-family: 'Metropolis', sans-serif;
  grid-column: 1 / 13;
  padding: 15vw 2vw;

  @media screen and (min-width: map-get($breakpoint, "tiny")) {
    padding: 15vw 6vw;
  }

  @media screen and (min-width: map-get($breakpoint, "large")) {
    padding: 8vw 15vw;
  }

  @media screen and (prefers-color-scheme: dark) {
    color: #ffffff;
  }

  a {
    background-color: transparent;
    background-image: linear-gradient(120deg, #111111 0%, #111111 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.05em;
    background-position: 0 90%;
    box-shadow: none;
    color: #111111;
    transition:
      background-size 100ms ease-in,
      color 100ms ease-in;
    text-decoration: none;

    &:hover,
    &:focus {
      color: #ffffff;
      background-size: 100% 100%;
    }

    @media screen and (prefers-color-scheme: dark) {
      color: #ffffff;

      &:hover,
      &:focus {
        color: #111111;
      }
    }

    @media screen and (prefers-reduced-motion) {
      transition: none;
    }
  }
}

.c-homepage__hello {
  padding: 15vw 2vw;

  @media screen and (min-width: map-get($breakpoint, "tiny")) {
    padding: 15vw 6vw;
  }

  @media screen and (min-width: map-get($breakpoint, "large")) {
    padding: 3vw 15vw;
  }
}

.c-homepage__footer {
  h2 {
    color: #ffffff;
  }

  a {
    color: #ffffff;

    &:hover,
    &:focus {
      color: #111111;
    }
  }
}

.c-homepage__about a {
  background-image: linear-gradient(120deg, #872A25 0%, #872A25 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #ff8764 0%, #ff8764 100%);
  }
}

.c-homepage__interests a {
  background-image: linear-gradient(120deg, #8E861A 0%, #8E861A 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #f5ed52 0%, #f5ed52 100%);
  }
}

.c-homepage__writing a {
  background-image: linear-gradient(120deg, #146A69 0%, #146A69 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #69ddae 0%, #69ddae 100%);
  }
}

.c-homepage__speaking a {
  background-image: linear-gradient(120deg, #90378D 0%, #90378D 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #faafe1 0%, #faafe1 100%);
  }
}

.c-homepage__projects a {
  background-image: linear-gradient(120deg, #595959 0%, #595959 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #dddddd 0%, #dddddd 100%);
  }
}

.c-homepage__contact a {
  background-image: linear-gradient(120deg, #48d7e7 0%, #48d7e7 100%);
}


.c-homepage__footer a {
  background-image: linear-gradient(120deg, #48d7e7 0%, #48d7e7 100%);

  @media screen and (prefers-color-scheme: dark) {
    background-image: linear-gradient(120deg, #2484A6 0%, #2484A6 100%);
  }
}


.c-homepage__about p,
.c-homepage__interests h2,
.c-homepage__writing h2,
.c-homepage__speaking h2,
.c-homepage__projects h2,
.c-homepage__contact h2,
.c-homepage__footer h2 {
  font-size: calc(1rem + 4vw);
  font-weight: bold;
  line-height: 1.15;
}


.c-homepage__hello {
  background-color: #48d7e7;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #2484A6;
  }
}

.c-homepage__about {
  background-color: #ff8764;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #872A25;
  }
}

.c-homepage__interests {
  background-color: #f5ed52;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #8E861A;
  }
}

.c-homepage__writing {
  background-color: #69ddae;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #146A69;
  }
}

.c-homepage__speaking {
  background-color: #faafe1;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #90378D;
  }
}

.c-homepage__projects {
  background-color: #dddddd;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #595959;
  }
}

.c-homepage__contact {
  background-color: #ffffff;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #dddddd;

    h2,
    a {
      color: #111111;
    }
  }
}

.c-homepage__footer {
  background-color: #111111;
}


h1.c-homepage__title,
h2.c-homepage__subtitle {
  margin: 0 !important;
}

.c-homepage__title {
  font-size: calc(1rem + 15vw);
  line-height: 1;
  max-width: 6ch;
}


.c-homepage__list {
  font-size: calc(1rem + 2vw);
  list-style-type: none;
  margin-top: var(--scale3);
  margin-left: 0;

  li {
    margin-top: var(--scale2);
  }
}


.c-homepage__list--contact {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--scale1);

  @media screen and (min-width: map-get($breakpoint, "small")) {
    grid-template-columns: 1fr 2fr;
  }
}


.c-homepage__featured-title {
  font-size: calc(1rem + 2vw);
  line-height: 1.3;
  margin-top: var(--scale3);
  max-width: 30ch;
}


.c-homepage__featured-source {
  display: block;
  font-size: calc(1rem + 1vw);
  margin-top: var(--scale0);
}


.c-homepage__nav-wrapper {
  display: grid;
  grid-template-columns: 1fr;

  @media screen and (min-width: map-get($breakpoint, "large")) {
    grid-template-columns: 1fr 2fr;
  }

  nav:nth-of-type(2) {
    margin-top: var(--scale2);

    @media screen and (min-width: map-get($breakpoint, "medium")) {
      margin-top: 0;
    }
  }
}
