html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.content, html {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.projects__section .projects__wrapper .project__card .project__link, .projects__section .projects__wrapper .project__card .tools span {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
}

@media (width <= 764px) {
  .projects__section .projects__wrapper .project__card .project__link, .projects__section .projects__wrapper .project__card .tools span {
    font-size: 2.8rem;
  }
}

.contact__section .contact__wrapper a, .hobbies__section .hobbies__wrapper span, .projects__section .projects__wrapper .project__card .title {
  font-family: George X;
  font-size: 3rem;
}

@media (width <= 764px) {
  .contact__section .contact__wrapper a, .hobbies__section .hobbies__wrapper span, .projects__section .projects__wrapper .project__card .title {
    font-size: 5.2rem;
  }
}

.contact__section .contact__title, .skills__section .skills__wrapper .skill span {
  font-family: George X;
  font-size: 6rem;
}

.hobbies__section .hobbies__title, .projects__section .projects__title, .skills__section .skills__title {
  font-family: George X;
  font-size: 10rem;
  line-height: 1;
}

@media (width <= 764px) {
  .hobbies__section .hobbies__title, .projects__section .projects__title, .skills__section .skills__title {
    font-size: 12rem;
  }
}

.hero__section .hero__title h1 {
  font-family: George X;
  font-size: 20rem;
}

@media (width <= 764px) {
  .hero__section .hero__title h1 {
    font-size: 15rem;
  }
}

.hobbies__section .hobbies__title, .projects__section .projects__wrapper .project__card .project__link, .projects__section .projects__title, .skills__section .skills__title {
  vertical-align: top;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.hobbies__section .hobbies__title:after, .projects__section .projects__wrapper .project__card .project__link:after, .projects__section .projects__title:after, .skills__section .skills__title:after {
  content: "";
  transform-origin: 0;
  background: currentColor;
  width: 100%;
  height: 1px;
  transition: transform .7s cubic-bezier(.77, 0, .175, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(1);
}

.hobbies__section .hobbies__title:hover:after, .projects__section .projects__wrapper .project__card .project__link:hover:after, .projects__section .projects__title:hover:after, .skills__section .skills__title:hover:after {
  transform-origin: 100%;
  transform: scaleX(0);
}

.hobbies__section .hobbies__title, .projects__section .projects__wrapper .project__card .project__link, .projects__section .projects__title, .skills__section .skills__title {
  display: inline-block;
}

@font-face {
  font-family: Space Grotesk;
  src: url("SpaceGrotesk-Regular.1ad54bb9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: George X;
  src: url("george-x-regular.2b5786ea.woff2") format("woff2"), url("george-x-regular.0df6b92e.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisse BP;
  src: url("suisse-bp-ultra-light.73f21878.woff2") format("woff2"), url("suisse-bp-ultra-light.fb4611e2.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisse BP;
  src: url("suisse-bp-light.aea96ef2.woff2") format("woff2"), url("suisse-bp-light.40e35b7f.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisse BP;
  src: url("suisse-bp-regular.41e24ae3.woff2") format("woff2"), url("suisse-bp-regular.497dc138.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, :after, :before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color: #ddd;
  background-color: #28282b;
  font-size: .520833vw;
  line-height: 1;
  overflow-x: hidden;
}

@media (width <= 764px) {
  html {
    font-size: 1.33333vw;
  }
}

body {
  font-family: George X;
}

.js .loading:before, .js .loading:after {
  content: "";
  z-index: 10000;
  position: fixed;
}

.js .loading:before {
  background: #28282b;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.js .loading:after {
  background: #bc978c;
  width: 100px;
  height: 1px;
  margin: 0 0 0 -50px;
  animation: 1.5s ease-in-out infinite alternate forwards loaderAnim;
  top: 50%;
  left: 50%;
}

@keyframes loaderAnim {
  0% {
    transform-origin: 0%;
    transform: scaleX(0);
  }

  50% {
    transform-origin: 0%;
    transform: scaleX(1);
  }

  50.1% {
    transform-origin: 100%;
    transform: scaleX(1);
  }

  to {
    transform-origin: 100%;
    transform: scaleX(0);
  }
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
}

button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

img {
  vertical-align: middle;
  transition: opacity .4s;
}

.content__img {
  will-change: transform, filter, opacity;
  background-position: 50%;
  background-size: cover;
}

.navigation {
  color: #f9f1e7;
  backdrop-filter: blur(5px);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .5rem 2rem;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.navigation span, .navigation button {
  text-transform: uppercase;
  font-family: Space Grotesk;
  font-size: 2rem;
}

.hero__section {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6rem;
  width: 100vw;
  height: 100vh;
  padding: 0 5rem;
  display: flex;
}

.hero__section .hero__title {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.hero__section .hero__title h1 {
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1;
  overflow: hidden;
}

@media (width <= 764px) {
  .hero__section .hero__title h1 {
    text-align: center;
    font-size: 15rem;
  }
}

.hero__section .hero__img {
  aspect-ratio: 1 / .4;
  z-index: 10;
  will-change: width, transform, height, filter;
  background-image: url("displaypicture.a0c4aab0.jpg");
  background-position: 50%;
  background-size: cover;
  border-radius: 50px;
  width: 35rem;
  display: inline-block;
  position: relative;
}

@media (width <= 764px) {
  .hero__section .hero__img {
    aspect-ratio: 1;
    border-radius: 50px;
    width: 25rem;
  }
}

.hero__section .location, .hero__section span {
  text-transform: uppercase;
  font-family: Space Grotesk;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
}

.skills__section {
  gap: 2rem;
  width: 100vw;
  min-height: 40vh;
  padding: 0 5rem;
  position: relative;
}

.skills__section .skills.content__img {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 50px;
  display: inline-block;
}

.skills__section .skills__title {
  text-transform: uppercase;
  padding: 1rem;
  font-weight: 300;
  display: inline-block;
}

.skills__section .skills__wrapper {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3rem;
  width: 100%;
  margin: 8rem 0 0;
  display: flex;
}

.skills__section .skills__wrapper .skill {
  flex-grow: 1;
  width: min(100%, 300px);
  position: relative;
}

.skills__section .skills__wrapper .skill hr {
  will-change: width;
  background-color: #ddd;
  width: 100%;
  height: .5px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.skills__section .skills__wrapper .skill span {
  text-transform: uppercase;
  width: 100%;
  padding: 1rem;
  font-weight: 300;
  line-height: 1;
  display: block;
}

.projects__section {
  gap: 2rem;
  width: 100vw;
  min-height: 50vh;
  margin: 20rem 0 0;
  padding: 0 5rem;
  position: relative;
}

.projects__section .projects__title {
  text-transform: uppercase;
  padding: 1rem;
  font-weight: 300;
  display: inline-block;
}

.projects__section .projects.content__img {
  aspect-ratio: 1 / .3;
  border-radius: 50px;
  width: 40rem;
  display: inline-block;
}

.projects__section .projects__wrapper {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  margin: 4rem 0 0;
  display: flex;
}

.projects__section .projects__wrapper .project__card {
  flex-flow: column;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  width: min(100%, 400px);
  min-height: 220px;
  padding: 2rem 3rem;
  display: flex;
  box-shadow: 0 3px 8px #0000003d;
}

.projects__section .projects__wrapper .project__card .title {
  text-transform: uppercase;
}

.projects__section .projects__wrapper .project__card .tools {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  display: flex;
}

.projects__section .projects__wrapper .project__card .tools span {
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-radius: 50px;
  width: max-content;
  padding: 1rem 3rem;
}

.projects__section .projects__wrapper .project__card .project__link {
  margin-top: auto;
}

.hobbies__section {
  width: 100vw;
  min-height: 20vh;
  margin: 20rem 0 0;
  padding: 0 5rem;
  position: relative;
}

.hobbies__section .hobbies__title {
  text-transform: uppercase;
  padding: 1rem;
  font-weight: 300;
  display: inline-block;
}

.hobbies__section .hobbies.content__img {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 10rem;
  display: inline-block;
}

.hobbies__section .hobbies__wrapper {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3rem;
  width: 100%;
  margin: 8rem 0 0;
  display: flex;
}

.hobbies__section .hobbies__wrapper span {
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-radius: 100px;
  width: max-content;
  padding: 2rem;
}

.contact__section {
  width: 100vw;
  min-height: 40vh;
  margin: 10rem 0 0;
  padding: 0 5rem;
}

.contact__section .contact__title {
  text-transform: uppercase;
  padding: 1rem;
  font-weight: 300;
  display: inline-block;
  overflow: hidden;
}

.contact__section .contact__wrapper {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3rem;
  width: 100%;
  margin: 2rem 0 0;
  display: flex;
}

.contact__section .contact__wrapper a {
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-radius: 100px;
  width: max-content;
  padding: 1rem 3rem;
}
/*# sourceMappingURL=index.39dfcbfd.css.map */