@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-arabic-wght-normal.8c4cadc1.woff2") format("woff2-variations");
  unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-cyrillic-ext-wght-normal.3f3d8af2.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-cyrillic-wght-normal.5aadfd28.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-hebrew-wght-normal.452a3556.woff2") format("woff2-variations");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-latin-ext-wght-normal.08c61594.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-latin-wght-normal.3ba363a2.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  :root {
    --sp-xl: 4rem;
    --sp-l: 2.5rem;
    --sp: 2rem;
    --sp-s: .8rem;
    --header-height: 7.5rem;
    --ff: "neue-haas-grotesk-text", sans-serif;
    --ff-heading: "neue-haas-grotesk-display", sans-serif;
    --fw: 400;
    --fw-bold: 500;
    --fw-heading: 600;
    --fs: clamp(1.3rem, .5vw + 1rem, 1.8rem);
    --fs-brand-name: 4.2rem;
    --fs-nav: 2.8rem;
    --lh: 1.3;
    --clr-bg: #fff;
    --clr-text: #949494;
    --clr-brand: #ff6047;
    --clr-brand-hover: #db4129;
  }

  body {
    font-family: var(--ff);
    font-size: var(--fs);
    font-weight: var(--fw);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    background-color: var(--clr-bg);
    color: var(--clr-text);
    min-height: 100dvh;
    margin: 0;
  }

  p {
    text-align: justify;
    hyphens: auto;
    margin: 0;
  }

  .hero-carousel {
    object-fit: cover;
    block-size: 110vh;
    inline-size: 100%;
    display: block;
  }

  .side-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: block;
  }

  .project-grid-img {
    inline-size: 100%;
    display: block;
  }

  .project-img-container {
    margin-block-start: var(--header-height);
  }

  .project-img {
    width: 100%;
    inline-size: 100%;
    display: block;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
    margin-block-start: var(--header-height);
    display: grid;
  }

  @media (width <= 40em) {
    .project-grid {
      display: block;
    }
  }

  .about-img-container {
    flex-shrink: 0;
    width: 40%;
    height: 100vh;
  }

  @media (width <= 1800px) {
    .about-img-container {
      width: calc(22.5vw + 315px);
    }
  }

  .about-img {
    object-fit: cover;
    object-position: 50% 10%;
    width: 100%;
    height: 100%;
  }

  .product-page {
    gap: var(--sp-xl);
    display: flex;

    & .left-column {
      justify-content: flex-end;
      gap: var(--sp-s);
      height: 100vh;
      box-sizing: border-box;
      inline-size: 40%;
      flex-direction: column;
      padding-block-start: calc(var(--sp) + var(--header-height));
      padding-block-end: var(--sp);
      padding-inline-start: var(--sp);
      display: flex;
      position: sticky;
      top: 0;
    }

    & .right-column {
      gap: var(--sp-l);
      flex-direction: column;
      width: 60%;
      display: flex;
      overflow: hidden;
    }

    @media (width <= 65em) {
      gap: var(--sp);
      flex-direction: column;
      margin-block-start: var(--header-height);

      & .left-column {
        height: auto;
        min-block-size: auto;
        inline-size: 100%;
        order: 0;
        padding-block: 0;
        padding-inline-end: var(--sp);
        position: static;
        top: auto;
      }

      & .right-column {
        display: contents;
      }

      & .project-img:first-child {
        order: -1;
      }

      & .project-img {
        order: 1;
        width: 100%;
      }
    }
  }

  .contact-page {
    gap: var(--sp-xl);
    display: flex;

    & .left-column {
      justify-content: flex-end;
      gap: var(--sp-s);
      box-sizing: border-box;
      min-block-size: 100vh;
      inline-size: 40%;
      flex-direction: column;
      padding-block-start: calc(var(--sp) + var(--header-height));
      padding-block-end: var(--sp);
      padding-inline-start: var(--sp);
      display: flex;
      position: sticky;
      top: 0;
    }

    & .right-column {
      gap: var(--sp-l);
      flex-direction: column;
      width: 60%;
      display: flex;
      overflow: hidden;
    }

    @media (width <= 65em) {
      & .right-column {
        display: none;
      }

      & .left-column {
        width: 100%;
        min-height: 100dvh;
        padding-inline-end: var(--sp);
      }
    }
  }

  .about-page {
    gap: var(--sp-xl);
    display: flex;
  }

  #about-text {
    justify-content: flex-end;
    gap: var(--sp-s);
    min-block-size: 100vh;
    padding-block-end: var(--sp);
    padding-inline-start: var(--sp);
    padding-top: calc(var(--sp) + var(--header-height));
    box-sizing: border-box;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    max-width: 40ch;
    margin-inline-end: auto;
    display: flex;
    top: 0;
    overflow-y: auto;
  }

  @media (width <= 40em) {
    .about-page {
      margin-block-start: var(--header-height);
    }
  }

  @media (width <= 65em) {
    .about-page {
      gap: var(--sp);
      flex-direction: column-reverse;
      min-height: 100dvh;
    }

    .about-img-container, #about-text {
      flex-shrink: 1;
      width: 100%;
      max-width: none;
    }

    .about-img-container {
      height: 45vh;
    }

    #about-text {
      min-block-size: auto;
      padding-top: 0;
      justify-content: flex-start;
      margin-inline-end: 0;
      padding-inline-end: var(--sp);
    }
  }

  #mail-telephone {
    flex-direction: column;
    display: flex;
  }

  .contact-info {
    align-items: flex-start;
    gap: var(--sp-s);
    flex-direction: column;
    display: flex;
  }

  .contact-info a {
    color: var(--clr-text);
    text-decoration: none;
  }

  .contact-info a:hover {
    text-decoration: underline;
  }

  .contact-form {
    gap: var(--sp-s);
    margin-top: var(--sp);
    flex-direction: column;
    display: flex;
    container: form / inline-size;
  }

  .form-row {
    gap: clamp(.8rem, 4cqw, 2.4rem);
    display: flex;
  }

  @media (width <= 40em) {
    .form-row {
      gap: var(--sp-s);
      flex-direction: column;
    }
  }

  .contact-form input, .contact-form textarea {
    border: none;
    border-block-end: 2px solid var(--clr-brand);
    width: 100%;
    font-family: var(--ff);
    font-size: var(--fs);
    color: #000;
    padding: var(--sp-s) 0;
    background: none;
    outline: none;
  }

  .contact-form input::placeholder, .contact-form textarea::placeholder {
    color: var(--clr-text);
    font-family: var(--ff);
  }

  .contact-form textarea {
    resize: none;
    min-height: 10rem;
  }

  #send-btn {
    color: var(--clr-brand);
    font-family: var(--ff);
    font-weight: var(--fw-bold);
    font-size: var(--fs);
    cursor: pointer;
    margin-top: var(--sp-s);
    background: none;
    border: none;
    align-self: flex-start;
    padding: 0;
  }

  #send-btn:hover {
    text-decoration: underline;
  }

  time {
    font-size: var(--fs);
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
    margin: 0;
  }

  h1 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    margin: 0;
  }

  h2 {
    font-size: var(--fs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--clr-brand);
    margin: 0;
  }

  b, strong {
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
  }
}

@layer components {
  .header {
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    block-size: var(--header-height);
    padding-inline: var(--sp);
    z-index: 20;
    background: none;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    & h1 {
      margin-block: 0;
    }

    & .brand-name {
      font-size: var(--fs-brand-name);
      color: #000;
      text-decoration: none;
    }

    & .brand-short {
      display: none;
    }

    @media (width <= 40em) {
      & .brand-full {
        display: none;
      }

      & .brand-short {
        display: inline;
      }
    }

    & #main-nav {
      z-index: 25;
    }

    & #main-nav-list {
      gap: var(--sp);
      margin-block: 0;
      padding-inline: 0;
      list-style: none;
      display: flex;

      & a, & a:visited {
        font-size: var(--fs-nav);
        color: var(--clr-brand);
        line-height: .9em;
        text-decoration: none;
        transition: all .1s;
      }

      & a:hover {
        color: var(--clr-brand-hover);
      }
    }

    @media (width <= 65em) {
      & #main-nav {
        background-color: var(--clr-brand);
        visibility: hidden;
        position: fixed;
        inset: 0;
        transform: translateX(100%);
      }

      & #main-nav-list {
        justify-content: center;
        align-items: center;
        gap: var(--sp-xl);
        flex-direction: column;
        height: 100%;

        & a, & a:visited {
          color: #fff;
          text-decoration: none;
          display: block;
        }
      }
    }

    & .hamburger {
      cursor: pointer;
      z-index: 30;
      background: none;
      border: none;
      flex-direction: column;
      justify-content: space-between;
      width: 3.6rem;
      height: 3rem;
      padding: 0;
      display: none;
    }

    & .hamburger span {
      background-color: var(--clr-brand);
      transform-origin: center;
      width: 100%;
      height: 9px;
      transition: transform .3s, opacity .3s;
      display: block;
    }

    & .hamburger[aria-expanded="true"] span:first-child {
      background-color: #fff;
      transform: translateY(19.4px) rotate(45deg);
    }

    & .hamburger[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
      background-color: #fff;
    }

    & .hamburger[aria-expanded="true"] span:nth-child(3) {
      background-color: #fff;
      transform: translateY(-19.4px) rotate(-45deg);
    }

    & .current {
      text-decoration: underline;
    }

    @media (width <= 65em) {
      & .hamburger {
        display: flex;
      }

      & .hamburger[aria-expanded="true"] ~ #main-nav {
        visibility: visible;
        transform: translateX(0);
      }
    }
  }

  .footer {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    padding: var(--sp);
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    display: flex;

    & nav a {
      color: var(--clr-text);
      text-decoration: none;
    }

    & nav a:visited {
      color: var(--clr-text);
    }

    & nav a:hover {
      text-decoration: underline;
    }

    & .copyright-short {
      display: none;
    }

    @media (width <= 25em) {
      & .copyright-full {
        display: none;
      }

      & .copyright-short {
        display: inline;
      }
    }
  }
}
/*# sourceMappingURL=MoritzThiem.2f99ebbf.css.map */