:root {
  --page-padding: 10px;
  --background-color: #F4F4F5;
  --primary-font-size: 17.5px;
  --primary-line-height: 19.8px;
  --secondary-font-size: 12px;
  --secondary-number-font-size: 10.5px;
  --secondary-line-height: 15px;
  --grid-line-height: 14.2px;
  --large-font-size: 30px;
  --font-weight-bold: 675;
  --font-weight-light: 350;
  --font-weight-light-nav: 350;
  --letter-spacing-large: -1px;
  --letter-spacing-small: 0px;
  --animation-duration-1: 300ms;
  --animation-duration-2: 200ms;
  --animation-duration-3: 500ms;
  --animation-duration-4: 600ms;
  --current-version-history-element-width: 0px;
  --version-history-element-padding: 10px;
  --bottom-margin-bottom-nav: 4vw;
  --side-margin-bottom-nav: 10px;
  --veritical-padding-bottom-nav: 17.5px;
  --horizontal-padding-bottom-nav: 25px;
  --input-element-height: calc(var(--primary-font-size) * 1.6);
  --button-size: 39px;
  --button-padding: calc(((var(--input-element-height) + var(--veritical-padding-bottom-nav) * 2) - var(--button-size)) / 2);
  --small-circle-size: 20px;
  --content-padding-top: 115px;
  --content-padding-bottom: 26px;
  --column-amount-content-container: 8;
  --column-amount-websearch: 2;
  --column-gap-content-container: 15px;
  --headline-height: 0px;
  --column-amount-projects: 2;
  --column-gap-projects: 15px;
  --dot-column-width: 37px;
  --dot-width: 31px;
  --project-line-height: 100px;
  --project-line-bottom: calc(var(--margin-bottom-nav) + (var(--veritical-padding-bottom-nav) * 2 + var(--input-element-height)) / 2);
  --project-line-top: 0;
  --table-rows-amount: 0;
  --prefix-width: 0px;
}
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --primary-font-size: 21px;
    --secondary-font-size: 13px;
    --large-font-size: 35px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --primary-font-size: 22px;
    --secondary-font-size: 15px;
    --secondary-number-font-size: 13px;
    --large-font-size: 40px;
    --grid-line-height: 20px;
    --column-amount-projects: 4;
    --column-gap-projects: 15px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --primary-font-size: 22px;
    --secondary-font-size: 15px;
    --secondary-number-font-size: 13px;
    --large-font-size: 40px;
    --small-circle-size: 20px;
    --grid-line-height: 20px;
    --column-amount-projects: 4;
    --column-gap-projects: 15px;
  }
}
@media (min-width: 1441px) {
  :root {
    --page-padding: 30px;
    --primary-font-size: 24px;
    --primary-line-height: 27.5px;
    --secondary-font-size: 16px;
    --secondary-number-font-size: 15px;
    --secondary-line-height: 19.2px;
    --secondary-letter-spacing: -0.1px;
    --large-font-size: 45px;
    --grid-line-height: 20px;
    --bottom-nav-width: 1000px;
    --side-margin-bottom-nav: calc((100vw - var(--bottom-nav-width)) / 2);
    --bottom-margin-bottom-nav: 27.5px;
    --veritical-padding-bottom-nav: 21px;
    --horizontal-padding-bottom-nav: 31px;
    --input-element-height: calc(var(--secondary-font-size) * 1.6);
    --button-size: 39px;
    --button-padding: calc(((var(--input-element-height) + var(--veritical-padding-bottom-nav) * 2) - var(--button-size)) / 2);
    --small-circle-size: 20px;
    --content-padding-top: 150px;
    --column-amount-projects: 4;
    --column-gap-projects: 15px;
  }
}

html {
  box-sizing: border-box;
  font-size: 1vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never; /* Note: font-smooth is not widely supported */
  background-color: var(--background-color);
}

*, *:before, *:after {
  box-sizing: inherit;
  scrollbar-width: none; /* Firefox */
}

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

body {
  background-color: var(--background-color);
  color: black;
  margin: 0;
  padding: 0;
  font-family: "Booton";
  font-variation-settings: "wght" 675, "ital" 0;
  transition: font-variation-settings 0.4s ease;
  overscroll-behavior: none; /* Prevents overscroll/bounce effect */
}
.display-none {
  display: none;
}

.no-scroll {
  overflow: hidden;
}

.no-opacity {
  opacity: 0;
}

.no-transition {
  transition: none !important;
}

.animation-settings {
  transition: all 300ms ease-in-out !important;
}

.animation-settings-2 {
  transition: all 300ms ease-in-out !important;
}

.animation-settings-3 {
  transition: all 1000ms ease-in-out !important;
}

.test-image {
  width: 10vw;
  height: auto;
}

@font-face {
  font-family: "Suisse Mono Regular";
  src: url("../assets/fonts/SuisseIntlMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Mono Light";
  src: url("../assets/fonts/SuisseIntlMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Works Medium";
  src: url("../assets/fonts/SuisseWorks-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Works Regular";
  src: url("../assets/fonts/SuisseWorks-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ivar Text Regular";
  src: url("../assets/fonts/IvarText-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Ivar Text Medium";
  src: url("../assets/fonts/IvarText-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Marist Medium";
  src: url("../assets/fonts/ABCMarist-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Marist Regular";
  src: url("../assets/fonts/ABCMarist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Monument Grotesk Bold";
  src: url("../assets/fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Monument Grotesk Regular";
  src: url("../assets/fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Friedl";
  src: url("../assets/fonts/Friedl.woff2") format("woff2");
}
@font-face {
  font-family: "Booton";
  src: url("../assets/fonts/BootonTRIALVF.woff2") format("woff2");
}
@font-face {
  font-family: "KolleGX";
  src: url("../assets/fonts/KolleGX.woff2") format("woff2");
}
@font-face {
  font-family: "KolleVF";
  src: url("../assets/fonts/KolleVF.woff2") format("woff2");
}
@font-face {
  font-family: "Diatype";
  src: url("../assets/fonts/DiatypePlus.woff2") format("woff2");
}
p {
  margin: 0;
}

.paragraph-word {
  transition: all var(--animation-duration-2) ease-in-out;
}

.navigation-type {
  color: white;
}

.primary-type {
  font-size: 16.5px;
}

.secondary-type {
  font-size: var(--secondary-font-size);
  text-transform: uppercase;
}

.light {
  font-variation-settings: "wght" 200, "ital" 0;
}

.light-nav {
  font-variation-settings: "wght" var(--font-weight-light-nav), "ital" 0;
  color: white;
}

.italic {
  font-variation-settings: "wght" 675, "ital" 9;
}

.light.italic {
  font-variation-settings: "wght" 200, "ital" 9;
}

.indent {
  display: inline-block;
  width: 20px;
}

.font-weight-animation {
  transition: font-variation-settings 0.5s ease-in-out;
  animation: font-weight-animation 300ms ease-in-out;
}

@keyframes font-weight-animation {
  0% {
    font-size: 17px;
    font-variation-settings: "wght" 300, "MONO" 1;
  }
  50% {
    font-size: 35px;
    font-variation-settings: "wght" 800, "MONO" 0;
  }
  100% {
    font-size: 17px;
    font-variation-settings: "wght" 300, "MONO" 1;
  }
}
#content-container {
  width: 100vw;
  padding: var(--content-padding-top) var(--page-padding) 200px var(--page-padding);
  transform: translateX(0px);
  transition: opacity var(--animation-duration-1) ease-in-out, transform var(--animation-duration-4) ease-in-out;
  overflow: hidden;
}
@media (min-width: 769px) and (max-width: 1024px) {
  #content-container {
    display: grid;
    grid-template-columns: repeat(var(--column-amount-content-container), 1fr);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #content-container {
    display: grid;
    grid-template-columns: repeat(var(--column-amount-content-container), 1fr);
  }
}
@media (min-width: 1441px) {
  #content-container {
    display: grid;
    grid-template-columns: repeat(var(--column-amount-content-container), 1fr);
  }
}
#content-container.translate-x {
  transform: translateX(-250px);
}
.component-selected #content-container .project:not(.selected) {
  opacity: 0.2;
  filter: saturate(0%);
}
.component-selected #content-container .project:not(.selected) .project-dot {
  opacity: 0;
}
.component-selected #content-container .project.selected ~ .project::after, .component-selected #content-container .project.selected ~ .project::before {
  width: calc(100% - var(--dot-column-width));
}
.component-selected #content-container .project.selected ~ .project .img-element {
  transform: translateX(var(--dot-column-width));
}

.large-paragraph-container {
  grid-column: 1/7;
  width: 100%;
}
.large-paragraph-container.margin-top {
  margin-top: calc(var(--primary-line-height) * 3);
}

.medium-paragraph-container {
  grid-column: 2/7;
  width: 100%;
}

.small-paragraph-container {
  grid-column: 3/7;
  width: 100%;
}

.paragraph-container {
  transition: all var(--animation-duration-1) ease-in-out;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  padding: 0 0;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .paragraph-container {
    display: inline;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .paragraph-container {
    display: inline;
  }
}
@media (min-width: 1441px) {
  .paragraph-container {
    display: inline;
  }
}
@media (max-width: 480px) {
  .paragraph-container + .paragraph-container {
    text-indent: 40px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .paragraph-container + .paragraph-container {
    text-indent: 80px;
  }
}

.paragraph-word {
  transition: all var(--animation-duration-1) ease-in-out;
  text-indent: 0;
}
.paragraph-word.light {
  transition: all 300ms ease-in-out;
}

.image-container {
  padding-top: calc(var(--primary-font-size) / 2);
  padding-bottom: calc(var(--primary-font-size) / 2);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .image-container {
    grid-column: 1/7;
    width: 100%;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .image-container {
    grid-column: 1/7;
    width: 100%;
  }
}
@media (min-width: 1441px) {
  .image-container {
    grid-column: 1/7;
    width: 100%;
  }
}

.paragraph-image {
  width: 100%;
  position: relative;
  transition: height var(--animation-duration-4) ease-in-out, width var(--animation-duration-3) ease-in-out;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .paragraph-image {
    display: grid;
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .paragraph-image {
    display: grid;
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
  }
}
@media (min-width: 1441px) {
  .paragraph-image {
    display: grid;
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
  }
}
.paragraph-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid black;
  width: 100%;
  transition: all var(--animation-duration-3) ease-in-out;
}
.paragraph-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid black;
  width: 100%;
  transform: translateY(1px);
  transition: all var(--animation-duration-3) ease-in-out;
}
.paragraph-image.no-width {
  width: 0%;
}
.paragraph-image img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all var(--animation-duration-1) ease-in-out;
  padding-top: calc(var(--primary-font-size) / 2);
  padding-bottom: calc(var(--primary-font-size) / 2);
  grid-column: 4/7;
  transition: all var(--animation-duration-1) ease-in-out;
}
.paragraph-image img.blur {
  filter: blur(10px);
}
.paragraph-image img.no-opacity {
  opacity: 0;
}
@media (max-width: 480px) {
  .paragraph-image img {
    padding-top: calc(var(--primary-font-size) / 2);
    padding-bottom: 5px;
  }
}
.image-caption {
  padding-bottom: 7px;
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
}
@media (max-width: 480px) {
  .image-caption {
    padding-top: 0;
    padding-bottom: 7px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .image-caption {
    padding-top: calc(var(--primary-font-size) / 2 - 3px);
    padding-bottom: 0;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .image-caption {
    grid-column: 1/4;
    padding-top: calc(var(--primary-font-size) / 2 - 3px);
    padding-right: 15px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .image-caption {
    grid-column: 1/4;
    padding-top: calc(var(--primary-font-size) / 2 - 3px);
    padding-right: 15px;
  }
}
@media (min-width: 1441px) {
  .image-caption {
    grid-column: 1/4;
    padding-top: calc(var(--primary-font-size) / 2 - 3px);
    padding-right: 15px;
  }
}

.caption-word {
  transition: font-variation-settings var(--animation-duration-1) ease-in-out;
}

.term-description-number-container {
  width: 25px;
  height: 17px;
  border: 1px solid black;
  border-radius: 9px;
  transform-origin: center center;
  transform: translateY(-2px) scale(1);
  transition: transform var(--animation-duration-1) ease-in-out, font-variation-settings var(--animation-duration-1) ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  margin-right: 1px;
  cursor: pointer;
  text-indent: 0;
}
@media (max-width: 480px) {
  .term-description-number-container {
    margin-left: 3px;
    margin-right: 2px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .term-description-number-container {
    margin-left: 3px;
    margin-right: 2px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .term-description-number-container {
    width: 30px;
    height: 18px;
    border-radius: 9px;
    transform: translateY(-1.5px) scale(1);
    margin-left: 3px;
    margin-right: 3px;
  }
  .term-description-number-container.small {
    transform: translateY(-1.5px) scale(0.3);
  }
  .term-description-number-container.big {
    transform: translateY(-1.5px) scale(1.2);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .term-description-number-container {
    width: 30px;
    height: 18px;
    border-radius: 9px;
    transform: translateY(-1.5px) scale(1);
    margin-left: 3px;
    margin-right: 3px;
  }
  .term-description-number-container.small {
    transform: translateY(-1.5px) scale(0.3);
  }
  .term-description-number-container.big {
    transform: translateY(-1.5px) scale(1.2);
  }
}
@media (min-width: 1441px) {
  .term-description-number-container {
    width: 30px;
    height: 20px;
    border-radius: 10px;
    transform: translateY(-3px) scale(1);
    margin-left: 3px;
    margin-right: 3px;
  }
  .term-description-number-container.small {
    transform: translateY(-3px) scale(0.3);
  }
  .term-description-number-container.big {
    transform: translateY(-3px) scale(1.2);
  }
}
.term-description-number-container.small {
  transform: translateY(-2px) scale(0.3);
}
.term-description-number-container.big {
  transform: translateY(-2px) scale(1.2);
}
.term-description-number-container:hover {
  background-color: black;
}
.term-description-number-container:hover .term-description-number {
  color: white;
}
.term-description-number-container.active {
  background-color: black;
}
.term-description-number-container.active .term-description-number {
  color: white;
}

.term-description-number {
  font-size: var(--secondary-number-font-size);
  transition: all var(--animation-duration-1) ease-in-out;
  color: black;
}
.term-description-number-container.no-margin-right {
  margin-right: 0 !important;
}

.term-nowrap {
  white-space: nowrap;
}

.term-description-number-container-copy {
  margin-left: 0;
  margin-right: 20px;
}
.term-description-number-container-copy.small {
  transform: translateY(-1.5px) scale(0.3);
}
.term-description-number-container-copy.big {
  transform: translateY(-1.5px) scale(1.2);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .term-description-number-container-copy.small {
    transform: translateY(-1.5px) scale(0.3);
  }
  .term-description-number-container-copy.big {
    transform: translateY(-1.5px) scale(1.2);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .term-description-number-container-copy.small {
    transform: translateY(-1.5px) scale(0.3);
  }
  .term-description-number-container-copy.big {
    transform: translateY(-1.5px) scale(1.2);
  }
}
@media (min-width: 1441px) {
  .term-description-number-container-copy {
    transform: translateY(-1px) scale(1);
  }
  .term-description-number-container-copy.small {
    transform: translateY(-1px) scale(0.3);
  }
  .term-description-number-container-copy.big {
    transform: translateY(-1px) scale(1.2);
  }
}

.term-description-container {
  position: relative;
  transition: all var(--animation-duration-1) ease-in-out;
  width: 100%;
  padding-top: 7px;
  padding-bottom: var(--secondary-line-height);
  line-height: 1.3;
}
.term-description-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px solid black;
  transition: all var(--animation-duration-1) ease-in-out;
}
.term-description-container.no-width {
  width: 0%;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .term-description-container {
    padding-top: var(--secondary-line-height);
    transform: translateY(-5px);
    line-height: 1.2;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .term-description-container {
    padding-top: var(--secondary-line-height);
    transform: translateY(-5px);
    line-height: 1.2;
  }
}
@media (min-width: 1441px) {
  .term-description-container {
    padding-top: 10px;
    padding-bottom: 10px;
    transform: translateY(-3px);
    line-height: 1.3;
  }
}

.websearch-column {
  position: fixed;
  height: 100vh;
  top: 0;
  right: -250px;
  overflow-y: scroll;
  padding-top: calc(var(--content-padding-top));
  padding-left: 0;
  padding-right: var(--page-padding);
  padding-bottom: 30vh;
  width: 250px;
  transition: transform var(--animation-duration-4) ease-in-out;
  transform: translate(0px, 0px);
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
}
.websearch-column.translate-x {
  transform: translate(-250px, 0px);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .websearch-column {
    width: calc((100vw - 2 * var(--page-padding)) / var(--column-amount-content-container) * 2);
    right: var(--page-padding);
    padding-top: calc(var(--content-padding-top) + 2.5px);
    padding-right: 0;
    padding-left: calc(var(--page-padding) * 1);
    transform: translate(0px, 2px);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .websearch-column {
    width: calc((100vw - 2 * var(--page-padding)) / var(--column-amount-content-container) * var(--column-amount-websearch));
    padding-top: calc(var(--content-padding-top) + 2.5px);
    right: var(--page-padding);
    padding-right: 0;
    padding-left: calc(var(--page-padding) * 1);
    transform: translate(0px, 2px);
  }
}
@media (min-width: 1441px) {
  .websearch-column {
    width: calc((100vw - 2 * var(--page-padding)) / var(--column-amount-content-container) * var(--column-amount-websearch));
    padding-top: calc(var(--content-padding-top) + 2.5px);
    right: var(--page-padding);
    padding-right: 0;
    padding-left: calc(var(--page-padding));
    transform: translate(0px, 2px);
  }
}

.websearch-content {
  transition: all var(--animation-duration-1) ease-in-out;
}

.fullscreen {
  width: 100%;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen {
    grid-column: 1/7;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen {
    grid-column: 1/7;
  }
}
@media (min-width: 1441px) {
  .fullscreen {
    grid-column: 1/7;
  }
}
.fullscreen .project {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  width: 100%;
  margin: 0 0;
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project::before {
  content: "";
  position: absolute;
  height: 0px;
  border-top: 1px solid black;
  background-color: black;
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project::before {
  top: 27.5px;
  left: 0;
  width: 100%;
}
.fullscreen .project.no-width::before {
  width: 0%;
}
.fullscreen .project.selected::after {
  width: calc(100% - var(--dot-column-width));
}
@media (min-width: 481px) and (max-width: 768px) {
  .fullscreen .project::before {
    top: 31px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen .project {
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
    grid-template-rows: repeat(4, auto);
    display: grid;
  }
  .fullscreen .project::before {
    top: 32px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen .project {
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
    grid-template-rows: repeat(4, auto);
    display: grid;
  }
  .fullscreen .project::before {
    top: 34px;
  }
}
@media (min-width: 1441px) {
  .fullscreen .project {
    grid-template-columns: repeat(calc(var(--column-amount-content-container) - var(--column-amount-websearch)), 1fr);
    grid-template-rows: repeat(4, auto);
    display: grid;
  }
  .fullscreen .project::before {
    top: 36px;
  }
}
.fullscreen .project-name {
  grid-area: 1/2;
  transition: all var(--animation-duration-1) ease-in-out;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  transform: translateY(4.5px);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen .project-name {
    grid-row: 1;
    grid-column: 1/7;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen .project-name {
    grid-row: 1;
    grid-column: 1/7;
  }
}
@media (min-width: 1441px) {
  .fullscreen .project-name {
    grid-row: 1;
    grid-column: 1/7;
  }
}
.fullscreen .project-name-word {
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-information-container {
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
  display: grid;
  grid-template-columns: 1fr 35px;
  gap: 10px;
  padding-top: 15px;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen .project-information-container {
    grid-row: 2;
    grid-column: 1/7;
    padding-top: 15px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen .project-information-container {
    grid-row: 2;
    grid-column: 1/7;
    grid-template-columns: 1fr 40px;
    padding-top: 15px;
  }
}
@media (min-width: 1441px) {
  .fullscreen .project-information-container {
    grid-row: 2;
    grid-column: 1/7;
    grid-template-columns: 1fr 40px;
    padding-top: 15px;
  }
}
.fullscreen .project-information {
  grid-column: 1;
}
.fullscreen .project-year {
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-material-word {
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-dimensions {
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-images {
  grid-area: 1/1;
  transition: all var(--animation-duration-3) ease-in-out;
  height: calc((100vw - 2 * var(--page-padding)) / 3 * 2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
  position: relative;
}
.fullscreen .project-images.blur {
  filter: blur(10px);
}
.fullscreen .project-images {
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.fullscreen .project-images::-webkit-scrollbar {
  display: none;
}
.fullscreen .project-images {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fullscreen .project-images.no-height {
  height: 0px;
  margin-top: 0px;
}
.fullscreen .project-images.no-opacity {
  opacity: 0;
}
.fullscreen .project-images.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M14 8 L28 16 L14 24 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize;
}
.fullscreen .project-images.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M18 8 L4 16 L18 24 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen .project-images {
    grid-row: 3;
    grid-column: 1/7;
    height: calc((100vw - 2 * var(--page-padding)) / 8 * 6 / 3 * 2);
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen .project-images {
    grid-row: 3;
    grid-column: 1/7;
    height: calc((100vw - 2 * var(--page-padding)) / 8 * 6 / 3 * 2);
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (min-width: 1441px) {
  .fullscreen .project-images {
    grid-row: 3;
    grid-column: 1/7;
    height: calc((100vw - 2 * var(--page-padding)) / 8 * 6 / 3 * 2);
    margin-top: 12px;
    margin-bottom: 12px;
  }
}
.fullscreen .project-image {
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.fullscreen .img-element {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .img-element.no-opacity {
  opacity: 0;
}
.fullscreen .img-element.blur {
  filter: blur(10px);
}
.fullscreen .image-counter {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  transition: all var(--animation-duration-2) ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: calc(var(--secondary-font-size) - 1px) !important;
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
}
.fullscreen .image-counter-digits {
  transition: all var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-description {
  padding-bottom: 100px;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  overflow: hidden;
  transition: all var(--animation-duration-2) ease-in-out;
}
.fullscreen .project-description.no-padding {
  padding-bottom: 0;
}
.fullscreen .project-description.auto-height {
  height: auto;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fullscreen .project-description {
    grid-row: 4;
    grid-column: 3/7;
    padding-bottom: 180px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .fullscreen .project-description {
    grid-row: 4;
    grid-column: 3/7;
    padding-bottom: 180px;
  }
}
@media (min-width: 1441px) {
  .fullscreen .project-description {
    grid-row: 4;
    grid-column: 3/7;
    padding-bottom: 200px;
  }
}
.fullscreen .project-description-paragraph {
  display: inline;
}
.fullscreen .project-description-word {
  transition: font-variation-settings var(--animation-duration-1) ease-in-out;
}
.fullscreen .project-description-word.no-opacity {
  opacity: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--column-amount-projects), 1fr);
  -moz-column-gap: var(--column-gap-projects);
       column-gap: var(--column-gap-projects);
  width: 100%;
  padding-bottom: 60px;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .grid {
    grid-column: 1/9;
    grid-template-columns: repeat(var(--column-amount-projects), 1fr);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .grid {
    grid-column: 1/9;
    grid-template-columns: repeat(var(--column-amount-projects), 1fr);
  }
}
@media (min-width: 1441px) {
  .grid {
    grid-column: 1/9;
    grid-template-columns: repeat(var(--column-amount-projects), 1fr);
  }
}
.grid .project-list-headline {
  grid-column: 1/-1;
  padding-bottom: 5px;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
}
.grid .project-list-headline-word {
  transition: all var(--animation-duration-1) ease-in-out;
}
.grid .project {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: calc((100vw - 2 * var(--page-padding) - (var(--column-amount-projects) - 1) * var(--column-gap-projects)) / var(--column-amount-projects) / 3 * 2 + 10px + 10px) var(--grid-line-height);
  width: 100%;
  transition: all var(--animation-duration-1) ease-in-out;
  height: calc((100vw - 2 * var(--page-padding) - (var(--column-amount-projects) - 1) * var(--column-gap-projects)) / var(--column-amount-projects) / 3 * 2 + 10px + 10px + var(--grid-line-height));
  cursor: pointer;
}
.grid .project::before, .grid .project::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: black;
  transition: all var(--animation-duration-1) ease-in-out;
}
.grid .project::before {
  top: 0;
  right: 0;
  width: 100%;
}
.grid .project::after {
  right: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(1px);
}
.grid .project.no-width {
  width: 0%;
}
.grid .project.no-padding {
  padding: 0;
}
.grid .project.no-height {
  height: 0px;
}
.grid .project-information {
  grid-area: 2/1;
  grid-template-columns: 1fr;
  height: var(--grid-line-height);
  transition: all var(--animation-duration-1) ease-in-out;
  line-height: 0;
}
.grid .project-name {
  transition: all var(--animation-duration-1) ease-in-out;
  opacity: 1;
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
  transform: translateY(5px);
}
.grid .project-name-text {
  transition: all var(--animation-duration-1) ease-in-out;
}
.grid .project-year {
  transition: all var(--animation-duration-1) ease-in-out;
}
.grid .project-images {
  grid-area: 1/1;
  transition: all var(--animation-duration-1) ease-in-out;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid .project-images.blur {
  filter: blur(10px);
}
.grid .project-images.no-height {
  height: 0px;
}
.grid .project-images.no-opacity {
  opacity: 0;
}
.grid .project-images.no-margin {
  margin-top: 0;
}
.grid .project-image {
  width: 100%;
  height: calc((100vw - 2 * var(--page-padding) - (var(--column-amount-projects) - 1) * var(--column-gap-projects)) / var(--column-amount-projects) / 3 * 2);
}
.grid .img-element {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all var(--animation-duration-1) ease-in-out;
}

.project-line {
  width: 1px;
  background-color: black;
  height: var(--project-line-height);
  position: fixed;
  bottom: var(--project-line-bottom);
  left: calc(var(--dot-width) / 2 + var(--page-padding));
  transition: all var(--animation-duration-1) ease-in-out;
}
.project-line.no-height {
  height: 0px;
}
.project-line.top-fixed {
  top: calc(var(--project-line-top));
}
.project-line.no-transition {
  transition: unset;
}
.project-line.rotate {
  transform: rotate(180deg);
  transform-origin: center bottom;
}

.error-message {
  font-size: var(--primary-font-size);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .error-message {
    grid-column: 1/7;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .error-message {
    grid-column: 1/7;
  }
}
@media (min-width: 1441px) {
  .error-message {
    grid-column: 1/7;
  }
}

.table-container {
  transition: all var(--animation-duration-2) ease-in-out;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .table-container {
    grid-column: 1/7;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .table-container {
    grid-column: 1/7;
  }
}
@media (min-width: 1441px) {
  .table-container {
    grid-column: 1/7;
  }
}

.table-row-container {
  padding-top: var(--content-padding-bottom);
  padding-bottom: calc(var(--content-padding-bottom) - 8px);
  position: relative;
  transition: width var(--animation-duration-1) ease-in-out, padding var(--animation-duration-3) ease-in-out;
  width: 100%;
}
.table-row-container::before, .table-row-container::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: black;
  transition: all var(--animation-duration-1) ease-in-out;
}
.table-row-container::before {
  top: 0;
  right: 0;
  width: 100%;
}
.table-row-container::after {
  right: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(1px);
}
.table-row-container.no-padding {
  padding-top: 0;
  padding-bottom: 0;
}
.table-row-container.no-width {
  width: 0%;
}
.table-row-container.animation-settings {
  transition: all var(--animation-duration-2) ease-in-out;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: auto;
  -moz-column-gap: 15px;
       column-gap: 15px;
  width: 100%;
  transition: all var(--animation-duration-3) ease-in-out;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .table-row {
    grid-template-columns: 1fr 5fr;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .table-row {
    grid-template-columns: 1fr 5fr;
  }
}
@media (min-width: 1441px) {
  .table-row {
    grid-template-columns: 1fr 5fr;
  }
}

.table-header {
  grid-column: 1;
  text-align: left;
  transition: font-variation-settings var(--animation-duration-1) ease-in-out;
  padding-bottom: 9px;
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
}
@media (min-width: 1441px) {
  .table-header {
    padding-bottom: 10px;
  }
}
.table-header:nth-child(1) {
  grid-row: 1;
}
.table-header:nth-child(2) {
  grid-row: 2;
}
.table-header:nth-child(3) {
  grid-row: 3;
}
.table-header:nth-child(4) {
  grid-row: 4;
}
.table-header:nth-child(5) {
  grid-row: 5;
}

.row-item {
  grid-column: 2;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  line-height: var(--primary-line-height);
  transition: font-variation-settings var(--animation-duration-1) ease-in-out, height var(--animation-duration-2) ease-in-out;
  transform: translateY(-2px);
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.table-item-word {
  transition: font-variation-settings var(--animation-duration-2) ease-in-out;
}

.list-container {
  width: 100%;
  line-height: 1.1;
}
.list-container.margin-top {
  margin-top: calc(var(--primary-line-height) * 3);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .list-container {
    grid-column: 1/7;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .list-container {
    grid-column: 1/7;
  }
}
@media (min-width: 1441px) {
  .list-container {
    grid-column: 1/7;
  }
}

.list-headline {
  padding-bottom: 4px;
  font-size: var(--secondary-font-size);
  letter-spacing: var(--secondary-letter-spacing);
}

.item-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(8, 1fr);
  transition: all var(--animation-duration-1) ease-in-out;
  position: relative;
}
@media (max-width: 480px) {
  .item-container {
    grid-template-columns: repeat(7, 1fr);
  }
}
.item-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid black;
  width: 100%;
  transition: all var(--animation-duration-1) ease-in-out;
}
.item-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid black;
  width: 100%;
  transform: translateY(1px);
  transition: all var(--animation-duration-1) ease-in-out;
}
.item-container.no-width {
  width: 0%;
}
.item-container.no-height {
  height: 0;
}

.item-prefix {
  position: relative;
  grid-column: 1/2;
  transition: font-variation-settings var(--animation-duration-1) ease-in-out;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.item-text {
  grid-column: 2/9;
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.item-word {
  transition: font-variation-settings var(--animation-duration-2) ease-in-out;
}
.item-word.animation-settings {
  transition: all var(--animation-duration-2) ease-in-out;
}

#bottom-navigation {
  position: fixed;
  width: calc(100vw - 2 * var(--side-margin-bottom-nav));
  right: var(--side-margin-bottom-nav);
  bottom: calc(var(--bottom-margin-bottom-nav) + var(--keyboard-inset, 0px));
  background-color: black;
  border-radius: calc((var(--input-element-height) + 2 * var(--veritical-padding-bottom-nav)) / 2);
  height: auto;
  transition: height var(--animation-duration-1) ease-in-out, width var(--animation-duration-1) ease-in-out, transform var(--animation-duration-3) ease-in-out, bottom var(--animation-duration-2) ease-out;
  transform: translateY(0px);
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
  font-size: calc(var(--primary-font-size) - 1px);
}
#bottom-navigation.scroll-down {
  transform: translateY(200px);
}
@media (min-width: 769px) and (max-width: 1024px) {
  #bottom-navigation {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 6);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 1 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #bottom-navigation {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 4);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 2 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}
@media (min-width: 1441px) {
  #bottom-navigation {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 4);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 2 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}

#bottom-navigation-back {
  position: fixed;
  width: calc(100vw - 2 * var(--side-margin-bottom-nav));
  right: var(--side-margin-bottom-nav);
  bottom: calc(var(--bottom-margin-bottom-nav) + var(--keyboard-inset, 0px));
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  border-radius: calc((var(--input-element-height) + 2 * var(--veritical-padding-bottom-nav)) / 2);
  height: auto;
  transition: height var(--animation-duration-1) ease-in-out, width var(--animation-duration-1) ease-in-out, transform var(--animation-duration-3) ease-in-out, bottom var(--animation-duration-2) ease-out;
  transform: translateY(0px);
  font-size: var(--primary-font-size);
  letter-spacing: -0.2px;
}
#bottom-navigation-back.scroll-down {
  transform: translateY(200px);
}
@media (min-width: 769px) and (max-width: 1024px) {
  #bottom-navigation-back {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 6);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 1 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #bottom-navigation-back {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 4);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 2 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}
@media (min-width: 1441px) {
  #bottom-navigation-back {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 4);
    right: calc((100vw - 2 * var(--page-padding)) / 8 * 2 + var(--page-padding));
    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
  }
}

#bottom-navigation-elements {
  width: 100%;
  padding: var(--veritical-padding-bottom-nav) var(--horizontal-padding-bottom-nav);
  transition: all var(--animation-duration-1) ease-in-out;
}

#prompt-proposals {
  transition: all var(--animation-duration-1) ease-in-out;
}
.prompt-proposal-opening-1 #prompt-proposals {
  padding-bottom: 25px;
}
@media (min-width: 1441px) {
  .prompt-proposal-opening-1 #prompt-proposals {
    padding-bottom: 35px;
  }
}
.prompt-proposal-opening-2 #prompt-proposals {
  padding-bottom: 25px;
}
@media (min-width: 1441px) {
  .prompt-proposal-opening-2 #prompt-proposals {
    padding-bottom: 35px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  #prompt-proposals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #prompt-proposals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
@media (min-width: 1441px) {
  #prompt-proposals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}

.prompt-proposal-container {
  width: 100%;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all var(--animation-duration-1) ease-in-out;
  transform: translateX(-2px);
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
.prompt-proposal-container::before {
  content: "";
  position: absolute;
  border: solid 1px white;
  width: var(--small-circle-size);
  height: var(--small-circle-size);
  border-radius: 15px;
  left: 0;
  top: 0;
  transition: all var(--animation-duration-1) ease-in-out;
  transform: translateY(1px);
}
.prompt-proposal-container:hover::before {
  background-color: white;
}
.prompt-proposal-opening-1 .prompt-proposal-container {
  height: calc(var(--input-element-height));
}
@media (min-width: 769px) and (max-width: 1024px) {
  .prompt-proposal-opening-1 .prompt-proposal-container {
    height: calc(var(--input-element-height) - 8px);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .prompt-proposal-opening-1 .prompt-proposal-container {
    height: calc(var(--input-element-height) - 6px);
  }
}
@media (min-width: 1441px) {
  .prompt-proposal-opening-1 .prompt-proposal-container {
    height: calc(var(--input-element-height));
  }
}
.prompt-proposal-opening-2 .prompt-proposal-container {
  height: calc(var(--input-element-height));
  opacity: 1;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .prompt-proposal-opening-2 .prompt-proposal-container {
    height: calc(var(--input-element-height) - 8px);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .prompt-proposal-opening-2 .prompt-proposal-container {
    height: calc(var(--input-element-height) - 6px);
  }
}
@media (min-width: 1441px) {
  .prompt-proposal-opening-2 .prompt-proposal-container {
    height: calc(var(--input-element-height));
  }
}

.prompt-proposal {
  position: relative;
  padding-left: 7px;
  padding-right: 10px;
  white-space: nowrap;
  display: inline-block;
}
.prompt-proposal.animate-scroll {
  animation: scroll-horizontal var(--scroll-duration, 10s) ease-in-out;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .prompt-proposal {
    margin-top: 2px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .prompt-proposal {
    margin-top: 2px;
  }
}
@media (min-width: 1441px) {
  .prompt-proposal {
    margin-top: 1px;
  }
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(var(--scroll-distance));
  }
  55% {
    transform: translateX(var(--scroll-distance));
  }
  100% {
    transform: translateX(0);
  }
}
.prompt-proposal-mask {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.prompt-proposal-mask.mask-active {
  mask-image: linear-gradient(to right, transparent 0%, black 1%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1%, black 97%, transparent 100%);
}

#input-bar {
  width: calc(100% - var(--button-size));
  height: var(--input-element-height);
  transition: width var(--animation-duration-1) ease-in-out;
}

#input-bar-placeholder {
  width: calc(100% - var(--button-size));
  height: var(--input-element-height);
  transition: width var(--animation-duration-1) ease-in-out;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font: inherit;
}

#user-input-container {
  height: 100%;
}

#user-input {
  height: 100%;
  width: 100%;
  color: white;
  transform: translateY(-2px);
  transition: all 1000ms ease-in-out;
  font-size: max(16px, var(--primary-font-size) - 1px);
}
@media (min-width: 769px) and (max-width: 1024px) {
  #user-input {
    font-size: var(--secondary-font-size);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #user-input {
    font-size: var(--secondary-font-size);
  }
}
@media (min-width: 1441px) {
  #user-input {
    font-size: var(--secondary-font-size);
  }
}
#user-input::-moz-placeholder {
  -moz-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;
  color: rgb(128, 128, 128);
  font-variation-settings: "wght" 350;
}
#user-input::placeholder {
  transition: all 600ms ease-in-out;
  color: rgb(128, 128, 128);
  font-variation-settings: "wght" 350;
}
#user-input.placeholder-no-opacity::-moz-placeholder {
  opacity: 0;
}
#user-input.placeholder-no-opacity::placeholder {
  opacity: 0;
}

#buttons-outter-container {
  height: var(--button-size);
  width: var(--button-size);
  position: absolute;
  right: var(--button-padding);
  bottom: var(--button-padding);
}

#buttons-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.button {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

#send-button {
  background-color: white;
  display: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transform-origin: center center;
  transition: all var(--animation-duration-1) ease-in-out;
}
.input-has-content-1 #send-button {
  display: block;
  opacity: 0;
}
.input-has-content-2 #send-button {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.input-has-content-2 #send-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
#send-button.display-none {
  display: none;
}
#send-button.no-opacity {
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

#arrow-top {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 35%;
  height: 35%;
  border-top: 1px solid black;
  border-right: 1px solid black;
  transform: translate(-50%, 10%) scaleY(1.25) rotate(-45deg);
  transform-origin: center center;
}

#arrow-bottom {
  position: absolute;
  top: 26%;
  left: 50%;
  height: 55%;
  transform: translate(-50%, -2%) scaleX(1.08);
  transform-origin: center center;
  border-right: 1px solid black;
  background-color: black;
}

#plus-minus-button {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition: all var(--animation-duration-1) ease-in-out;
  opacity: 1;
}
#plus-minus-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.input-has-content-1 #plus-minus-button {
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}
.input-has-content-2 #plus-minus-button {
  display: none;
}
.streaming-1 #plus-minus-button {
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}
.streaming-2 #plus-minus-button {
  display: none;
}

#plus-minus-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 1px;
  background-color: white;
}

#plus-minus-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background-color: white;
  transition: all var(--animation-duration-1) ease-in-out;
}
.prompt-proposal-opening-1 #plus-minus-vertical {
  transform: translate(-50%, -50%) rotate(90deg);
}
.prompt-proposal-opening-2 #plus-minus-vertical {
  transform: translate(-50%, -50%) rotate(90deg);
}

#x-button {
  transform: translate(-50%, -50%) scale(0.7) rotate(45deg);
  transform-origin: center center;
  transition: all var(--animation-duration-1) ease-in-out;
  opacity: 1;
  display: none;
  background-color: white;
}
.streaming-1 #x-button {
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7) rotate(45deg);
}
.streaming-2 #x-button {
  display: block;
  transform: translate(-50%, -50%) scale(1) rotate(45deg);
}
.streaming-2 #x-button:hover {
  transform: translate(-50%, -50%) scale(1.1) rotate(45deg);
}
#x-button.rotate {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

#x-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 1px;
  background-color: black;
}

#x-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background-color: black;
  transition: all var(--animation-duration-1) ease-in-out;
}

@keyframes dotOpacity {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#thought-process-container {
  padding-bottom: 0px;
  transition: all var(--animation-duration-1) ease-in-out;
  position: relative;
  font-size: var(--secondary-font-size);
}
#thought-process-container.thinking-active {
  padding-bottom: 20px;
}
@media (min-width: 1441px) {
  #thought-process-container.thinking-active {
    padding-bottom: 30px;
  }
}

#thought-process {
  opacity: 1;
  transition: opacity 300ms ease-in-out, height var(--animation-duration-1) ease-in-out;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 0%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 0%, black 97%, transparent 100%);
  height: 0;
}
@media (min-width: 769px) and (max-width: 1024px) {
  #thought-process {
    white-space: nowrap;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #thought-process {
    white-space: nowrap;
  }
}
@media (min-width: 1441px) {
  #thought-process {
    white-space: nowrap;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  #thought-process {
    white-space: nowrap;
  }
}
#thought-process.no-opacity {
  opacity: 0;
}
#thought-process.no-width {
  width: 0;
}
.thinking-active #thought-process {
  height: var(--input-element-height);
}

.thought-process-text {
  display: inline-block;
  white-space: nowrap;
}
.thought-process-text.animate-scroll {
  animation: scroll-horizontal var(--scroll-duration, 10s) ease-in-out;
}

#thought-process-dots {
  position: absolute;
  top: 0;
  left: 0;
  height: 0%;
  opacity: 1;
  transition: all 300ms ease-in-out;
}
#thought-process-dots.no-opacity {
  opacity: 0;
}
.thinking-active #thought-process-dots {
  height: var(--input-element-height);
}

#version-history-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 135px;
  background: linear-gradient(to bottom, rgb(244, 244, 245) 20%, rgba(244, 244, 245, 0.9) 35%, rgba(244, 244, 245, 0.5) 70%, rgba(244, 244, 245, 0) 100%);
  z-index: 90;
  pointer-events: none;
  transition: all var(--animation-duration-1) ease-in-out;
}
@media (min-width: 769px) and (max-width: 1024px) {
  #version-history-background {
    width: 100vw;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #version-history-background {
    width: 100vw;
  }
}
@media (min-width: 1441px) {
  #version-history-background {
    width: 100vw;
  }
}

.version-history-background-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  backdrop-filter: blur(0.5px); /* this applies the blur */
  -webkit-backdrop-filter: blur(0.5px); /* for Safari support */
  background-color: rgba(255, 255, 255, 0); /* transparent */
  pointer-events: none;
  z-index: 80;
}

#version-history-background-blur-1 {
  height: 60px;
}

#version-history-background-blur-2 {
  height: 70px;
}

#version-history-background-blur-3 {
  height: 80px;
}

#version-history {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  color: black;
  transition: all var(--animation-duration-3) ease-in-out;
  z-index: 100;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  padding-bottom: 5px;
  padding-left: var(--page-padding);
  scroll-padding-left: var(--page-padding);
  height: 84px;
  overflow: scroll;
}
@media (min-width: 769px) and (max-width: 1024px) {
  #version-history {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #version-history {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
  }
}
@media (min-width: 1441px) {
  #version-history {
    width: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
  }
}

.version-history-element {
  transition: all var(--animation-duration-1) ease-in-out;
  font-size: var(--secondary-font-size);
  font-variation-settings: "wght" var(--font-weight-light-nav);
  transform-origin: center center;
  overflow: hidden;
  border-left: 1px solid black;
  border-right: 1px solid black;
  flex-shrink: 0;
  margin-left: -1px;
  scroll-snap-align: start;
  height: -moz-fit-content;
  height: fit-content;
  transition: all var(--animation-duration-1) ease-in-out;
  cursor: pointer;
}
.version-history-element#version-history-element-0 {
  border-right: 0px solid black;
}
.version-history-element.current-version-history-element .version-history-element-title {
  font-size: var(--large-font-size);
  font-variation-settings: "wght" 675;
  letter-spacing: -1px;
  margin-top: -4px;
  line-height: 1.2;
}
@media (min-width: 1441px) {
  .version-history-element.current-version-history-element .version-history-element-title {
    letter-spacing: -1.5px;
  }
}
.version-history-element.current-version-history-element .version-history-element-title.light {
  font-variation-settings: "wght" 150;
}
.version-history-element.current-version-history-element .version-history-element-digits {
  font-variation-settings: "wght" 675;
}
.version-history-element.current-version-history-element .version-history-element-digits.light {
  font-variation-settings: "wght" 150;
}
.version-history-element.current-version-history-element.no-height {
  height: 0px;
}
.version-history-element.current-version-history-element.no-width {
  width: 0px;
}
.version-history-element.streaming-stopped-in-process {
  width: 30px;
  opacity: 0.3;
  pointer-events: none;
}

.version-history-element-content {
  display: inline-flex;
  flex-direction: column;
}

.version-history-element-number {
  padding-top: 18px;
  padding-left: var(--version-history-element-padding);
  padding-right: var(--version-history-element-padding);
  transition: all var(--animation-duration-1) ease-in-out;
  display: block;
}
.no-transition .version-history-element-number {
  transition: none;
}

.version-history-element-digits {
  transform: translateY(0px);
  transition: all var(--animation-duration-1) ease-in-out;
  font-size: var(--secondary-number-font-size);
}
.version-history-element-digits.light {
  font-variation-settings: "wght" 350;
}

.version-history-element-title {
  transition: all var(--animation-duration-1) ease-in-out;
  padding-left: var(--version-history-element-padding);
  padding-right: var(--version-history-element-padding);
  display: inline-block;
}
.version-history-element-title.light {
  font-variation-settings: "wght" 350;
}

.hover .version-history-element:hover .version-history-element-title {
  transition: all var(--animation-duration-1) ease-in-out;
  font-variation-settings: "wght" 675;
  transition: all var(--animation-duration-1) ease-in-out;
}
.hover .version-history-element:hover .version-history-element-digits {
  font-variation-settings: "wght" 675;
}
.hover .version-history-element.current-version-history-element:hover .version-history-element-title {
  font-size: var(--large-font-size);
  font-variation-settings: "wght" 675;
  transition: all var(--animation-duration-1) ease-in-out;
}
.hover .version-history-element.current-version-history-element:hover .version-history-element-digits {
  font-variation-settings: "wght" 675;
}

.scroll-down #version-history {
  height: 100px;
}
.scroll-down #version-history-background {
  height: 100px;
}
.scroll-down #version-history-background-blur-1 {
  height: 20px;
}
.scroll-down #version-history-background-blur-2 {
  height: 30px;
}
.scroll-down #version-history-background-blur-3 {
  height: 40px;
}
.scroll-down .version-history-element:hover .version-history-element-title {
  font-size: var(--small-font-size);
  letter-spacing: 0px;
  font-variation-settings: "wght" 675;
}
.scroll-down .version-history-element:hover .version-history-element-digits {
  font-variation-settings: "wght" 675;
}
.scroll-down .version-history-element.current-version-history-element .version-history-element-title {
  font-size: var(--secondary-font-size);
  letter-spacing: 0px;
  font-variation-settings: "wght" 675;
  margin-top: 0px;
}
.scroll-down .version-history-element.current-version-history-element .version-history-element-digits {
  font-variation-settings: "wght" 675;
}
.scroll-down .version-history-element.current-version-history-element:hover .version-history-element-title {
  font-size: var(--small-font-size);
  letter-spacing: 0px;
  font-variation-settings: "wght" 675;
  transition: all var(--animation-duration-1) ease-in-out;
  margin-top: 0px;
}
.scroll-down .version-history-element.current-version-history-element:hover .version-history-element-digits {
  font-variation-settings: "wght" 675;
}
.scroll-down .start-version-history-element .version-history-element-title {
  transform: translateY(0);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .scroll-down .start-version-history-element .version-history-element-title {
    padding-bottom: 0;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .scroll-down .start-version-history-element .version-history-element-title {
    padding-bottom: 0;
  }
}
@media (min-width: 1441px) {
  .scroll-down .start-version-history-element .version-history-element-title {
    padding-bottom: 0;
  }
}

.start-version-history-element {
  border-right: 0px solid black;
  transition: all var(--animation-duration-1) ease-in-out;
  font-size: var(--secondary-font-size);
  font-variation-settings: "wght" var(--font-weight-light-nav);
  transform-origin: center center;
  overflow: hidden;
  border-left: 1px solid black;
  flex-shrink: 0;
  margin-left: -1px;
  scroll-snap-align: start;
  height: -moz-fit-content;
  height: fit-content;
  transition: all var(--animation-duration-1) ease-in-out;
  cursor: pointer;
  padding-bottom: 0;
}
.start-version-history-element .version-history-element-digits {
  opacity: 0;
}
.start-version-history-element .version-history-element-title {
  transform: translateY(22px);
}
@media (max-width: 480px) {
  .start-version-history-element {
    display: none;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .start-version-history-element {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .start-version-history-element {
    position: fixed;
    top: 0;
    left: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
    overflow: visible;
    -webkit-transform: translateZ(0);
  }
  .start-version-history-element .version-history-element-title {
    padding-bottom: 30px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .start-version-history-element {
    position: fixed;
    top: 0;
    left: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
    overflow: visible;
    -webkit-transform: translateZ(0);
  }
  .start-version-history-element .version-history-element-title {
    padding-bottom: 22px;
  }
}
@media (min-width: 1441px) {
  .start-version-history-element {
    position: fixed;
    top: 0;
    left: calc((100vw - 2 * var(--page-padding)) / 8 * 6 + 2 * var(--page-padding));
    overflow: visible;
    -webkit-transform: translateZ(0);
  }
  .start-version-history-element .version-history-element-title {
    padding-bottom: 26px;
  }
}/*# sourceMappingURL=style.css.map */