@import "https://fonts.googleapis.com/css2?family=Space+Mono&display=swap";
@import "https://fonts.googleapis.com/css2?family=Recursive&display=swap";
:root {
  --startColor: #ff8080;
  --stopColor: #ff8080;
}

* {
  box-sizing: border-box;
  overscroll-behavior-y: none;
  margin: 0;
  padding: 0;
  font-family: Space Mono, monospace;
}

html {
  width: 100%;
  max-width: 100%;
}

body {
  background: #090901;
  width: 100%;
  max-width: 100%;
  font-family: Space Mono, monospace;
}

main {
  width: 100%;
  height: 300vh;
  position: absolute;
  top: 0;
  left: 0;
}

.scroll-container {
  width: 100%;
  position: relative;
}

::placeholder {
  color: #fff;
  opacity: 1;
}

.shape-overlays {
  pointer-events: none;
  z-index: 999999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.shape-overlays__path:nth-of-type(3), .shape-overlays__path:nth-of-type(2), .shape-overlays__path:first-of-type {
  z-index: 9999999;
}

.fluid-menu {
  pointer-events: none;
  opacity: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vw;
  display: flex;
  left: 0;
}

.fluid-menu ul {
  pointer-events: none;
  z-index: 99999999;
  color: #fff;
  text-decoration: none;
  transform: translateY(-100vh);
}

.fluid-menu a {
  text-transform: uppercase;
  font-family: Recursive, sans-serif;
}

.transitioning {
  pointer-events: none;
}

.hamburger {
  color: #fff;
  z-index: 999999999;
  cursor: pointer;
  margin: 0 1rem;
  font-size: 3rem;
  line-height: 1.2;
  position: fixed;
  top: 0;
  right: 0;
}

.contact-section {
  height: 100vh;
  overflow: hidden;
}

a {
  transition: color .2s;
}

a:link, a:visited {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #ff69b4;
  transition: color .2s;
}

ul {
  list-style: none;
}

#logo {
  z-index: 999999999;
  width: 28px;
  height: 27px;
  margin: 1em;
  position: fixed;
}

p {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Space Mono, monospace;
  font-size: 1.125rem;
  font-weight: 500;
}

.svg-container {
  z-index: -1;
  pointer-events: none;
  place-items: center;
  width: 100%;
  height: calc(310vh + 150px);
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

svg {
  width: 100%;
  height: 100%;
}

#blobs {
  position: absolute;
}

.text-container {
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.text-container h1 {
  color: #fff;
  text-align: center;
  font-size: 55px;
}

#path-ffl {
  fill: #6be1ff;
  animation: 20s linear -4s infinite alternate moveffl;
}

#path-fl {
  fill: #ff7b00;
  animation: 25.5s linear -8.5s infinite alternate-reverse move1;
}

#path-fr {
  fill: #ff169f;
  animation: 17s linear -6s infinite alternate-reverse move2;
}

#path-c {
  animation: 26s linear infinite alternate-reverse move3;
}

#path4 {
  animation: 19s linear infinite alternate-reverse move4;
}

#path-r {
  fill: #d100d1;
  animation: 16s linear infinite alternate-reverse move5;
}

@keyframes moveffl {
  0% {
    transform: translate(4%);
  }

  100% {
    transform: translate(4%, 300vh);
  }
}

@keyframes move1 {
  0% {
    transform: translate(61%);
  }

  100% {
    transform: translate(61%, 150vh);
  }
}

@keyframes move2 {
  0% {
    transform: translate(55%);
  }

  100% {
    transform: translate(55%, 210vh);
  }
}

@keyframes move3 {
  0% {
    transform: translate(20%, 100vh);
  }

  100% {
    transform: translate(20%);
  }
}

@keyframes move4 {
  0% {
    transform: translate(40%);
  }

  100% {
    transform: translate(40%, 100vh);
  }
}

@keyframes move5 {
  0% {
    transform: translate(50%, 300vh);
  }

  100% {
    transform: translate(50%, -10vh);
  }
}

@keyframes moveBorder {
  0% {
    transform: translate(44%, 293vh);
  }

  100% {
    transform: translate(44%, 274vh);
  }
}

@keyframes moveCandy {
  0% {
    transform: translate(75%, 210vh)scale(1.5);
  }

  100% {
    transform: translate(75%, 290vh)scale(1.5);
  }
}

#path-border {
  fill: #7100bd;
  animation: 9s linear infinite alternate-reverse moveBorder;
  transform: translate(44%, 250vh)scale(.5);
}

#path-candy {
  animation: 22s linear infinite alternate-reverse moveCandy;
  transform: translate(75%, 210vh)scale(1.5);
}

.info-section {
  width: 100%;
  height: 100vh;
  position: relative;
}

.info-text-container {
  flex-direction: column;
  justify-content: center;
  height: 90%;
  margin: 2rem 3rem 0 2rem;
  display: flex;
  position: absolute;
  right: 0;
}

.info-text {
  color: #fff;
  text-align: right;
  opacity: 0;
  font-size: 6vw;
  overflow: hidden;
}

.cta-button {
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: none;
  border: 2px solid #fff;
  border-radius: 50px;
  outline: none;
  margin: 2.5em 2.7em;
  padding: 1.1em;
  font-family: Recursive, sans-serif;
  position: absolute;
  bottom: 0;
  right: 0;
}

.cta-button-card-section {
  color: #fff;
  letter-spacing: .1em;
  background: #ff009d;
  border: none;
  margin: 0;
  position: relative;
  box-shadow: 0 -2px 10px #0000005d;
}

.splitting .char {
  display: inline-block;
}

.card-section-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.card-section-title {
  color: #fff;
  margin: 1.7em 4rem;
  font-size: 3.2vw;
  position: absolute;
  top: 0;
  left: 0;
}

.card-section, .card-section-bg {
  flex-flow: wrap;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.card-section-bg {
  position: absolute;
}

.glass-card, .glass-card-bg {
  text-align: center;
  border-radius: 10px;
  flex: 1;
  height: 60vh;
  margin: 1em;
}

.glass-card-bg {
  background: #0000004d;
  border: 1px solid #ff73f81a;
}

.glass-card {
  backdrop-filter: blur(15px);
  color: #fff;
  border: 1px solid #ffffff0f;
  padding: 2em;
}

.glass-card h3 {
  margin-bottom: 1rem;
  font-size: 4vw;
}

.card-section-bottom {
  color: #fff;
  z-index: 999;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -6em;
  display: flex;
}

.card-section-bottom p {
  font-size: 2vw;
}

.portfolio-section {
  background: linear-gradient(#e6646400, #bc91e52f, #ec1fff4f);
  width: 100%;
  height: calc(100vh + 100px);
  overflow: hidden;
}

.portfolio-section-container {
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.portfolio-section-content {
  flex: 1;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50%;
  display: flex;
}

.portfolio-title {
  color: #fff;
  z-index: 9;
  place-self: start flex-start;
  margin: 5vw 4rem 0;
  font-size: 3.6vw;
}

.svgtext--1 {
  color: #fff;
  fill: #fff;
  z-index: 20;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  font-size: 66px;
}

.svgtext--1 textPath {
  cursor: pointer;
  pointer-events: all;
}

.svgtext--2 {
  color: #fff;
  fill: #fff;
  z-index: 20;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  font-size: 24px;
  position: absolute;
  top: 14vh;
}

#clip-path {
  transform: translate(144px, 150px)scale(1.6);
}

.clip-border {
  clip-path: circle(200px);
  transform-origin: center;
  background-color: #d4d4d4;
  width: 500px;
  height: 500px;
  transition: transform .7s cubic-bezier(.075, .82, .165, 1);
  position: absolute;
  transform: scale(1.003);
}

.masked-image {
  clip-path: circle(200px);
  width: 500px;
  height: 500px;
  transition: transform .7s cubic-bezier(.075, .82, .165, 1), opacity 1.2s;
  position: absolute;
}

.masked-image-0 {
  opacity: 0;
  background: url("richback.8643fb58.png") center / 100% no-repeat;
}

.masked-image-1 {
  opacity: 1;
  background: url("costEarth.ea1b4ab8.png") center / 100% no-repeat;
}

.masked-image-small-0 {
  background: url("3dECC.345725bf.png") center / 100% no-repeat;
}

.masked-image-small-1 {
  background: url("costEarthStats.c4064573.png") center / 100% no-repeat;
}

.blob-image {
  position: relative;
}

.blob-image-1 {
  flex: 60%;
  transform: translateY(-80px);
}

.blob-1-text {
  flex: 40%;
  font-size: 3vw;
}

.blob-image-2 {
  bottom: 300px;
  left: 35vw;
  transform: scale(.6);
}

.arrow-next {
  stroke: #fff;
  color: #fff;
  cursor: pointer;
  z-index: 99999;
  width: 8vw;
  height: 8vw;
  margin-right: 2rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.arrow-next path {
  animation: 2s ease-in-out infinite both pulsate-back;
}

@keyframes pulsate-back {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(.9);
  }

  100% {
    transform: scaleX(1);
  }
}

footer {
  color: #fff;
  text-align: center;
  background: #305;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 250px;
  display: flex;
  position: relative;
}

.custom-shape-divider-bottom-1617084803 {
  width: 100%;
  line-height: 0;
  position: absolute;
  top: -100px;
  left: 0;
  overflow: hidden;
}

.custom-shape-divider-bottom-1617084803 svg {
  width: calc(100% + 1.3px);
  height: 100px;
  display: block;
  position: relative;
}

.custom-shape-divider-bottom-1617084803 .shape-fill {
  fill: #305;
}

.footer-main {
  justify-content: space-evenly;
  display: flex;
  overflow: hidden;
}

.footer-section {
  width: 100%;
  height: 150px;
  margin-top: 1em;
}

.footer-section h5 {
  text-transform: uppercase;
  margin: .5em 0 1em;
  font-family: Recursive, sans-serif;
  font-size: 1.2em;
}

.footer-section li {
  margin: 1em;
  font-size: 1em;
}

.footer-bottom {
  justify-content: center;
  align-items: center;
  margin: 1em;
  font-family: Recursive, sans-serif;
  font-size: .8rem;
  display: flex;
}

@media screen and (width <= 680px) {
  .custom-shape-divider-bottom-1617084803 {
    top: -50px;
  }

  .custom-shape-divider-bottom-1617084803 svg {
    height: 50px;
  }

  .footer-section {
    height: 180px;
    margin-top: 1.5em;
  }

  .footer-section-contact {
    display: none;
  }
}

.about-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2em;
}

.about-section h2 {
  color: #fff;
  margin: .4em;
  font-size: clamp(2em, 6vw, 5em);
}

.about-section h3 {
  text-align: center;
  margin: .6em 0;
}

.about-section .first-line {
  text-align: center;
  text-align: center;
  text-shadow: 1px 1px #2b2b2b;
  max-width: 700px;
  margin: 0 auto 1em;
}

.about-section .last-line {
  text-align: center;
  text-shadow: 1px 1px #2b2b2b;
  margin: 1em 0;
}

.about-section .multi-container {
  flex-flow: wrap;
  width: 100%;
  margin: 1em 0;
  display: flex;
}

.about-section .multi-container > div {
  background: #0003;
  border: 1px solid #fff;
  border-radius: 7px;
  flex: 1;
  margin: 1em;
  padding: 0 1em 2em;
}

:root {
  --surface-color: #fff;
  --curve: 30;
}

* {
  box-sizing: border-box;
}

.cards {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 4rem 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.cards li {
  border: 5px solid #fff;
  border-radius: 36px;
}

.card {
  border-radius: calc(var(--curve) * 1px);
  background: #fff;
  flex-grow: 1;
  flex-basis: auto;
  min-width: 200px;
  max-width: 330px;
  height: 100%;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

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

.card__overlay {
  z-index: 1;
  border-radius: calc(var(--curve) * 1px);
  background-color: var(--surface-color);
  transition: all .2s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
}

.card:hover .card__overlay {
  transform: translateY(0);
}

.card__header {
  border-radius: calc(var(--curve) * 1px) 0 0 0;
  background-color: var(--surface-color);
  align-items: center;
  gap: 2em;
  padding: 2em;
  transition: all .2s ease-in-out;
  display: flex;
  position: relative;
  transform: translateY(-100%);
}

.card__arc {
  z-index: 1;
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 100%;
  right: 0;
}

.card__arc path {
  fill: var(--surface-color);
  d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}

.card:hover .card__header {
  transform: translateY(0);
}

.card__thumb {
  border-radius: 50%;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.card__thumb.crayon, .card__thumb.lightning {
  border-radius: 0%;
}

.card__title {
  color: #6a515e;
  margin: 0 0 .3em;
  font-size: 1em;
}

.card__description {
  color: #7a6e74;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0 2em 2em;
  display: -webkit-box;
  overflow: hidden;
}

.contact-section {
  justify-content: center;
  align-items: center;
  margin: 2em;
  display: flex;
}

.contact-content-container {
  max-width: 1200px;
}

.contact-section h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(2rem, 6vw, 5rem);
}

.contact-container {
  background: #0003;
  border: 1px solid #fff;
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 3em);
  margin: 3.5em 1.5em 1.5em;
  padding: 2.5vw 2vw 2vw;
  display: flex;
}

.contact-name-email {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.contact-container input, textarea {
  color: #fff;
  background: none;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: .5em 1em;
}

#contact-name {
  width: 100%;
  margin-right: 1em;
}

#contact-email {
  width: 100%;
  margin-left: 1em;
}

#contact-message {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 30vh;
  margin: 1.5em 0;
}

.contact-submit-button {
  color: #fff;
  background: none;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: .5em 1em;
}

.contact-back {
  margin: 3em 0 0;
  font-size: 2em;
}

.contact-arrow {
  display: inline-block;
  transform: rotate(180deg);
}

@media screen and (width <= 680px) {
  .glass-card, .glass-card-bg {
    flex-basis: 100%;
    height: 30vh;
    padding: 0;
  }

  .cta-button-card-section, .portfolio-section {
    margin-top: 9em;
  }

  .portfolio-title {
    margin: 5vw 1rem 0;
    font-size: 7.6vw;
  }

  .contact-container {
    width: 100%;
    margin: 2em 0;
  }

  .svgtext--2 {
    font-size: 32px;
    top: 10vh;
  }

  .arrow-next {
    width: 16vw;
    height: 16vw;
  }

  .card-section-title {
    display: none;
  }
}
/*# sourceMappingURL=index.2cdaf7bc.css.map */