@font-face {
  font-family: Cormorant;
  src: url(/assets/Cormorant-Light-D1MTA0JI.ttf);
}
@font-face {
  font-family: Poppins;
  src: url(/assets/Poppins-Regular-CTKNfV9P.ttf);
}
@font-face {
  font-family: Tomorrow;
  src: url(/assets/Tomorrow-Regular-BS0mjboF.ttf);
}
.font-cormorant {
  font-family: Cormorant, serif;
}

.font-poppins {
  font-family: Poppins, sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #4A4A4A #1B1B1B;
  font-family: Poppins, sans-serif;
}

hr {
  display: block;
  color: transparent;
  background: #4a4a4a;
  border: none;
  height: 1px;
  width: 100%;
}

body {
  margin: 0;
  font-family: monospace;
}

p {
  font-size: 1.25rem;
  margin: 0;
  line-height: 2rem;
}
@media only screen and (max-width: 600px) {
  p {
    font-size: 1.1rem;
    text-align: center;
  }
}

.number {
  font-size: 1.6rem;
  font-weight: bolder;
  margin: 0;
}
@media only screen and (max-width: 600px) {
  .number {
    font-size: 1.3rem;
    text-align: center;
  }
}

h2 {
  font-size: 1.875rem;
  margin: 1rem 0;
}
@media only screen and (max-width: 600px) {
  h2 {
    font-size: 1.4rem;
  }
}

.link {
  text-decoration: none;
  color: white;
  margin: 1rem 0;
  font-family: Tomorrow, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
@media only screen and (max-width: 600px) {
  .link {
    font-size: 1rem;
  }
}

h3 {
  font-size: 1.6rem;
  text-align: center;
}
@media only screen and (max-width: 600px) {
  h3 {
    font-size: 1.3rem;
  }
}

h4 {
  font-size: 1.5rem;
  text-align: center;
  margin: 2rem;
}
@media only screen and (max-width: 600px) {
  h4 {
    font-size: 1.2rem;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 33px 90px;
  align-self: stretch;
}
@media only screen and (max-width: 600px) {
  .header {
    flex-direction: column;
    align-items: end;
    padding: 0;
  }
}

.header-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media only screen and (max-width: 600px) {
  .header-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  .header-buttons {
    gap: 3rem;
  }
}

.theme-mode {
  display: flex;
  justify-content: center;
  align-items: center;
}
.theme-mode > p {
  font-size: 1rem;
  padding: 1rem;
}

.project-buttons {
  margin: 2rem;
}
@media only screen and (max-width: 600px) {
  .project-buttons {
    margin: 1rem;
  }
}

.project {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  margin: 5rem 3rem;
}
@media only screen and (max-width: 600px) {
  .project {
    gap: 3rem;
    margin: 4rem 0;
  }
}

.elevation {
  padding: 2rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.05);
}
@media screen and (max-width: 600px) {
  .elevation {
    padding: 1rem;
  }
}

.intro-buttons {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  gap: 2rem;
  padding: 2rem 0;
}
@media screen and (max-width: 600px) {
  .intro-buttons {
    padding: 1rem;
  }
}

.text-center {
  text-align: center;
}

.red {
  color: #CE93D8;
}

.green {
  color: #80DEEA;
}

.wireframes {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}
@media only screen and (max-width: 600px) {
  .wireframes {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

.border {
  border-radius: 1rem;
}
@media screen and (max-width: 600px) {
  .border {
    height: 50vh;
  }
}

.app {
  color: white;
  padding: 0 calc((100vw - 140vh) / 2);
  padding: 2rem;
}

.app.light-mode {
  color: rgb(32, 32, 32);
}
.app.light-mode .button,
.app.light-mode .cv {
  color: rgb(66, 66, 66);
}
.app.light-mode .elevation {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.app.light-mode .wireframes > * {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.app.light-mode .red {
  color: darkorchid;
}
.app.light-mode .green {
  color: darkcyan;
}H2 {
  justify-content: center;
}

.comp-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  justify-content: space-between;
}

.comp-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  padding: 1rem;
}

.comp-columns {
  display: grid;
  gap: 3rem;
}
.comp-columns.stretch {
  align-items: stretch;
}
.comp-columns.center {
  align-items: center;
}
@media screen and (max-width: 600px) {
  .comp-columns.responsive {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 1rem;
  }
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  .comp-columns.responsive {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 1rem;
  }
}

.comp-flex-column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.comp-flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (max-width: 600px) {
  .comp-flex-row.responsive {
    flex-direction: column;
  }
}

.comp-image {
  width: 100%;
}
.comp-image.big {
  width: 22vw;
}
.comp-image.small {
  width: 20vw;
}

.comp-spacer {
  width: 3rem;
  height: 3rem;
}
@media screen and (max-width: 600px) {
  .comp-spacer {
    width: 1rem;
    height: 1rem;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  text-decoration: none;
  color: white;
  border: 1px solid #6B6B6C;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
@media screen and (max-width: 600px) {
  .button {
    font-size: 1.3rem;
    padding: 1.5rem 0.5rem;
  }
}
.button:hover {
  cursor: pointer;
  color: black;
  background-color: white;
}

.comp-tablet {
  transform: perspective(1000px) rotate3d(0, 1, -0.2, 0deg);
  box-shadow: black 0 0 0 0;
  border-radius: 10px;
  transition: transform 500ms, box-shadow 300ms;
}
.comp-tablet > img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 15px 9px 15px 9px;
  border-image: url("/assets/comp-tablet-yyOunKuT.png");
  border-image-slice: 75 45 75 45;
  border-image-width: 15px 9px 15px 9px;
  border-image-repeat: stretch stretch;
}
.comp-tablet.href {
  cursor: pointer;
}
.comp-tablet.big {
  width: 22vw;
}
@media screen and (max-width: 600px) {
  .comp-tablet.big {
    width: 80vw;
  }
}
.comp-tablet.small {
  width: 20vw;
}
@media screen and (max-width: 600px) {
  .comp-tablet.small {
    width: 60vw;
  }
}
@media screen and (max-width: 600px) {
  .comp-tablet {
    width: 80vw;
  }
}

.comp-tablet-hover:hover {
  transform: perspective(1000px) rotate3d(0, 1, -0.2, 15deg);
}
.comp-tablet-hover:hover.pink {
  box-shadow: #CE93D8 0 0 10px 4px;
}
.comp-tablet-hover:hover.green {
  box-shadow: #80DEEA 0 0 10px 4px;
}
.comp-tablet-hover:hover.silver {
  box-shadow: #C0C0C0 0 0 10px 4px;
}
.comp-tablet-hover:hover.orange {
  box-shadow: #ec6826 0 0 10px 4px;
}
.comp-tablet-hover:hover.blau {
  box-shadow: #533ae0 0 0 10px 4px;
}

.comp-tablet-hover-silver:hover {
  transform: perspective(1000px) rotate3d(0, 1, -0.2, 15deg);
  box-shadow: #C0C0C0 0 0 10px 4px;
}

.comp-tablet-hover-orange:hover {
  transform: perspective(1000px) rotate3d(0, 1, -0.2, 15deg);
  box-shadow: #ec6826 0 0 10px 4px;
}

.comp-tablet-hover-blau:hover {
  transform: perspective(1000px) rotate3d(0, 1, -0.2, 15deg);
  box-shadow: #533ae0 0 0 10px 4px;
}

.button-to-top {
  opacity: 0;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99;
  transition: opacity 300ms;
}
.button-to-top.visible {
  opacity: 1;
}
.button-to-top > .button {
  display: flex;
  align-items: center;
  text-align: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.2rem;
  background-color: rgba(0, 0, 0, 0.5);
}

.light-mode .button-to-top > .button {
  background-color: rgb(255, 255, 255);
}.comp-distorted {
  position: relative;
}
.comp-distorted > canvas {
  width: 100%;
}
.comp-distorted > a {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}.intro-image-bank {
  width: 40vw;
}.intro-image-appointments {
  height: 50vh;
}

.story-image {
  height: 40vh;
}.theme-toggle {
  position: relative;
  width: 5.4rem;
  height: 2.4rem;
  border-radius: 1.2rem;
  margin: 2rem 0;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #4A4A4A;
}
.theme-toggle > .notch {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 0.2rem;
  left: 0.2rem;
  border-radius: 2rem;
  transition: left 300ms, background-color 300ms;
  background-color: rgb(16, 16, 16);
}
.theme-toggle.toggled > .notch {
  top: 0.2rem;
  left: 3.2rem;
  background-color: rgb(240, 240, 240);
}
.theme-toggle .icon-light,
.theme-toggle .icon-dark {
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0.2rem;
  width: 2rem;
  height: 2rem;
  left: 3.2rem;
  transform: rotate(0deg);
  transition: left 300ms, opacity 300ms, transform 300ms;
}
.theme-toggle .icon-light.icon-dark,
.theme-toggle .icon-dark.icon-dark {
  background-image: url("./svg/dark.svg");
  opacity: 0;
}
.theme-toggle .icon-light.icon-light,
.theme-toggle .icon-dark.icon-light {
  background-image: url("./svg/light.svg");
  opacity: 1;
}
.theme-toggle.toggled > .icon-dark, .theme-toggle.toggled > .icon-light {
  left: 0.2rem;
  transform: rotate(-180deg);
}
.theme-toggle.toggled > .icon-dark {
  opacity: 1;
}
.theme-toggle.toggled > .icon-light {
  opacity: 0;
}.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  padding: 5rem 0;
}
@media screen and (max-width: 600px) {
  .about {
    gap: 3rem;
  }
}
.about .grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
  row-gap: 3rem;
}
@media screen and (max-width: 600px) {
  .about .grid-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
.about .grid-item-1 {
  grid-area: 1/2/2/3;
}
@media screen and (max-width: 600px) {
  .about .grid-item-1 {
    display: flex;
    justify-content: start;
  }
}
.about .grid-item-1 > p {
  color: #919191;
  font-size: 1rem;
}
.about .grid-item-2 {
  grid-area: 1/4/2/7;
}
@media screen and (max-width: 600px) {
  .about .grid-item-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
.about .grid-item-3 {
  grid-area: 1/8/2/13;
}
.about .grid-item-4 {
  grid-area: 2/2/3/3;
}
@media screen and (max-width: 600px) {
  .about .grid-item-4 {
    display: flex;
    justify-content: start;
  }
}
.about .grid-item-4 > p {
  color: #919191;
  font-size: 1rem;
}
.about .grid-item-5 {
  grid-area: 2/4/2/13;
}
.about .grid-item-5 > p {
  font-size: 1.8rem;
  font-family: Cormorant;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  .about .grid-item-5 > p {
    font-size: 1.2rem;
  }
}
.about p {
  font-family: Tomorrow, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.4rem;
}
.about .photo {
  width: 20vw;
  height: 20vw;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border-radius: 1rem;
  background-image: url("/assets/Larissza-D9nyMxs9.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 600px) {
  .about .photo {
    width: 80vw;
    height: 40vh;
  }
}
.about .light-mode .details {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}.app {
  --blur: 7rem;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
@media screen and (max-width: 600px) {
  .app {
    --blur: 3rem;
  }
}

.background-animation {
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  transition: background-color 500ms;
  background-color: black;
}
.background-animation.light-mode {
  background-color: white;
}.projects {
  position: relative;
  padding: 5rem 0;
}
.projects .flex-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.projects .flex-item > span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #919191;
}
.projects .flex-item > .project-name {
  padding: 0;
  font-size: 1.9rem;
  font-family: Poppins, sans-serif;
}
.projects .flex-item .arrow {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0 8px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%20fill='white'%3e%3cpath%20d='M440-120v-567l-64%2063-56-56%20160-160%20160%20160-56%2056-64-63v567h-80Z'/%3e%3c/svg%3e");
  rotate: 90deg;
}
.projects > .projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 8.3333333333%);
  row-gap: 8rem;
}
@media only screen and (max-width: 600px) {
  .projects > .projects-grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }
}
.projects > .projects-grid .main-label {
  align-self: end;
  grid-column: 2/4;
}
.projects > .projects-grid .main-label > h2 {
  font-size: 3.8rem;
  margin: 0;
}
@media only screen and (max-width: 600px) {
  .projects > .projects-grid .main-label {
    align-self: flex-start;
  }
  .projects > .projects-grid .main-label > h2 {
    font-size: 2.8rem;
  }
}
.projects > .projects-grid .item-web,
.projects > .projects-grid .item-mob {
  transition: transform 200ms;
}
.projects > .projects-grid .item-web:hover,
.projects > .projects-grid .item-mob:hover {
  transform: scale(1.03);
}
.projects > .projects-grid .item-web > div,
.projects > .projects-grid .item-mob > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  animation-name: swing;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
.projects > .projects-grid .item-web > div > img,
.projects > .projects-grid .item-mob > div > img {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
}
@media only screen and (max-width: 600px) {
  .projects > .projects-grid .item-web,
  .projects > .projects-grid .item-mob {
    align-self: auto;
  }
}
.projects > .projects-grid .item-web:nth-child(3n+0) {
  animation-delay: -2s;
}
.projects > .projects-grid .item-web:nth-child(3n+1) {
  animation-delay: -4s;
}
.projects > .projects-grid .item-web:nth-child(2n+0) {
  grid-column: 6/12;
}
.projects > .projects-grid .item-web:nth-child(2n+1) {
  grid-column: 2/8;
}
.projects > .projects-grid .item-mob:nth-child(2n+0) {
  grid-column: 2/5;
  grid-row: 3/4;
}
.projects > .projects-grid .item-mob:nth-child(2n+1) {
  grid-column: 9/12;
  grid-row: 2/3;
}
@keyframes swing {
  0% {
    transform: perspective(1000px) rotate3d(0, 1, 0, 2deg);
  }
  50% {
    transform: perspective(1000px) rotate3d(0, 1, 0, -2deg);
  }
  100% {
    transform: perspective(1000px) rotate3d(0, 1, 0, 2deg);
  }
}.footer {
  border: 1px solid #4A4A4A;
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 2rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 600px) {
  .footer {
    margin: 0;
    padding: 1rem;
    gap: 3rem;
  }
}
.footer h2 {
  font-size: 3.4rem;
  margin: 0;
}
@media only screen and (max-width: 600px) {
  .footer h2 {
    font-size: 2.4rem;
  }
}
.footer .email {
  font-size: 2.4rem;
}
@media only screen and (max-width: 600px) {
  .footer .email {
    font-size: 1.6rem;
  }
}
.footer .grey-small {
  color: #919191;
  font-size: 1rem;
}
@media only screen and (max-width: 600px) {
  .footer .grey-small {
    text-align: start;
  }
}
.footer .column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.footer .column-end {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 1rem;
}
.footer .row {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 600px) {
  .footer .row {
    flex-direction: column;
    align-items: center;
  }
}
.footer .center {
  display: flex;
  justify-content: center;
}
.footer .icon {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.footer .heart,
.footer .arrow {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0 8px;
}
.footer .heart {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%20fill='white'%3e%3cpath%20d='m480-120-58-52q-101-91-167-157T150-447.5Q111-500%2095.5-544T80-634q0-94%2063-157t157-63q52%200%2099%2022t81%2062q34-40%2081-62t99-22q94%200%20157%2063t63%20157q0%2046-15.5%2090T810-447.5Q771-395%20705-329T538-172l-58%2052Zm0-108q96-86%20158-147.5t98-107q36-45.5%2050-81t14-70.5q0-60-40-100t-100-40q-47%200-87%2026.5T518-680h-76q-15-41-55-67.5T300-774q-60%200-100%2040t-40%20100q0%2035%2014%2070.5t50%2081q36%2045.5%2098%20107T480-228Zm0-273Z'/%3e%3c/svg%3e");
}
.footer .arrow {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%20fill='white'%3e%3cpath%20d='M440-120v-567l-64%2063-56-56%20160-160%20160%20160-56%2056-64-63v567h-80Z'/%3e%3c/svg%3e");
  rotate: 90deg;
}