body {
  background-color: black;
}

nav {
  width: 100%;
  height: 100vh;
  display: grid;
}

@media screen and (max-width: 800px) {
  nav {
    grid-template-rows: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 801px) {
  nav {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

nav a {
  display: block;
  position: relative;
  background-repeat: no-repeat;
  transition: box-shadow 150ms ease-in-out;
}

nav a:focus {
  outline: none;
}

nav a img {
  position: absolute;
  left: 5%;
}

.find {
  background-color: #6ab6a7;
  background-image: url(https://yourweirdos.com/images/find-your-weirdos-art.png);
}

.find:hover,
.find:focus {
  box-shadow: inset 0 0 0 7px #f29199;
}

@media screen and (max-width: 800px) {
  .find {
    background-size: 80% auto;
    background-position: left 200px top 90%;
  }
  .find img {
    width: 100%;
    max-width: 170px;
    top: 20%;
  }
}

@media screen and (min-width: 801px) {
  .find {
    background-size: auto 90%;
    background-position: 50% 90%;
  }
  .find img {
    max-width: 300px;
    width: 70%;
    top: 5%;
  }
}

.meet {
  background-color: white;
}

.meet:hover,
.meet:focus {
  box-shadow: inset 0 0 0 7px #ffc200;
}

@media screen and (max-width: 800px) {
  .meet {
    background-image: url(https://yourweirdos.com/images/meet-our-weirdos-art2.svg);
    background-size: calc(120% - 250px) auto;
    background-position: left 250px center;
  }
  .meet img {
    width: 100%;
    max-width: 170px;
    top: 20%;
  }
}

@media screen and (min-width: 801px) {
  .meet {
    background-image: url(https://yourweirdos.com/images/meet-our-weirdos-art.svg);
    background-size: auto calc(120% - 150px);
    background-position: center bottom 150px;
  }
  .meet img {
    bottom: 3%;
    max-width: 300px;
    width: 60%;
  }
}

@media screen and (min-width: 1201px) {
  .meet {
    background-size: auto calc(120% - 200px);
    background-position: center bottom 200px;
  }
}

.home {
  background-color: #1f4753;
  background-image: url(https://yourweirdos.com/images/bg-earth-gets-caught.svg);
}

.home:hover,
.home:focus {
  box-shadow: inset 0 0 0 7px #12acef;
}

@media screen and (max-width: 800px) {
  .home {
    background-size: auto 110%;
    background-position: 90% 100%;
  }
  .home img {
    width: 100%;
    max-width: 130px;
    top: 20%;
  }
}

@media screen and (min-width: 801px) {
  .home {
    background-size: auto 80%;
    background-position: 90% 100%;
  }
  .home img {
    max-width: 200px;
    top: 5%;
  }
}