@charset "UTF-8";
:root {
  --color-green: #a6ff00;
  --color-green-light: rgba(146, 224, 0, 0.8);
  --color-yellow: #ffee00;
  --color-orange: #ff9300;
  --color-blue: #03f8ff;
  --color-blue-light: rgba(0, 208, 214, 0.6);
  --color-red: #ff2500;
  --color-dark: #001824;
  --home-color-background: var(--color-dark);
  --home-color-background-light: #062230;
  --home-color-background-dark: #000d18;
  --home-color-background-darker: #000a0f;
  --color-text: #fff;
  --color-text-dim: #7d9bab;
  --color-text-dimmer: #315264;
  --color-text-dark: #203642;
  --color-text-dark-lighten: #7aa0b4;
  --project-color-background: #fafcff;
  --project-color-background-header: #d6dce5;
  --project-color-text: var(--home-color-background);
  --image-background: #132c39;
  --border-color: #334650;
  --border-color-light: rgba(51, 70, 80, 0.5);
  --font-family-paragraph: "GeneralSans-Regular";
  --font-family-paragraph-variable: "GeneralSans-Variable";
  --font-family-bold: "GeneralSans-Bold";
  --font-family-bold-variable: "GeneralSans-Variable";
  --font-family-title: "GeneralSans-Bold";
  --font-family-title-variable: "GeneralSans-Variable";
  --font-family-comments: "DMMono-Regular";
  --font-family-mono: "DMMono-Regular";
  --font-size-paragraph-mobile: 14px;
  --font-size-paragraph-tablet: clamp(14px, 1.5vw, 1.45vw);
  --font-size-paragraph-desktop: clamp(18px, 1.5vw, 1vw);
  --border-radius: 1em;
  --grid-gap: 4vw;
  --grid-colums: 4;
  --grid-colums-mobile: 6;
  --grid-colums-tablet: 10;
  --grid-colums-desktop: 12;
  --width: calc(100vw - var(--grid-gap)*2);
  --width-three-quarters: 66%;
  --width-two-third: 56%;
  --width-half: 47.7%;
  --width-third: 30.4%;
  --width-quarter: 21.7%;
  --width-full: 100%;
  --width-three-quarters-full: calc(100%/4 * 3);
  --width-two-third-full: calc(100%/3 * 2);
  --width-half-full: calc(100%/2 -1px);
  --width-third-full: calc(100%/3);
  --width-quarter-full: calc(100%/4 -3px);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 0.5s ease-in;
}
@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    transform: translate3d(0, 2em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUpSmall {
  animation: fadeInUpSmall 0.5s ease-in-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation: fadeInUp 0.5s ease-in-out;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes textColorAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@font-face {
  font-family: "GeneralSans-Variable";
  src: url("../../fonts/GeneralSans-Variable.woff2") format("woff2"), url("../../fonts/GeneralSans-Variable.woff") format("woff"), url("../../fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 350 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans-Regular";
  src: url("../../fonts/GeneralSans-Regular.woff2") format("woff2"), url("../../fonts/GeneralSans-Regular.woff") format("woff"), url("../../fonts/GeneralSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans-Bold";
  src: url("../../fonts/GeneralSans-Bold.woff2") format("woff2"), url("../../fonts/GeneralSans-Bold.woff") format("woff"), url("../../fonts/GeneralSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMMono-Regular";
  src: url("../../fonts/DMMono-Regular.woff2") format("woff2"), url("../../fonts/DMMono-Regular.woff") format("woff"), url("../../fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
h1, h2, h3 {
  font-family: var(--font-family-title-variable), var(--font-family-title), sans-serif;
  font-weight: 700;
  line-height: 1em;
}

h1, h2 {
  grid-column: 1/13;
  color: var(--color-text-dimmer);
}

h2 {
  margin-top: 1em;
  margin-bottom: 0;
}
@media (min-width: 960px) {
  h2 {
    margin-top: 1em;
    margin-bottom: 0.6em;
  }
}

h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
@media (min-width: 960px) {
  h3 {
    margin-top: 1em;
    margin-bottom: 0.6em;
  }
}

p,
ul,
ol {
  margin: 0;
  padding-bottom: 0.8em;
  line-height: 1.5em;
  letter-spacing: 0.03em;
  font-size: --font-size-paragraph-mobile;
}
@media (min-width: 640px) {
  p,
  ul,
  ol {
    font-size: --font-size-paragraph-tablet;
  }
}
@media desktop {
  p,
  ul,
  ol {
    font-size: --font-size-paragraph-desktop;
  }
}

ul li {
  margin-bottom: 1em;
  list-style: none;
  padding-left: 2em;
}
ul li:before {
  content: "—";
  margin-left: -2em;
  width: 2em;
  display: inline-block;
  float: none;
}

b {
  font-family: var(--font-family-title-variable), var(--font-family-title), sans-serif;
  font-weight: 700;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  text-decoration: none;
}

.silly-comment {
  font-family: var(--font-family-comments), monospace;
  color: var(--color-green);
}

::-moz-selection {
  color: var(--color-text);
  background-color: var(--color-text-dim);
}

::-moz-selection,
::-webkit-selection,
::selection {
  color: var(--color-text);
  background-color: var(--color-text-dim);
}

* {
  margin: 0;
  padding: 0;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  animation-delay: 0.1s;
  transition: all 0.15s ease-in-out;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-paragraph-variable), var(--font-family-paragraph), sans-serif;
  letter-spacing: 0.03em;
  font-weight: 400;
  font-size: var(--font-size-paragraph-mobile);
  overflow-x: hidden;
}
@media (min-width: 640px) {
  body {
    font-size: var(--font-size-paragraph-tablet);
  }
}
@media (min-width: 1260px) {
  body {
    font-size: var(--font-size-paragraph-desktop);
  }
}

.grid {
  display: grid;
  width: auto;
  grid-template-columns: repeat(var(--grid-colums), minmax(0, 1fr));
  grid-gap: var(--grid-gap);
  padding: var(--grid-gap);
}
@media (min-width: 480px) {
  .grid {
    grid-template-columns: repeat(var(--grid-colums-mobile), minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(var(--grid-colums-tablet), minmax(0, 1fr));
  }
}
@media (min-width: 1260px) {
  .grid {
    grid-template-columns: repeat(var(--grid-colums-desktop), minmax(0, 1fr));
  }
}

img {
  display: block;
}

html,
body {
  min-height: 100vh;
}

body.home {
  position: relative;
  background-color: var(--home-color-background);
  color: var(--color-text);
}
body.home h1 {
  font-size: 16cqi;
}
body.home h2 {
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  font-size: clamp(46px, 6vw, 96px);
  color: white;
}
body.home h3 {
  font-size: clamp(24px, 3.5vw, 32px);
}
body.home h4 {
  margin-bottom: 0.5em;
  font-size: clamp(24px, 2vw, 24px);
}

.home header {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: var(--grid-gap);
  padding: var(--grid-gap);
  background-size: 100vw 100vh;
  background-position: right bottom;
}
.home header:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: color-burn;
  filter: contrast(120%);
  background: url(/media/noise.svg);
}
.home header.grid {
  grid-row-gap: 0;
  grid-template-rows: 2em 1fr;
  font-size: clamp(16vw, 12vw, 192px);
  min-height: 0;
  min-width: 0;
}
.home header h1 {
  grid-area: 1/1/1/13;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-bottom: 0.25em;
  animation-delay: 1s;
  line-height: 0.9em;
  color: white;
}
.home header .about-me {
  grid-row: 2/3;
  grid-column: 1/13;
}
@media (min-width: 640px) {
  .home header .about-me {
    grid-column: 1/7;
  }
}
@media (min-width: 1260px) {
  .home header .about-me {
    grid-column: 1/5;
  }
}
.home header .silly-comment {
  grid-column: 1/13;
}

.home .portfolio .project {
  display: flex;
}
.home .portfolio .project img {
  background-color: var(--image-background);
  width: 100%;
}
.home .portfolio .project h3 {
  display: block;
  margin: 0.2em 0;
  line-height: 1.2em;
}
.home .portfolio .project p {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  line-height: 1.2em;
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  font-family: var(--font-family), sans-serif;
  color: var(--color-text-dim);
}
.home .portfolio .project-image {
  margin: 0.5em 0;
  background-color: var(--image-background);
}
@media (min-width: 640px) {
  .home .portfolio .project-image {
    margin: 0.5vw 0;
  }
}
.home .portfolio .project.hoststar-templates {
  flex-direction: column-reverse;
  grid-row: 3/4;
  grid-column: 1/4;
}
@media (min-width: 640px) {
  .home .portfolio .project.hoststar-templates {
    flex-direction: column;
    grid-row: 2/3;
    grid-column: 2/6;
    margin-top: 2vw;
  }
}
@media (min-width: 1260px) {
  .home .portfolio .project.hoststar-templates {
    flex-direction: column-reverse;
    grid-column: 3/7;
  }
  .home .portfolio .project.hoststar-templates h3, .home .portfolio .project.hoststar-templates p {
    text-align: left;
  }
}
.home .portfolio .project.zurich-openair {
  flex-direction: column;
  align-self: end;
  grid-row: 4/5;
  grid-column: 2/5;
}
.home .portfolio .project.zurich-openair h3, .home .portfolio .project.zurich-openair p {
  text-align: right;
}
@media (min-width: 640px) {
  .home .portfolio .project.zurich-openair {
    flex-direction: column;
    grid-row: 2/3;
    grid-column: 6/9;
    margin-top: 22vw;
  }
}
@media (min-width: 1260px) {
  .home .portfolio .project.zurich-openair {
    grid-column: 7/11;
    margin-bottom: -8vw;
  }
}
.home .portfolio .project.copilot {
  flex-direction: column-reverse;
  grid-row: 5/6;
  grid-column: 1/5;
}
.home .portfolio .project.copilot h3, .home .portfolio .project.copilot p {
  text-align: right;
}
@media (min-width: 640px) {
  .home .portfolio .project.copilot {
    grid-row: 3/4;
    grid-column: 3/8;
  }
  .home .portfolio .project.copilot h3, .home .portfolio .project.copilot p {
    text-align: left;
  }
}
@media (min-width: 1260px) {
  .home .portfolio .project.copilot {
    grid-row: 3/4;
    grid-column: 1/7;
    margin-top: 10vw;
  }
}
.home .portfolio .project.mobility {
  flex-direction: column;
  grid-row: 6/7;
  grid-column: 1/3;
}
@media (min-width: 640px) {
  .home .portfolio .project.mobility {
    grid-row: 3/4;
    grid-column: 8/11;
    margin-top: 10vw;
  }
}
@media (min-width: 1260px) {
  .home .portfolio .project.mobility {
    grid-row: 3/4;
    grid-column: 10/13;
  }
}
.home .portfolio .project.comerge {
  flex-direction: column-reverse;
  grid-row: 7/8;
  grid-column: 2/5;
}
@media (min-width: 640px) {
  .home .portfolio .project.comerge {
    align-self: center;
    grid-row: 4/5;
    grid-column: 6/9;
  }
}
@media (min-width: 1260px) {
  .home .portfolio .project.comerge {
    grid-row: 3/4;
    grid-column: 7/10;
    margin-top: 18vw;
  }
}

body.home .about-cv,
body.home .about-tools,
body.home .about-languages,
body.home .about-coding,
body.home .about-hobbies {
  grid-column: 1/13;
  grid-row-gap: 0;
  margin: 0;
  padding: 0;
  display: grid;
}
body.home .about-cv .cv-titles {
  display: flex;
}
body.home .about-cv .cv-titles h3.cv-education,
body.home .about-cv .cv-titles h3.cv-work {
  display: none;
  flex-grow: 1;
  text-transform: uppercase;
  margin: 0;
  padding: 0em 3em 2em;
  line-height: 1em;
  width: 50%;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-titles h3.cv-education,
  body.home .about-cv .cv-titles h3.cv-work {
    display: block;
  }
}
body.home .about-cv .cv-titles h3.cv-education {
  grid-column: 1/3;
  color: var(--color-green);
  text-align: right;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-titles h3.cv-education {
    grid-column: 1/7;
  }
}
body.home .about-cv .cv-titles h3.cv-work {
  grid-column: 3/5;
  color: var(--color-blue);
}
@media (min-width: 960px) {
  body.home .about-cv .cv-titles h3.cv-work {
    grid-column: 7/13;
  }
}
body.home .about-cv .cv-timeline {
  position: relative;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-timeline {
    display: grid;
    grid-template-columns: calc(50% - 30px) 60px calc(50% - 30px);
  }
}
body.home .about-cv .cv-timeline-line {
  z-index: -1;
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
  width: 1px;
  background-color: var(--color-text-dimmer);
}
@media (min-width: 960px) {
  body.home .about-cv .cv-timeline-line {
    display: block;
  }
}
body.home .about-cv .cv-timeline-year {
  display: none;
  padding: 0;
  height: 2.5em;
  line-height: 1em;
  text-align: center;
  grid-column: 2/3;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-timeline-year {
    display: block;
  }
}
body.home .about-cv .cv-date {
  display: inline-block;
  padding: 0.75em;
  background-color: var(--home-color-background-light);
  color: var(--color-text-dim);
}
body.home .about-cv .cv-content.education .cv-date,
body.home .about-cv .cv-content.work .cv-date {
  margin-top: 2.5em;
  margin-bottom: 1em;
  padding: 0.5em;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education .cv-date,
  body.home .about-cv .cv-content.work .cv-date {
    display: none;
  }
}
body.home .about-cv .cv-content.education .cv-type,
body.home .about-cv .cv-content.work .cv-type {
  padding-bottom: 0.25em;
  text-transform: capitalize;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education .cv-type,
  body.home .about-cv .cv-content.work .cv-type {
    display: none;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education p,
  body.home .about-cv .cv-content.work p {
    max-width: 640px;
  }
}
body.home .about-cv .cv-content.education {
  grid-column: 1/2;
  text-align: left;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education {
    margin-right: 3em;
    padding: 0 1.5em 0 0;
    border-right: 1px solid var(--color-green);
    text-align: right;
  }
}
body.home .about-cv .cv-content.education .cv-type {
  color: var(--color-green);
}
body.home .about-cv .cv-content.education p {
  margin-left: auto;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.travel-oceania {
    grid-row: 5/6;
    min-height: 3.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.sfgbb {
    grid-row: 9/14;
    min-height: 12.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.uni-master {
    grid-row: 21/24;
    min-height: 8em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.erasmus {
    grid-row: 25/26;
    min-height: 3.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.uni-advanced {
    grid-row: 27/28;
    min-height: 3.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.education.uni-base {
    grid-row: 31/34;
    min-height: 8em;
  }
}
body.home .about-cv .cv-content.work {
  grid-column: 3/4;
  text-align: left;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work {
    margin-left: 3em;
    padding: 0 0 0 1.5em;
    border-left: 1px solid var(--color-blue);
  }
}
body.home .about-cv .cv-content.work .cv-type {
  color: var(--color-blue);
}
body.home .about-cv .cv-content.work p {
  margin-right: auto;
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work.hoststar {
    grid-row: 3/4;
    min-height: 12.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work.comerge {
    grid-row: 7/16;
    min-height: 21.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work.freelance {
    grid-row: 17/18;
    min-height: 3.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work.catsg {
    grid-row: 19/20;
    min-height: 3.5em;
  }
}
@media (min-width: 960px) {
  body.home .about-cv .cv-content.work.migros {
    grid-row: 29/30;
    min-height: 3.5em;
  }
}
body.home .about-tools,
body.home .about-languages,
body.home .about-coding,
body.home .about-hobbies {
  margin: 0;
  padding: 0;
  display: grid;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
body.home .about-tools {
  display: flex;
  flex-wrap: wrap;
}
body.home .about-tools .tool {
  position: relative;
  text-align: center;
  width: 30.4%;
}
@media (min-width: 480px) {
  body.home .about-tools .tool {
    width: 21.7%;
  }
}
@media (min-width: 640px) {
  body.home .about-tools .tool {
    width: 13%;
  }
}
@media (min-width: 1260px) {
  body.home .about-tools .tool {
    width: 8.6%;
  }
}
body.home .about-tools .tool svg {
  width: 80%;
}
body.home .about-tools .tool span {
  display: block;
  margin-bottom: 2em;
}
body.home .about-languages,
body.home .about-coding,
body.home .about-hobbies {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  body.home .about-languages,
  body.home .about-coding,
  body.home .about-hobbies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  body.home .about-languages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1260px) {
  body.home .about-coding,
  body.home .about-hobbies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.home .about-language,
body.home .about-code,
body.home .about-hobby {
  background-color: var(--home-color-background-light);
  padding: 1.5em 2em;
  color: var(--color-text);
  text-align: center;
  border-radius: 1em;
}
body.home .about-language h3,
body.home .about-code h3,
body.home .about-hobby h3 {
  margin-top: 0.5em;
  text-transform: uppercase;
}
body.home .about-languages .about-language .about-language-flag svg {
  height: 2em;
  width: 2em;
  margin: 0 0.25em 2em;
}
body.home .about-coding .about-code .about-code-line {
  background: #2C5153;
  height: 5px;
  margin-bottom: 1em;
  border-radius: 10px;
}
body.home .about-coding .about-code .about-code-line-percent {
  background: var(--color-blue);
  height: 5px;
  border-radius: 10px;
}

body.project {
  min-height: 100vh;
}
body.project h2,
body.project h3 {
  margin-bottom: 0.5em;
  -webkit-hyphens: manual;
          hyphens: manual;
}
body.project h2 {
  font-size: 1.75em;
}
body.project h2.h2-large {
  font-size: 4em;
  text-transform: uppercase;
}
@media (min-width: 1260px) {
  body.project h2.h2-large {
    font-size: 5em;
  }
}
body.project h3 {
  font-size: 1.25em;
}
body.project a {
  color: black;
  text-decoration: underline;
}
body.project a.arrow-link {
  display: inline-block;
  background-image: url("/project/link-arrow.svg");
  background-repeat: no-repeat;
  background-position: left top;
  margin-top: 1em;
  padding-left: 9em;
  background-size: auto 1.25em;
}
body.project .project-header,
body.project .project-section.flex {
  gap: calc(var(--grid-gap));
  padding: 0 calc(var(--grid-gap));
}
body.project .project-header .project-text,
body.project .project-section.flex .project-text {
  width: 100%;
}
@media (min-width: 640px) {
  body.project .project-header .project-text,
  body.project .project-section.flex .project-text {
    width: var(--width-two-third);
  }
}
@media (min-width: 1260px) {
  body.project .project-header .project-text,
  body.project .project-section.flex .project-text {
    width: var(--width-half);
  }
}
@media (min-width: 1920px) {
  body.project .project-header .project-text,
  body.project .project-section.flex .project-text {
    width: var(--width-third);
  }
}
body.project .project-header .project-text .color-square,
body.project .project-section.flex .project-text .color-square {
  margin-bottom: 1em;
  padding-bottom: 10vw;
  width: 10vw;
}
body.project .project-header .project-media,
body.project .project-section.flex .project-media {
  width: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
@media (min-width: 640px) {
  body.project .project-header .project-media,
  body.project .project-section.flex .project-media {
    width: var(--width);
  }
}
body.project .project-header .project-media img,
body.project .project-section.flex .project-media img {
  width: 100%;
}
body.project .project-header .project-media .caption,
body.project .project-section.flex .project-media .caption {
  display: block;
  padding: 1em 0 1.5em;
}
body.project .project-header {
  position: relative;
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-color: var(--project-color-background-header);
}
@media (min-width: 960px) {
  body.project .project-header {
    justify-content: space-between;
  }
}
body.project .project-header-categories, body.project .project-header-text {
  z-index: 1;
}
body.project .project-header-categories {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  order: 1;
  min-height: 8vh;
  padding: calc(var(--grid-gap) / 2) 0;
  width: auto;
  margin: 0 0 6vw;
}
@media (min-width: 640px) {
  body.project .project-header-categories {
    -moz-column-gap: var(--grid-gap);
         column-gap: var(--grid-gap);
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 960px) {
  body.project .project-header-categories {
    flex-wrap: nowrap;
    flex-direction: row;
    order: 0;
    -moz-column-gap: var(--grid-gap);
         column-gap: var(--grid-gap);
    margin-bottom: 0;
  }
}
body.project .project-header-categories p {
  width: auto;
  flex-grow: 1;
}
body.project .project-header-categories p span {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
}
body.project .project-header .project-header-text {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
@media (min-width: 960px) {
  body.project .project-header .project-header-text {
    height: calc(90vh - 110px);
  }
}
body.project .project-header .project-header-text h1 {
  position: relative;
  margin-top: 45vh;
  width: 90%;
  color: var(--color-dark);
  font-size: 14vw;
  order: 0;
}
@media (min-width: 480px) {
  body.project .project-header .project-header-text h1 {
    font-size: 11vw;
    margin-bottom: 2vh;
  }
}
@media (min-width: 640px) {
  body.project .project-header .project-header-text h1 {
    font-size: 6em;
  }
}
@media (min-width: 960px) {
  body.project .project-header .project-header-text h1 {
    margin-top: 0;
    max-width: 100vw;
  }
}
body.project .project-header .project-header-text .project-text {
  margin-bottom: 3vw;
  order: 2;
  text-align: left;
  margin: 0 auto;
}
@media (min-width: 640px) {
  body.project .project-header .project-header-text .project-text {
    margin: 0;
  }
}
@media (min-width: 960px) {
  body.project .project-header .project-header-text .project-text {
    padding-bottom: 4vw;
  }
}
@media (min-width: 960px) {
  body.project .project-header .project-header-text .project-text {
    width: var(--width-half);
  }
}
body.project video,
body.project iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
body.project .project-section.full {
  padding: 0;
}
body.project .project-section.flex {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
@media (min-width: 960px) {
  body.project .project-section.flex {
    justify-content: center;
  }
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-2 .project-text,
  body.project .project-section.flex.columns-2 .project-media {
    width: var(--width-half);
  }
}
body.project .project-section.flex.columns-2.full .project-text,
body.project .project-section.flex.columns-2.full .project-media {
  width: var(--width-full);
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-2.full .project-text,
  body.project .project-section.flex.columns-2.full .project-media {
    width: var(--width-half-full);
  }
}
body.project .project-section.flex.columns-2.tablet .project-text,
body.project .project-section.flex.columns-2.tablet .project-media {
  width: var(--width-full);
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-2.tablet .project-text,
  body.project .project-section.flex.columns-2.tablet .project-media {
    width: var(--width-full);
  }
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-2.tablet .project-text,
  body.project .project-section.flex.columns-2.tablet .project-media {
    width: var(--width-half-full);
  }
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-3 .project-text,
  body.project .project-section.flex.columns-3 .project-media {
    width: var(--width-half);
  }
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-3 .project-text,
  body.project .project-section.flex.columns-3 .project-media {
    width: var(--width-third);
  }
}
body.project .project-section.flex.columns-3.full .project-text,
body.project .project-section.flex.columns-3.full .project-media {
  width: var(--width-full);
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-3.full .project-text,
  body.project .project-section.flex.columns-3.full .project-media {
    width: var(--width-half-full);
  }
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-3.full .project-text,
  body.project .project-section.flex.columns-3.full .project-media {
    width: var(--width-third-full);
  }
}
body.project .project-section.flex.columns-3.tablet .project-text,
body.project .project-section.flex.columns-3.tablet .project-media {
  width: var(--width-full);
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-3.tablet .project-text,
  body.project .project-section.flex.columns-3.tablet .project-media {
    width: var(--width-full);
  }
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-3.tablet .project-text,
  body.project .project-section.flex.columns-3.tablet .project-media {
    width: var(--width-third-full);
  }
}
@media (min-width: 480px) {
  body.project .project-section.flex.columns-4 .project-text,
  body.project .project-section.flex.columns-4 .project-media {
    width: var(--width-half);
  }
}
@media (min-width: 1260px) {
  body.project .project-section.flex.columns-4 .project-text,
  body.project .project-section.flex.columns-4 .project-media {
    width: var(--width-quarter);
  }
}
body.project .project-section.flex.columns-4.full .project-text,
body.project .project-section.flex.columns-4.full .project-media {
  width: var(--width-full);
}
@media (min-width: 480px) {
  body.project .project-section.flex.columns-4.full .project-text,
  body.project .project-section.flex.columns-4.full .project-media {
    width: var(--width-half-full);
  }
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-4.full .project-text,
  body.project .project-section.flex.columns-4.full .project-media {
    width: var(--width-quarter-full);
  }
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-4.tablet .project-text,
  body.project .project-section.flex.columns-4.tablet .project-media {
    width: var(--width-half);
  }
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-4.tablet .project-text,
  body.project .project-section.flex.columns-4.tablet .project-media {
    width: var(--width-quarter);
  }
}
body.project .project-section.flex.columns-4.tablet.full .project-text,
body.project .project-section.flex.columns-4.tablet.full .project-media {
  width: var(--width-full);
}
@media (min-width: 960px) {
  body.project .project-section.flex.columns-4.tablet.full .project-text,
  body.project .project-section.flex.columns-4.tablet.full .project-media {
    width: var(--width-half-full);
  }
}
@media (min-width: 640px) {
  body.project .project-section.flex.columns-4.tablet.full .project-text,
  body.project .project-section.flex.columns-4.tablet.full .project-media {
    width: var(--width-quarter-full);
  }
}
body.project .project-section.flex.inverse {
  flex-direction: row-reverse;
}
body.project .project-section.flex.column {
  flex-direction: column;
  gap: calc(var(--grid-gap) / 2);
}
body.project .project-section.flex.spacing {
  padding-top: 2em;
  padding-bottom: 2em;
}
body.project .project-section.flex.spacing-large {
  padding-top: 4em;
  padding-bottom: 4em;
}
body.project .project-section.flex.spacing-top {
  padding-top: 2em;
}
body.project .project-section.flex.spacing-top-large {
  padding-top: 4em;
}
body.project .project-section.flex.spacing-bottom {
  padding-bottom: 2em;
}
body.project .project-section.flex.spacing-bottom-large {
  padding-bottom: 4em;
}
body.project .project-section.flex.vertical-center .project-text,
body.project .project-section.flex.vertical-center .project-media {
  align-self: center;
}
body.project .project-section.flex.vertical-center .project-text h2, body.project .project-section.flex.vertical-center .project-text h3 {
  margin-top: 0;
}
body.project .project-section.grid {
  display: grid;
}
body.project .project-section.grid .project-media img {
  width: 100%;
}
body.project .project-section.left {
  justify-content: start;
}
body.project .project-section.left .project-text > *,
body.project .project-section.left .project-media > * {
  text-align: left;
}
body.project .project-section.center {
  justify-content: center;
}
body.project .project-section.center .project-text > *,
body.project .project-section.center .project-media > * {
  text-align: center;
}
@media (min-width: 640px) {
  body.project .project-section.center .project-text > *,
  body.project .project-section.center .project-media > * {
    text-align: center;
  }
}
body.project .project-section.center .project-media img, body.project .project-section.center .project-media svg {
  margin-right: auto;
  margin-left: auto;
}
body.project .project-section.center .project-media p.caption {
  text-align: center;
  padding: 0.8em 0;
}
body.project .project-section.center .project-text {
  margin-bottom: 1em;
}
body.project .project-section.right {
  justify-content: end;
}
body.project .project-section.right .project-media > * {
  text-align: left;
}
@media (min-width: 640px) {
  body.project .project-section.right .project-media > * {
    text-align: right;
  }
}
body.project .project-section.right .project-media img, body.project .project-section.right .project-media svg {
  margin-left: auto;
}
@media (min-width: 480px) {
  body.project .project-section.full {
    padding: 0;
    gap: 0;
  }
}
@media (min-width: 480px) {
  body.project .project-section.full .project-text > * {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
  }
}
@media (min-width: 480px) {
  body.project .project-section.full .project-media .caption {
    padding: 0.8em 0;
  }
}
@media (min-width: 480px) {
  body.project .project-section.full .project-media * {
    width: var(--width-full);
  }
}

.project-footer,
.home-back {
  z-index: 100;
  background-color: var(--color-dark);
  font-weight: 700;
  line-height: 1.25em;
  color: var(--color-text);
}
@media (min-width: 960px) {
  .project-footer span,
  .home-back span {
    display: inline-block;
    font-weight: 400;
    font-size: 1.25em;
  }
}

.project-footer {
  padding-top: 20em;
  padding-bottom: 2em;
}
.project-footer-menu {
  display: flex;
  justify-content: space-between;
  grid-column: 1/13;
}
.project-footer-menu a {
  max-width: 33.3333333333%;
}
.project-footer-prev {
  text-align: left;
}
.project-footer-home {
  text-align: center;
}
.project-footer-next {
  text-align: right;
}

body.project .home-back {
  position: fixed;
  top: 6em;
  padding: 1.5em 1.5em 1.5em 2em;
  font-weight: 400;
}
body.project .home-back, body.project .home-back span {
  color: white;
  text-decoration: none;
}/*# sourceMappingURL=styles.css.map */