@font-face {
  font-family: Inconsolata Variablefont Wdth Wght;
  src: url('../fonts/Inconsolata-Variable.ttf') format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inconsolata Variablefont Wdth Wght;
  src: url('../fonts/Inconsolata-Variable.ttf') format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inconsolata Variablefont Wdth Wght;
  src: url('../fonts/Inconsolata-Variable.ttf') format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Minecraftia;
  src: url('../fonts/Minecraftia-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --1920-nav-text-size: 13px;
  --body-font: #2c2c2c;
  --1920-dropdown-menu-size: 18px;
  --nav-text-color: #fffc;
  --1920-paragraph-height: 20px;
  --pic-to-pic-padding: 30px;
}

.w-embed-youtubevideo {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.w-embed-youtubevideo:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

body {
  color: #484848;
  background-color: #fff;
  font-family: JetBrains Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

p {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  text-decoration: none;
}

a {
  color: #2b2b2b;
  text-decoration: none;
}

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

sup {
  color: #b4b4b4ab;
  font-size: 10px;
  font-weight: 300;
}

.navbar {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  border: 1px #000;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: flex-start space-between;
  align-items: center;
  min-height: 5vh;
  margin-bottom: 0;
  padding: 0 20px;
  display: flex;
}

.navbar.navbar-mobile {
  z-index: 111;
  text-align: left;
  background-color: #fffff8;
  align-content: center;
  align-items: center;
  width: 100vw;
  height: 6vh;
  min-height: 0;
  padding-top: 0%;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 14px;
  position: fixed;
  inset: 0% auto auto 0%;
}

.navbar.navbar-mobile:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  color: #484848cc;
  background-color: #d4d4d400;
}

.container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.container:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  background-color: #0000;
}

.image-browser {
  z-index: 103;
  text-align: left;
  flex: 0 auto;
  width: 80vw;
  max-width: none;
  max-height: none;
  margin-top: 0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mainpage {
  z-index: 100;
  color: #d4d4d4;
  background-color: #fffff7;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: relative;
}

.projects {
  cursor: pointer;
  mix-blend-mode: darken;
  font-family: Source Code Pro, sans-serif;
}

.projects:hover {
  color: #a8a8a8;
}

.section {
  z-index: 10;
  grid-column-gap: 30%;
  grid-row-gap: 30%;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 95vh;
  margin-top: 0;
  padding-top: 0;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  position: relative;
}

.grid {
  z-index: 100;
  grid-column-gap: 341px;
  grid-row-gap: 16px;
  color: #1b1b1b;
  mix-blend-mode: normal;
  background-color: #0000;
  flex-flow: column;
  flex: 0 auto;
  order: 0;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  max-width: none;
  height: 100%;
  margin-top: 0;
  display: flex;
  position: relative;
  overflow: scroll;
}

.intro-p {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #2c2c2c;
  flex-flow: row;
  flex: 0 auto;
  justify-content: center;
  align-self: auto;
  width: 35%;
  margin-left: 0;
  margin-right: 14%;
  padding-left: 0;
  padding-right: 0;
  font-family: JetBrains Mono, sans-serif;
  font-weight: 100;
  display: flex;
}

.p5-container {
  z-index: 101;
  box-sizing: border-box;
  aspect-ratio: 1.92;
  object-fit: cover;
  background-color: #fff0;
  width: 64vw;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  margin-top: 0;
  position: absolute;
  inset: 50% auto auto 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.body {
  min-width: 90%;
  min-height: 70px;
}

.nav-column {
  z-index: 222;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: wrap;
  flex: 0 auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center stretch;
  width: 75%;
  height: auto;
  margin-top: 0;
  margin-bottom: 35px;
  line-height: 20px;
  display: flex;
  position: relative;
  top: auto;
  overflow: visible;
}

.nav-column.nav-margin {
  z-index: 222;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: left;
  flex-flow: wrap;
  flex: 0 auto;
  order: 0;
  grid-template-rows: 382px auto;
  grid-template-columns: .25fr .25fr .25fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-self: auto;
  align-items: center;
  height: auto;
  margin-top: 110px;
  display: inline-flex;
}

.text-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #ff83d2ab;
  text-align: left;
  flex-flow: column wrap;
  place-content: stretch center;
  align-items: flex-end;
  font-family: JetBrains Mono, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  display: flex;
}

.text-block.dropdown-padding {
  text-transform: lowercase;
  margin-top: 100px;
  font-size: 22px;
}

.text-block.dropdown-padding.year {
  color: #7eb47f;
  margin-top: 0;
  font-size: 13px;
  font-weight: 200;
}

.menu-button {
  color: #2b2b2b;
  background-color: #fefef4;
  padding: 0;
}

.menu-button:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  background-color: #d4d4d400;
  max-height: none;
  overflow: visible;
}

.menu-button.w--open {
  opacity: 1;
  mix-blend-mode: normal;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: visible;
}

.menu-button.w--open:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  z-index: 112;
  background-color: #d4d4d400;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  overflow: visible;
}

.text-block-2 {
  z-index: 11111111;
  color: #000;
  font-size: 14px;
  position: relative;
}

.text-block-2.navlink {
  color: #8b8b8b;
  background-color: #0000;
  font-size: 12px;
  font-weight: 200;
}

.text-block-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  z-index: 2147483647;
  color: var(--nav-text-color);
  cursor: pointer;
}

.project-drop-down {
  z-index: 333333;
  background-color: #ddd;
  display: block;
}

.project-drop-down:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  background-color: #0000;
}

.navmenu {
  z-index: 102;
  opacity: .87;
  mix-blend-mode: normal;
  background-color: #000000e6;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  inset: 0%;
}

.navmenu:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  z-index: 111;
}

.link-2 {
  position: relative;
}

.link-2.w--current {
  z-index: 22222;
}

.link-2.navlink {
  z-index: 666666;
  color: #898a8a;
  font-size: 12px;
  font-weight: 200;
}

.link-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  z-index: 2147483647;
  color: #fffc;
  cursor: pointer;
  font-weight: 200;
}

.link-2.navlink.w--current {
  z-index: 6666666;
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 200;
}

.link-3 {
  z-index: 22222;
  position: relative;
}

.link-3.navlink {
  z-index: 666666;
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 200;
}

.link-3.navlink.w--current {
  font-weight: 400;
}

.link-3.navlink.w--current:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
  z-index: 2147483647;
  color: #fffc;
  cursor: pointer;
  font-weight: 200;
}

.hover-img-container {
  z-index: 101;
  opacity: .72;
  mix-blend-mode: normal;
  width: 95vw;
  height: 95vh;
  font-family: Ubuntu, Helvetica, sans-serif;
  position: absolute;
  inset: 50% 0% 0% 50%;
  transform: translate(-50%, -50%);
}

.binance-img {
  mix-blend-mode: normal;
  width: 30vw;
  display: none;
  position: relative;
  inset: 52% 0 auto 8%;
}

.paragraph {
  color: #2c2c2c;
  white-space: normal;
  overflow-wrap: normal;
  width: 100%;
  margin-left: 0%;
  margin-right: 0;
  padding-left: 0%;
  padding-right: 0;
  font-family: JetBrains Mono, sans-serif;
  font-weight: 100;
}

.span-hover {
  color: #7eb47f;
  cursor: pointer;
  font-family: JetBrains Mono, sans-serif;
  font-size: 18px;
  font-weight: 200;
}

.img-ooo {
  width: 15vw;
  max-width: none;
  position: absolute;
  top: 38.5%;
  left: 7%;
}

.mulfunction-img {
  width: 15vw;
  position: absolute;
  top: 19.5%;
  left: 75%;
}

.naturalarrangement-img {
  width: 16vw;
  position: absolute;
  inset: 51.6% auto auto 61%;
}

.bonding-img {
  width: 18vw;
  position: absolute;
  top: 60%;
  left: 31%;
}

.humanmade-img {
  width: 13vw;
  position: absolute;
  top: 32%;
  left: 45%;
  right: auto;
}

.shushu-img {
  width: 15vw;
  position: absolute;
  top: 5%;
  left: 56%;
}

.trace-img {
  width: 15vw;
  position: absolute;
  top: 76%;
  bottom: auto;
  left: 44%;
  overflow: visible;
}

.nothing-img {
  width: 20vw;
  position: absolute;
  top: 75%;
  left: 11%;
}

._0311-img {
  z-index: auto;
  width: 15vw;
  position: absolute;
  inset: 22% auto 0% 27%;
}

.otaku-img {
  width: 18vw;
  position: absolute;
  top: 0%;
  left: 37.6%;
}

.img-binance {
  width: 20vw;
  position: absolute;
  top: 70%;
  left: 68%;
}

.c02g22-img {
  width: 17vw;
  position: absolute;
  top: 8%;
  left: 10%;
}

.loveswipe-img {
  width: 10vw;
  position: absolute;
  top: 52%;
  left: 17%;
}

.container-project-content {
  align-self: flex-start;
  width: 700%;
  max-width: none;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
}

.shadow-two {
  box-shadow: 0 4px 24px #96a3b514;
}

.gallery-scroll {
  z-index: 1;
  background-color: #fff0;
  border-bottom: 1px solid #e4ebf3;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5px 15px;
  display: flex;
  position: relative;
  overflow: visible;
}

.gallery-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin: 0 auto 40px;
  padding: 2vh 5% 0;
  display: flex;
}

.gallery-sticky {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  text-align: justify;
  flex-flow: column;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  width: 40%;
  margin-top: 0;
  padding-top: 0%;
  padding-right: 0;
  display: flex;
  position: sticky;
  top: 17%;
  overflow: visible;
}

.gallery-sticky.middle-sticky {
  top: 25%;
}

.gallery-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: left;
  flex-flow: column;
  flex: 1;
  order: 0;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-self: auto;
  place-items: center;
  width: 60%;
  height: auto;
  padding: 5%;
  display: flex;
  position: static;
}

.gallery-image-wrapper {
  flex-flow: row;
  flex: 0 auto;
  justify-content: center;
  align-items: stretch;
  width: 70%;
  display: flex;
  position: relative;
}

.gallery-image {
  width: 100%;
}

.gallery-image.shadow-two {
  text-align: left;
  vertical-align: baseline;
  flex: 0 auto;
  align-self: auto;
  width: 100%;
  max-width: none;
  margin-bottom: 30px;
}

.gallery-image.shadow-two.human-made-img {
  width: 65%;
}

.gallery-image.shadow-two.heart {
  align-self: center;
  width: 10%;
  height: 10%;
}

.gallery-image.shadow-two.love-phone {
  width: 40%;
}

.intro-text {
  color: #484848;
  text-align: left;
  width: 80%;
  font-size: 11px;
  font-weight: 200;
  line-height: 25px;
}

.heading {
  text-align: left;
  flex: 0 auto;
  order: 0;
  align-self: auto;
  width: 80%;
  margin-top: 0;
  font-family: JetBrains Mono, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 38px;
  display: block;
  overflow: visible;
}

.heading.headingoo {
  width: 80%;
  font-family: Varela Round, sans-serif;
}

.heading.nothing {
  width: 285px;
  font-size: 25px;
}

.youtube {
  width: 100%;
  height: auto;
}

.projectintrotext {
  text-align: left;
  width: 80%;
  font-weight: 300;
}

.body-2 {
  background-color: #fffff8;
  height: auto;
}

.superscript-2 {
  color: #c9c9c9;
  font-weight: 100;
}

.quick-stack {
  grid-row-gap: 20px;
  padding: 0 0 30px;
}

.video-div {
  flex-flow: column;
  flex: 0 auto;
  order: 1;
  justify-content: center;
  width: 100%;
  height: 65vh;
  display: flex;
}

.image-2 {
  width: 60%;
}

.div-block-5 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: 0 auto;
  justify-content: space-around;
  align-self: auto;
  display: flex;
}

.video-2 {
  height: auto;
}

.div-block-6 {
  flex-flow: column;
  width: 60%;
  height: auto;
  display: flex;
}

.div-block-8 {
  width: 100%;
  height: auto;
  display: flex;
}

.code-embed-3 {
  margin-bottom: var(--pic-to-pic-padding);
}

.body-3 {
  height: 100%;
}

.contact-link-about-page {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  flex: 1;
  font-size: 12px;
  font-weight: 200;
  display: flex;
}

.icon-link {
  font-family: JetBrains Mono, sans-serif;
  font-size: 30px;
}

.icon-text-container {
  width: 100%;
  margin-bottom: 3px;
  display: block;
}

.link-hover {
  cursor: pointer;
}

.link-hover:hover {
  color: var(--nav-text-color);
}

.link-4 {
  text-decoration: underline;
}

.link-4:hover {
  color: var(--nav-text-color);
  text-decoration: none;
}

.div-block-9 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 70%;
  display: flex;
}

.div-block-10, .div-block-11 {
  width: 70%;
  display: flex;
}

.div-block-12, .vid_wrap {
  width: 70%;
}

@media screen and (min-width: 1920px) {
  .navbar.navbar-mobile {
    width: 100vw;
    font-size: 1.5em;
  }

  .image-browser {
    flex: 0 auto;
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .image-browser.img {
    max-width: 100%;
  }

  .mainpage {
    flex-flow: row;
    display: flex;
    position: static;
    inset: 0%;
  }

  .section {
    grid-column-gap: 45%;
    grid-row-gap: 45%;
  }

  .intro-p {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 30%;
    font-family: JetBrains Mono, sans-serif;
    font-size: var(--1920-nav-text-size);
    margin-right: 0%;
    font-weight: 100;
    line-height: 20px;
  }

  .p5-container {
    z-index: 101;
    box-sizing: border-box;
    aspect-ratio: 1.92;
    object-fit: cover;
    background-color: #fffff7;
    width: 64vw;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    margin-top: 0;
    padding-top: 0;
    bottom: auto;
    right: auto;
  }

  .nav-column {
    margin-top: 10px;
    font-size: 16px;
  }

  .text-block {
    font-size: var(--1920-nav-text-size);
  }

  .text-block.dropdown-padding.year {
    font-size: var(--1920-dropdown-menu-size);
  }

  .text-block-2 {
    font-size: 20px;
  }

  .text-block-2.navlink, .text-block-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040), .link-2.navlink, .link-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040), .link-2.navlink.w--current, .link-3.navlink, .link-3.navlink.w--current:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    font-size: var(--1920-nav-text-size);
  }

  .hover-img-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex: 0 auto;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 95vw;
    height: 95vh;
    display: block;
    inset: 50% 0% 0% 50%;
    overflow: visible;
    transform: translate(-50%, -50%);
  }

  .paragraph {
    font-size: var(--1920-nav-text-size);
    margin-bottom: 20px;
    line-height: 28px;
  }

  .span-hover {
    font-size: var(--1920-dropdown-menu-size);
  }

  .img-ooo {
    position: absolute;
    top: 38.5%;
    left: 17%;
  }

  .mulfunction-img {
    width: 18vw;
    top: 26.5%;
    left: 72%;
  }

  .naturalarrangement-img {
    width: 20vw;
    top: 68.6%;
    left: 50%;
  }

  .bonding-img {
    width: 18vw;
    top: 66.3%;
    left: 33%;
  }

  .shushu-img {
    top: 34%;
  }

  .trace-img {
    top: 5%;
    left: 51.1vw;
  }

  .nothing-img {
    top: 79%;
  }

  ._0311-img {
    top: 12.6%;
    left: 28%;
  }

  .img-binance {
    top: 72%;
    left: 69%;
  }

  .c02g22-img {
    width: 20vw;
    position: absolute;
    top: 25%;
    left: 8%;
  }

  .loveswipe-img {
    width: 10vw;
    position: absolute;
    top: 62%;
    left: 24%;
  }

  .container-project-content {
    max-width: none;
    margin-left: 0%;
    padding-left: 2%;
    padding-right: 2%;
  }

  .container-project-content.content-mid-align {
    align-self: center;
  }

  .gallery-scroll {
    height: 100%;
  }

  .gallery-wrapper {
    grid-template-columns: 1.5fr 1fr 1fr;
    width: auto;
    height: 100%;
    margin-bottom: 6%;
    padding-left: 4%;
    padding-right: 4%;
  }

  .gallery-sticky {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    height: auto;
    padding-top: 0;
    padding-left: 40px;
    padding-right: 40px;
    position: sticky;
    top: 17%;
  }

  .gallery-sticky.middle-sticky {
    padding-left: 0;
  }

  .gallery-grid {
    margin-left: 100px;
    padding: 0 80px 90px;
  }

  .gallery-image.shadow-two {
    margin-bottom: 40px;
    padding-bottom: 0;
  }

  .intro-text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
  }

  .heading {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 50px;
  }

  .heading.nothing {
    width: 80%;
  }

  .projectintrotext {
    font-size: var(--1920-nav-text-size);
    line-height: var(--1920-paragraph-height);
    font-weight: 200;
  }

  .body-2 {
    height: 100%;
  }

  .quick-stack {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-bottom: 40px;
    padding: 0;
  }

  .image {
    width: 100%;
    height: 100%;
  }

  .about-contact {
    font-size: var(--1920-nav-text-size);
  }

  .contact-link-about-page {
    font-size: var(--1920-nav-text-size);
    margin-bottom: 10px;
  }

  .icon-link {
    font-size: 50px;
  }

  .link-hover {
    font-size: var(--1920-nav-text-size);
  }
}

@media screen and (max-width: 991px) {
  .navbar.navbar-mobile:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #d4d4d400;
  }

  .image-browser {
    z-index: 22222;
  }

  .mainpage {
    z-index: -1;
    height: 100vh;
  }

  .intro-p {
    flex: 0 auto;
    width: 50%;
  }

  .p5-container {
    z-index: -1;
    aspect-ratio: 1.92;
    width: 64vw;
    min-height: auto;
    margin-top: 0;
    top: 50%;
  }

  .body {
    height: 100vh;
    min-height: auto;
  }

  .text-block-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: #ffffffb3;
  }

  .link-2.navlink {
    font-weight: 200;
  }

  .link-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040), .link-3.navlink.w--current:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: #ffffffb3;
  }

  .img-ooo {
    width: auto;
    height: 18vh;
    top: 55%;
  }

  .mulfunction-img {
    width: auto;
    height: 15vh;
    top: 30.5%;
    left: 3.8%;
  }

  .naturalarrangement-img {
    width: auto;
    height: 16vh;
    top: 83%;
  }

  .bonding-img {
    width: auto;
    height: 17vh;
    top: 52%;
    left: 37%;
  }

  .humanmade-img {
    width: auto;
    height: 20vh;
    top: 31%;
    left: 69%;
  }

  .shushu-img {
    width: auto;
    height: 18vh;
    left: 62%;
  }

  .trace-img {
    width: auto;
    height: 15vh;
    top: 82%;
    left: 32%;
  }

  .nothing-img {
    width: auto;
    height: 18vh;
    top: 77%;
    left: 4%;
  }

  ._0311-img {
    width: auto;
    height: 16vh;
    top: 28%;
    left: 33%;
  }

  .otaku-img {
    width: 20vw;
    left: 41.6%;
  }

  .img-binance {
    width: auto;
    height: 18vh;
    top: 61%;
  }

  .c02g22-img {
    width: auto;
    height: 15vh;
    left: 7%;
  }

  .loveswipe-img {
    width: auto;
    height: 21vh;
    left: 26%;
  }

  .container-project-content {
    align-self: flex-start;
    max-width: 728px;
  }

  .gallery-wrapper {
    flex-flow: column;
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
  }

  .gallery-sticky {
    width: 100%;
    margin-top: 10%;
    padding-right: 0;
    position: relative;
    top: 0;
  }

  .gallery-grid {
    text-align: left;
    width: 100%;
    padding-left: 0%;
    text-decoration: none;
    display: flex;
  }

  .projectintrotext {
    width: 100%;
  }

  .body-2 {
    background-color: #fffff8;
  }

  .link-4 {
    cursor: pointer;
  }

  .link-4:hover {
    color: var(--nav-text-color);
  }
}

@media screen and (max-width: 767px) {
  .navbar.navbar-mobile {
    box-sizing: border-box;
    grid-column-gap: 35%;
    grid-row-gap: 35%;
    text-align: left;
    border-style: none;
    flex-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-content: flex-start center;
    align-items: stretch;
    min-height: auto;
    padding-top: 1.5vh;
    padding-bottom: 1vh;
    text-decoration: none;
    display: flex;
  }

  .section {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    flex-flow: column;
    align-items: flex-start;
  }

  .intro-p {
    width: 90%;
    color: var(--body-font);
    margin-right: 0%;
  }

  .p5-container {
    width: 64vw;
  }

  .menu-button {
    text-align: left;
    justify-content: center;
    align-items: center;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    position: relative;
  }

  .text-block-2.navlink {
    text-align: left;
    order: 0;
  }

  .text-block-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
  }

  .project-drop-down {
    text-align: left;
    display: block;
  }

  .navmenu {
    text-align: left;
  }

  .link-2.navlink {
    color: #8a8a8a;
    text-align: center;
    order: 0;
    margin-left: auto;
    margin-right: auto;
    font-weight: 200;
  }

  .link-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
  }

  .link-2.navlink.w--current {
    color: #8a8a8a;
  }

  .link-3.navlink {
    text-align: center;
  }

  .link-3.navlink.w--current:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
  }

  .paragraph {
    width: 90%;
    color: var(--body-font);
    margin-left: 0%;
  }

  .contact-link {
    color: var(--body-font);
  }

  .img-ooo {
    width: 20vw;
    top: 59%;
    left: 5%;
  }

  .mulfunction-img {
    width: auto;
    left: 37%;
  }

  .naturalarrangement-img {
    width: auto;
  }

  .bonding-img {
    width: 25vw;
    left: 51%;
  }

  .humanmade-img {
    width: auto;
    top: 35%;
    left: 1%;
  }

  .shushu-img {
    width: auto;
    left: 68%;
  }

  .trace-img {
    width: auto;
    top: 40%;
    left: 70%;
  }

  .nothing-img {
    width: auto;
  }

  ._0311-img {
    width: auto;
    height: 15vh;
    top: 7%;
    left: 16%;
  }

  .otaku-img {
    width: auto;
    height: 19vh;
    left: 32.6vw;
  }

  .img-binance {
    width: auto;
    height: 20vh;
    top: 71%;
    left: 34%;
  }

  .c02g22-img {
    top: 18%;
  }

  .container-project-content {
    padding-left: 40px;
    padding-right: 40px;
  }

  .gallery-scroll {
    padding: 10px 15px;
  }

  .gallery-wrapper {
    padding-left: 0%;
    padding-right: 0%;
  }

  .gallery-sticky {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    padding-left: 0;
    padding-right: 0;
  }

  .gallery-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .heading {
    text-align: center;
  }

  .projectintrotext {
    width: 100%;
  }

  .link-4 {
    text-decoration: underline;
  }

  .link-4:hover {
    text-decoration: none;
  }
}

@media screen and (max-width: 479px) {
  .navbar {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: row;
  }

  .navbar.navbar-mobile {
    grid-column-gap: 20%;
    grid-row-gap: 20%;
    text-align: left;
    flex-flow: wrap;
    width: 100vw;
    max-width: none;
    margin-bottom: 1.5vh;
    padding-bottom: 1.5vh;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    position: absolute;
    left: auto;
    overflow: visible;
  }

  .navbar.navbar-mobile:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #d4d4d400;
  }

  .image-browser {
    display: none;
  }

  .mainpage {
    background-color: #fffff8;
    height: 100%;
  }

  .section {
    grid-column-gap: 0%;
    grid-row-gap: 0%;
    text-align: left;
    align-items: flex-start;
    width: 90%;
    height: 80%;
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0%;
    padding-right: 0%;
    display: flex;
  }

  .intro-p {
    text-align: left;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
  }

  .p5-container {
    background-color: #b89e9e00;
    flex: 1;
    width: 100%;
    height: 100%;
    top: 50%;
  }

  .body {
    height: 100%;
    overflow: visible;
  }

  .nav-column {
    display: block;
  }

  .text-block {
    justify-content: center;
    align-items: flex-start;
  }

  .text-block.dropdown-padding.year {
    margin-bottom: 5px;
  }

  .menu-button {
    opacity: 1;
    -webkit-text-fill-color: inherit;
    mix-blend-mode: normal;
    background-color: #fffff8;
    background-clip: border-box;
  }

  .menu-button:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #d4d4d400;
  }

  .text-block-2.navlink {
    color: #8a8a8a;
    background-color: #fff0;
    font-size: 11px;
    font-weight: 200;
  }

  .text-block-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
    -webkit-text-fill-color: inherit;
    background-color: #d4d4d400;
    background-clip: border-box;
  }

  .project-drop-down {
    -webkit-text-fill-color: inherit;
    background-color: #ddd0;
    background-clip: border-box;
    border-radius: 0;
  }

  .link-2.navlink {
    font-size: 11px;
    font-weight: 200;
  }

  .link-2.navlink:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
  }

  .link-2.navlink.w--current {
    font-size: 11px;
    font-weight: 200;
  }

  .link-3.navlink {
    color: #8a8a8a;
    flex: 0 auto;
    font-size: 11px;
  }

  .link-3.navlink.w--current {
    font-size: 11px;
    font-weight: 400;
  }

  .link-3.navlink.w--current:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    color: var(--nav-text-color);
    font-weight: 200;
  }

  .binance-img {
    display: none;
    overflow: hidden;
  }

  .paragraph {
    width: 100%;
    color: var(--body-font);
    margin-top: 12%;
    margin-left: 0;
    padding-top: 0;
    padding-left: 0;
  }

  .contact-link {
    color: #4e4e4e;
  }

  .img-ooo {
    width: auto;
    left: 13%;
  }

  .mulfunction-img {
    width: auto;
  }

  .naturalarrangement-img {
    top: 74%;
    left: 38%;
  }

  .bonding-img {
    width: auto;
    top: 47%;
    left: 31%;
  }

  .humanmade-img {
    width: auto;
  }

  .shushu-img {
    width: auto;
    top: 16%;
    left: 51%;
  }

  .trace-img {
    width: auto;
    left: 62%;
  }

  .nothing-img {
    width: auto;
  }

  ._0311-img {
    top: 16%;
    left: 11%;
  }

  .img-binance {
    top: 61%;
  }

  .container-project-content {
    max-width: none;
    margin-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .container-project-content:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #000;
  }

  .gallery-scroll {
    background-color: #fffff800;
    padding-left: 0;
    padding-right: 0;
  }

  .gallery-scroll:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #fffff8;
  }

  .gallery-wrapper {
    background-color: #cfcfa500;
    grid-template-columns: 1fr;
  }

  .gallery-wrapper:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #fff0;
  }

  .gallery-sticky {
    background-color: #d3d3d300;
    margin-top: 21px;
    padding-left: 0%;
    padding-right: 0%;
  }

  .gallery-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .intro-text {
    font-size: 11px;
    font-weight: 200;
    line-height: 20px;
  }

  .heading {
    text-align: left;
  }

  .projectintrotext {
    font-weight: 300;
  }

  .body-2, .body-2:where(.w-variant-54b1a455-2c27-af32-43df-b29485ac6040) {
    background-color: #fffff8;
  }

  .body-3 {
    align-items: center;
    display: flex;
  }

  .about-contact {
    display: block;
  }
}

#w-node-_1a704344-4ee6-3ee3-e1f0-fbe6c549219f-08b1d0d0, #w-node-_73b0941e-fa06-022e-9e4f-5d84b7c9412e-08b1d0d0, #w-node-e18bbc7d-ce7d-e706-1310-9006d61def27-08b1d0d0, #w-node-_44374199-8399-a1b4-dd67-489ac539c719-08b1d0d0, #w-node-_65e2248f-4134-b2c6-8c53-271e8898a7a6-08b1d0d0 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-eb2a6da7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-eb2a6da7 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93628-eb2a6da7, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f9362c-eb2a6da7, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93630-eb2a6da7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-a8bc459b {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-a8bc459b, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-4182ceee {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f9362c-4182ceee, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93630-4182ceee {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-5ee23a5a, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-6c157e54 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0e287c4c-46ef-e1a8-dd48-313c9987e603-367600c8 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-d51ed68e {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (min-width: 1920px) {
  #w-node-_0e287c4c-46ef-e1a8-dd48-313c9987e603-367600c8 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 991px) {
  #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-eb2a6da7, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-a8bc459b {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-eb2a6da7, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-eb2a6da7, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93612-a8bc459b, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-a8bc459b, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-4182ceee, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-5ee23a5a, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-6c157e54, #w-node-ce5686ea-3e2b-5521-44ad-68ebf9f93622-d51ed68e {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'Inconsolata Variablefont Wdth Wght';
  src: url('../fonts/Inconsolata-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inconsolata Variablefont Wdth Wght';
  src: url('../fonts/Inconsolata-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inconsolata Variablefont Wdth Wght';
  src: url('../fonts/Inconsolata-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Minecraftia';
  src: url('../fonts/Minecraftia-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}