@media (max-width: 768px) {
  .page.resources .subsection {
    width: 80vw !important;
  }
}
body {
  color: #6bb076;
  font-size: 3vw;
  font-family: "Geist Mono";
  font-weight: 300;
  margin: 0;
}
body a {
  color: #6bb076;
  fill: #6bb076;
  text-decoration: none;
}
body .menu {
  background: #8269a7;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  content: stretch;
  position: fixed;
  width: 100vw;
  z-index: 100;
}
body .menu .link {
  display: flex;
  align-items: center;
}
body .menu .logo {
  height: 7vw;
  transform: translate(0, 1.5vw);
  animation: 0.3s 4 alternate ease-out hop;
  margin-right: 5vw;
  margin-top: -3.5vw;
  margin-bottom: -3.5vw;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  body .menu .logo {
    transform: translate(0, 2.5vw);
  }
}
body .menu .link {
  color: #fff;
  font-size: 3.25vw;
  font-family: Doto;
  font-weight: 700;
  padding: 2vw;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  body .menu .link {
    font-size: 5vw;
  }
}
body .menu .link:not(.home.link),
body .menu .link span {
  transition: font-weight 0.5s, transform 0.5s;
}
body .menu .link:hover {
  font-weight: 900;
}
body .menu .link:hover:not(.home.link),
body .menu .link:hover span {
  transform: scale(1.1);
}
body .page {
  padding-top: 8vw;
  font-size: 2.25vw;
}
@media screen and (max-width: 768px) {
  body .page {
    padding-top: 11vw;
  }
}
@media screen and (max-width: 768px) {
  body .page {
    font-size: 5vw;
  }
}
body .page a,
body .page a * {
  transition: font-weight 0.5s, transform 0.5s;
}
body .page .title {
  font-family: Workbench;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "BLED" 0, "SCAN" -53;
  animation: title-animation 2.7s infinite ease-in-out;
  overflow: visible;
  padding: 10vw 0;
  font-size: 8vw;
  font-weight: 700;
  text-align: center;
  z-index: 50;
}
body .page .title:not(.about .title) {
  padding: 0;
  margin: 0;
  margin-bottom: 2vw;
}
@media screen and (max-width: 768px) {
  body .page .title {
    font-size: 13vw;
  }
}
body .page .green {
  color: #6bb076;
}
body .page .yellow {
  color: #e3bb52;
}
body .page .purple {
  color: #8269a7;
}
body .page .pink {
  color: #d15b8c;
}
body .page .black {
  color: #000;
}
body .page .orange {
  color: #f79f40;
}
body .page .intro {
  text-align: center;
  font-family: Doto;
  width: 65vw;
  font-weight: 900;
}
body .page .subtitle {
  font-weight: 500;
  font-size: 200%;
}
body .page .subtitle2 {
  font-weight: 500;
  font-size: 150%;
}
body .page .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;
  padding: 2vw;
  transform: translateZ(0);
}
body .page .gallery .tile img {
  width: 100%;
  border-radius: 1.5vw;
}
body .page .gallery .tile:nth-child(odd) img {
  box-shadow: #6bb076 1vw 1vw;
}
body .page .gallery .tile:nth-child(even) img {
  box-shadow: #e3bb52 1vw 1vw;
}
body .page.home {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body .page.home .title {
  display: block;
  width: 100%;
}
body .page.home .spacer {
  height: 2vw;
}
body .page.about {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  body .page.about {
    flex-direction: column-reverse;
  }
}
body .page.about .column.frog {
  padding-top: 10vw;
  background: linear-gradient(to bottom right, #fff, #6bb076);
}
body .page.about .column.frog .self-portrait {
  display: block;
  margin: auto;
}
@media screen and (min-width: 768px) {
  body .page.about .column.frog .self-portrait {
    position: sticky;
    top: 50%;
    transform: translateY(-35%);
  }
}
body .page.about .column.text {
  padding: 2vw;
  background-color: #6bb076;
  background-blend-mode: invert;
}
body .page.about .column.text .title {
  position: fixed;
  padding: 2vw;
  left: 0;
  right: 0;
  top: 8vw;
  text-align: center;
  background: linear-gradient(90deg, #6bb076 0% 50%, transparent 50% 100%);
  color: #6bb076;
  transform: translateY(-8vw);
}
body .page.about .column.text .title.white {
  color: #fff;
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 50% 100%);
}
body .page.about .column.text .bio {
  padding-top: 10vw;
}
body .page.about .column.text a {
  color: #fff;
}
body .page.about .column.text a:hover {
  font-weight: 900;
}
body .page.about .column.text a:hover b {
  font-weight: 300;
}
body .page.about .column.text ul.events {
  list-style-type: none;
  margin-left: -3vw;
}
body .page.about .column.text ul.events li * {
  flex-direction: row;
  display: inline;
}
body .page.about .column.text ul.events svg {
  width: 2vw;
  margin-right: 1vw;
  fill: #fff;
  display: inline;
}
body .page.about .self-portrait {
  width: 50vw;
}
body .page.resources a {
  color: inherit;
  font-weight: 500;
}
body .page.resources a:hover {
  font-weight: 700;
}
body .page.resources li {
  margin-top: 2vw;
}
body .page.resources .gallery.top {
  grid-template-columns: repeat(7, 1fr);
}
@media screen and (max-width: 768px) {
  body .page.resources .gallery.top {
    grid-template-columns: repeat(4, 1fr);
  }
}
body .page.resources .gallery {
  grid-template-columns: repeat(5, 1fr);
}
@media screen and (max-width: 768px) {
  body .page.resources .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
body .page.resources .section {
  padding: 2vw;
  width: 96vw;
}
body .page.resources .subsection {
  width: 46vw;
  margin: 2vw;
  padding: 2vw;
  padding-top: 0.2vw;
  border-radius: 4vw;
}
body .page.resources .subsection .subtitle2 {
  text-align: center;
}
body .page.resources .section.intro {
  background: #fff;
}
body .page.resources .section.intro .title {
  color: #6bb076;
}
body .page.resources .section.supplies {
  color: #fff;
  background: #d15b8c;
}
body .page.resources .section.supplies .subsection {
  color: #d15b8c;
  background: #fff;
}
body .page.resources .section.base {
  color: #000;
  background: #e3bb52;
}
body .page.resources .section.base .tile:nth-child(odd) img {
  box-shadow: #d15b8c 1vw 1vw;
}
body .page.resources .section.base .tile:nth-child(even) img {
  box-shadow: #8269a7 1vw 1vw;
}
body .page.resources .section.starting {
  color: #fff;
  background: #8269a7;
}
body .page.resources .section.starting .subsection {
  color: #8269a7;
  background: #fff;
}
body .page.resources .section.process {
  color: #8269a7;
  background: #fff;
}
body .page.resources .section.painting {
  color: #fff;
  background: #d15b8c;
}
body .page.resources .section.outro {
  color: #000;
  background: #e3bb52;
}
body .footer {
  font-size: 2.25vw;
  text-align: center;
}
@media screen and (max-width: 768px) {
  body .footer {
    font-size: 5vw;
  }
}
body .footer .social-icons {
  margin-bottom: 2vw;
  margin-top: -1vw;
}
body .footer .social-icon svg {
  width: 5vw;
  margin: 0 3vw;
  transition: transform 0.5s;
}
@media screen and (max-width: 768px) {
  body .footer .social-icon svg {
    width: 10vw;
  }
}
body .footer .social-icon svg:hover {
  transform: scale(1.2);
}
body .inverted {
  color: #fff;
  background-color: #6bb076;
}
@-moz-keyframes title-animation {
  0% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
  25% {
    font-variation-settings: "BLED" 0, "SCAN" 25;
  }
  50% {
    font-variation-settings: "BLED" 100, "SCAN" 25;
  }
  75% {
    font-variation-settings: "BLED" 100, "SCAN" -43;
  }
  100% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
}
@-webkit-keyframes title-animation {
  0% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
  25% {
    font-variation-settings: "BLED" 0, "SCAN" 25;
  }
  50% {
    font-variation-settings: "BLED" 100, "SCAN" 25;
  }
  75% {
    font-variation-settings: "BLED" 100, "SCAN" -43;
  }
  100% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
}
@-o-keyframes title-animation {
  0% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
  25% {
    font-variation-settings: "BLED" 0, "SCAN" 25;
  }
  50% {
    font-variation-settings: "BLED" 100, "SCAN" 25;
  }
  75% {
    font-variation-settings: "BLED" 100, "SCAN" -43;
  }
  100% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
}
@keyframes title-animation {
  0% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
  25% {
    font-variation-settings: "BLED" 0, "SCAN" 25;
  }
  50% {
    font-variation-settings: "BLED" 100, "SCAN" 25;
  }
  75% {
    font-variation-settings: "BLED" 100, "SCAN" -43;
  }
  100% {
    font-variation-settings: "BLED" 0, "SCAN" -43;
  }
}
@-moz-keyframes hop {
  from {
    transform: translate(0, 1.5vw);
  }
  to {
    transform: translate(0, 0vw);
  }
}
@-webkit-keyframes hop {
  from {
    transform: translate(0, 1.5vw);
  }
  to {
    transform: translate(0, 0vw);
  }
}
@-o-keyframes hop {
  from {
    transform: translate(0, 1.5vw);
  }
  to {
    transform: translate(0, 0vw);
  }
}
@keyframes hop {
  from {
    transform: translate(0, 1.5vw);
  }
  to {
    transform: translate(0, 0vw);
  }
}