.hero {
  container-type: inline-size;
  container-name: hero;

  & * {
    font-family: var(--font-family-Montserrat);
  }

  .hero-container {
    background-color: var(--hero-bg-color, oklch(91.41% 0.01679 151.395));
    border-radius: var(--border-radius-8, 0.5rem);
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    min-height: var(--hero-height);
    height: var(--hero-height);
    overflow: hidden;
    /* padding: 3.5rem 1rem; */
    position: relative;
    transition: min-height 0.3s, height 0.3s;
    width: 100%;

    .hero-content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing--xx-small);
      justify-content: center;
      max-inline-size: 100%;
      padding: var(--spacing--xx-small) var(--spacing--small);
      width: 100%;
      z-index: 1;

      .hero-content--header h1, .hero-content--header h2 {
        font-weight: 800;
      }

      .hero-content--header, .hero-content--description-text {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--x-small);
      }

      .slash {
        margin-inline: var(--spacing--xx-small);
      }
    }

    .hero-content--description-text {
      /* display: grid;
      gap: var(--spacing--small); */
      p {
        font-weight: 500;
        margin-block: 0;
      }
    }

    .hero-image--container {
      /* background-image: url('/portfolio/images/hero-me-bg.jpg'); */
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      overflow: hidden;
    }

    /* .hero-image.overlay {
      border-image: linear-gradient(hsl(0 0% 100% / .9), hsl(0 0% 100% / .9)) fill 1;
    } */

    .hero-image {
      background-image: linear-gradient(hsl(0 0% 100% / .95), hsl(0 0% 100% / .94)), url('/portfolio/images/hero_bg.jpg');
      background-repeat: no-repeat;
      background-size: cover; 
      display: flex;
      align-items: flex-end;
      height: 100%;
      justify-content: center;
      overflow: hidden;
      position: relative;
      /* top: var(--spacing--xx-small); */
      width: 100%;
      
      img {
        width: 100%;
        height: auto;
        max-height: 46vh;
        object-fit: contain;
      }
    }

    a.btn {
      align-items: center;
      background-color: var(--btn--background-color, oklch(35.618% 0.00004 271.152));
      border-radius: 50px;
      color: var(--text--color--light);
      display: flex;
      font-weight: 500;
      gap: var(--spacing--xx-small);
      padding: 0.75rem 1.4rem;
      text-decoration: none;
      white-space: nowrap;
      width: 6.75rem;
      overflow-x: clip;
      /* transition: width 0.5s ease; */
      transition: var(--transition);

      img {
        color: var(--white);
        display: none;
        height: var(--p-size, 1rem);
        position: relative;
        right: -5px;
        transform: rotate(90deg);
      }

      &:hover {
        background-color: var(--btn--background-color--hover, oklch(40% 0.00004 271.152));
        width: max-content;
        padding-inline-end: 1.75rem;

        img {
          display: inline-block;
          animation: slide-in 0.5s forwards;
        }
      }
    }
  }

  @container hero (min-width: 946px) {
    .hero-container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      min-height: var(--hero-height);
      height: auto;

      .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-inline-size: 100%;
        padding: var(--spacing--xx-small) calc(var(--spacing--large) * 2);
        width: 100%;
        z-index: 1;
      }

      .hero-image--container {
        align-items: center;
      }

      .overlay {
        border-top-left-radius: var(--border-radius-8);
       
      }

      .hero-image {
        border-top-left-radius: var(--border-radius-8);
        border-bottom-left-radius: var(--border-radius-8);
        height: 60%;

        img {
          width: auto;
        }
      }
    }
  }

  @container hero (min-width: 1023px) {
    .hero-container {
      .hero-image--container {
        .hero-image {
          img {
            max-height: 55vh;
          }
        }
      }
    }
  }
}
.wl1287dqt h3{margin-block-end:var(--spacing--small, 1rem)}.wl1287dqt .portfolio{container-type:inline-size;container-name:portfolio}.wl1287dqt .portfolio-container{display:grid;gap:1rem;grid-template-columns:1fr}.wl1287dqt .portfolio-card{border-radius:var(--border-radius-8, 0.5rem);overflow:hidden;padding:var(--spacing--small);transition:var(--transition);.wl1287dqt &:hover{animation:card-hover .5s cubic-bezier(.2,.9,.2,1) both;box-shadow:0 2px 8px oklch(47.075%0.01582 166.793/0.2)}.wl1287dqt &:hover img{transform:scale(1.08)}a {
            text-decoration: none;
            color: inherit;
            display: grid;
            gap: var(--spacing--small);
            .card-image {
                border-radius: var(--border-radius-8);
                display: flex;
                height: auto;
                /* min-height: 14.688rem;
                max-height: 14.688rem; */
                overflow: hidden;
                min-width: 100%;

                img {
                    transition: transform 0.3s ease;
                }
            }

            h3, p {
                color: var(--color--primary, oklch(35.618% 0.00004 271.152));
            }

            h4 {
                color: var(--color--tertiary);
                font-size: var(--h4-size);
                font-weight: 600;
                margin-block-end: 0;
            }

            p {
                font-weight: normal;
            }
        }}.wl1287dqt .portfolio-card:nth-child(1),.wl1287dqt .portfolio-card:nth-child(5){transition-delay:300ms}.wl1287dqt .portfolio-card:nth-child(2),.wl1287dqt .portfolio-card:nth-child(6){transition-delay:200ms}.wl1287dqt .portfolio-card:nth-child(3),.wl1287dqt .portfolio-card:nth-child(7){transition-delay:100ms}.wl1287dqt .portfolio-card:nth-child(4),.wl1287dqt .portfolio-card:nth-child(8){transition-delay:50ms}@container portfolio (min-width: 768px){.wl1287dqt .portfolio-container{grid-template-columns:1fr 1fr}}@container portfolio (min-width: 1024px){.wl1287dqt .portfolio-container{grid-template-columns:repeat(2,1fr);align-items:stretch;.portfolio-card {
                min-height: 17.75rem;
            }}}.wl1287dqt :root[data-theme="dark"]{.portfolio-card h4 {
            color: var(--off-white);
        }
        .portfolio-card {
            &:hover {
                box-shadow: transparent;
            }
        }}@keyframes card-hover{from{transform:translateY(0) scale(1);opacity:0.9}to{transform:translateY(-8px) scale(1.02);background-color:var(--card-bg, oklch(97.015% 0.00011 271.152));opacity:1}}
.about {
    background-color: transparent;
    box-shadow: none;
    container-type: inline-size;
    container-name: about;

    .about-container {
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about-image {
        max-inline-size: 20rem;

        img {
            border-radius: 50%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            width: 100%;
            height: auto;
        }
    }

    .about-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);

        p {
            font-weight: normal;
        }
    }

    @container about (min-width: 768px) {
        .about-container {
            grid-template-columns: 1fr 1fr;
            display: grid;
        }
    }
}

:root[data-theme="dark"] {
    .about {
        /* background-color: var(--section-bg-opposite); */
        .about-content {
            h2, p {
                color: var(--color--text-light);
            }

            p {
                font-weight: normal
            };
        }
    }
}
.clients {
        padding: var(--spacing--medium);
        border-radius: var(--border-radius-8);
        box-shadow: var(--box-shadow);

        container-type: inline-size;
        container-name: clients;

        h4 {
            font-size: var(--font--size--20);
            font-weight: 500;
            text-align: center
        };

        ul {
            border-radius: var(--border-radius-8);
            display: grid;
            gap: var(--spacing--small);
            grid-template-columns: 1fr 1fr;
            justify-content: space-between;
            list-style: none;
            margin: 0;
            overflow: hidden;
            padding: 0;

            li {
                align-items: center;
                display: flex;
                justify-content: center;
                margin: 0;
                padding: 0;
                text-align: center;
                transition: var(--transition);
                width: 100%;

                svg {
                    height: auto;
                    max-width: 100%;
                    width: 130px;
                    filter: grayscale(1);
                    transition: var(--transition);
                    
                    & * {
                        mask: unset;
                    }
                    
                    path {
                        fill: var(--color--primary);
                    }
                }
            }

            li:nth-child(1), li:nth-child(5), li:nth-child(9) {
                transition-delay: 300ms;
            }

            li:nth-child(2), li:nth-child(6), li:nth-child(10) {
                transition-delay: 200ms;
            }

            li:nth-child(3), li:nth-child(7), li:nth-child(11) {
                transition-delay: 100ms;
            }

            li:nth-child(4), li:nth-child(8), li:nth-child(12) {
                transition-delay: 50ms;
            }
        }

        @container clients (min-width: 1024px) {
            ul {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }    

    :root[data-theme="dark"] {
        svg path {
            fill: var(--color--opposite);
        }
    }
.contact-container {
      container-type: inline-size;
      container-name: contact; 

      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing--small);
      justify-content: center;
      max-inline-size: 100%;
      margin: 0 auto;
      width: 100%;
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing--small);
      justify-content: space-between;
      margin: 0 auto;
      max-inline-size: 73rem;
      width: 100%;

      .contact-info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);
        justify-content: space-between;
        text-align: left;

        h4 {
          font-size: var(--h4-size);
          margin-block-end: 0;
        }

        .hero-image {
          background-image: linear-gradient(hsl(0 0% 100% / .95), hsl(0 0% 100% / .94)), url('/portfolio/images/hero_bg.jpg');
          background-repeat: no-repeat;
          background-size: cover; 
          border-radius: var(--border-radius-8);
          border: 1px solid var(--color--tertiary);
          display: flex;
          align-items: flex-end;
          height: 100%;
          justify-content: center;
          overflow: hidden;
          position: relative;
          /* top: var(--spacing--xx-small); */
          inline-size: 100%;
          
          img {
            width: 100%;
            height: auto;
            max-height: 24vh;
            object-fit: contain;
          }
        }

        .social-links {
          display: flex;
          gap: var(--spacing--small);
          justify-content: center;
          transition: var(--transition);

          .social-link {
            svg path {
              color: var(--color--secondary);
              fill: var(--color--secondary);
              transition: var(--transition);
            }
            &:hover svg path {
              background-color: var(--color--secondary-hover);
              fill: var(--color--secondary-hover);
            }
          }
        }
      }

      form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);
        text-align: left;

        input, textarea {
          border: 1px solid var(--color--tertiary);
        }

        button {
          background-color: var(--color--secondary);
          border: none;
          inline-size: 100%;
          max-inline-size: 100%;
          transition: var(--transition);

          &:hover {
            background-color: var(--color--secondary-hover);
          }
          &:focus {
            background-color: var(--color--secondary-hover);
            background-color: color-mix(in srgb, var(--color--secondary-hover) 85%, black 15%);
          }
        }
      }
    }

    ul.nav-list-footer {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 2rem;
      list-style: none;
      margin: 0;
      padding: 0;
      transition: transform 0.3s, right 0.3s, left 0.3s;
      justify-content: center;
      margin-block-end: var(--spacing--small);
      position: relative;
      z-index: 1000;

      a {
        text-decoration: none;
        color: inherit;
        font-size: var(--font--size--16);
        font-weight: 500;
      }
    }

    @container contact (min-width: 1023px) {
      .contact-form {
        grid-template-columns: 1fr 1fr;

        .contact-info { 
          .hero-image {
            inline-size: 50%;

            img {
              max-height: 46vh;
            }
          } 

          .social-links {
            justify-content: flex-start;
          }
        }

        form {

          button {
            max-inline-size: 50%;
          }
        }
      }
    }
  }

  @supports not (background-color: light-dark(white, black)) {
    body > footer {
      /* background-color: var(--fn--footer--background-color--light); */
      background-color: transparent;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .contact-container {
        /* background-color: var(--fn--footer--background-color--dark); */
        background-color: transparent;

        .contact-form {
          .contact-info {
            .social-links {
              .social-link {
                svg path {
                  color: var(--color--secondary);
                  fill: var(--color--secondary);
                  transition: var(--transition);
                }
                &:hover svg path {
                  background-color: var(--color--secondary-hover);
                  fill: var(--color--secondary-hover);
                }
              }
            }
          }

          form {
            button {
              background-color: var(--color--secondary);
              border: none;
              max-inline-size: 50%;
              transition: var(--transition);

              &:hover {
                background-color: var(--off-white);
              }
            }
          }
        }
      }
    }
  }
.site-nav {
    position: relative;
    /* Remove padding here for mobile-first */
    display: flex;
    align-items: center;
}

/* Mobile-first styles */
.mobile-menu-toggle {
    height: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
#menu-toggle {
    display: contents;
    font-size: 2rem;
    line-height: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--menu-toggle-color, #000);
    padding: 0;
}

.nav-list {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nav-bg, #fff);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-block: 100px;
    transform: translateY(-100%);
    transition: transform 0.3s, right 0.3s, left 0.3s;
    z-index: 1000;
    display: flex;
}

/* Tablet: open from right side */
@media (min-width: 600px) and (max-width: 1022px) {
    .nav-list {
        width: 512px;
        height: 100vh;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        transform: translateX(100%);
        transition: transform 0.3s;
        box-shadow: -2px 0 8px rgba(0,0,0,0.04);
        padding-block: 80px;
    }
    .nav-list.open {
        transform: translateX(0);
    }
    
    #overlay {
        position: fixed; /* Or absolute, depending on desired scope */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
        z-index: 999; /* Ensure it's above other content */
        display: none; /* Hidden by default */
        transition: opacity 0.3s ease-in-out; /* Optional: for smooth transitions */
        opacity: 0; /* Optional: for smooth transitions */
    }

    .nav-list.open ~ #overlay {
        display: block;
        opacity: 1;
    }
}

/* Default open state for mobile (slide down) */
.nav-list.open {
    transform: translateY(0);
}

.nav-list li.mobile-logo {
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.nav-list a {
    text-decoration: none;
    color: inherit;
    font-size: var(--font--size--16);
    font-weight: 500;
}

.close-menu {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;

    button {
        border: 0;
        padding: 0;
        color: var(--color--primary);
        display: contents;
        font-weight: 600;
        height: min-content;
        line-height: 0;
        font-size: 2rem;
        position: absolute;
        background-color: transparent;
    }
}

.theme-switch {
    display: flex;
}

.theme-switch input[type=checkbox] {
    display: none;
}

.theme-switch input[type=checkbox]:checked ~ label::after {
    background-color: var(--color--primary);
    transform: translateX(20px);
}

.theme-switch label {
    background-color: var(--off-white);
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all ease-in-out 0.3s;
    width: 40px;
    height: 22px;
}

.theme-switch label::after {
    background-color: var(--color--primary);
    border-radius: 50%;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    position: absolute;
    left: 1px;
    top: 1px;
    transition: var(--transition);
    width: 19px;
    height: 19.5px;
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Desktop styles */
@media (min-width: 1023px) {
    #menu-toggle {
        display: none;
    }
    .nav-list {
        position: static;
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
        background: none;
        transform: none;
        transition: none;
        z-index: auto;
    }
    .nav-list li.mobile-logo {
        display: none;
    }
    .site-nav {
        padding: 0;
    }
    .close-menu {
        display: none;
    }
}
body > header {
    background-color: var(--background--light);
    padding-block: var(--mnml--spacing);

    @supports (background-color: color-mix(in oklch, var(--background--light), black)) {
      background-color: color-mix(
        in oklch,
        var(--background--light) 95%,
        transparent
      );
      backdrop-filter: blur(0.8rem);
    }

    a {
      font-family: var(--font--family);
      font-size: var(--font--size--16);
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 500;
      color: var(--color--primary);
      text-decoration: none;
    }
  }
body > footer {
    container-type: inline-size;
    container-name: footer;
    padding-inline: var(--spacing--small);
    z-index: 1;

    .footer-container {
      display: flex;
      flex-direction: column;
      gap: var(--spacing--small);
      justify-content: center;
      max-inline-size: 100%;
      margin: 0 auto;
      width: 100%;
    }

    .license {
      text-align: center;
    }

    section.contact-form {
      box-shadow: none;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing--small);
      justify-content: space-between;
      margin: 0 auto;
      max-inline-size: 73rem;
      width: 100%;

      .contact-info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);
        justify-content: space-between;
        text-align: left;

        h4 {
          font-size: var(--h4-size);
          margin-block-end: 0;
        }

        .hero-image {
          background-image: linear-gradient(hsl(0 0% 100% / .95), hsl(0 0% 100% / .94)), url('/portfolio/images/hero_bg.jpg');
          background-repeat: no-repeat;
          background-size: cover; 
          border-radius: var(--border-radius-8);
          border: 1px solid var(--color--tertiary);
          display: flex;
          align-items: flex-end;
          height: 100%;
          justify-content: center;
          overflow: hidden;
          position: relative;
          /* top: var(--spacing--xx-small); */
          inline-size: 100%;
          
          img {
            width: 100%;
            height: auto;
            max-height: 24vh;
            object-fit: contain;
          }
        }

        .social-links {
          display: flex;
          gap: var(--spacing--small);
          justify-content: center;
          transition: var(--transition);

          .social-link {
            svg path {
              color: var(--color--secondary);
              fill: var(--color--secondary);
              transition: var(--transition);
            }
            &:hover svg path {
              background-color: var(--color--secondary-hover);
              fill: var(--color--secondary-hover);
            }
          }
        }
      }

      form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);
        text-align: left;

        input, textarea {
          border: 1px solid var(--color--tertiary);
        }

        button {
          background-color: var(--color--secondary);
          border: none;
          inline-size: 100%;
          max-inline-size: 100%;
          transition: var(--transition);

          &:hover {
            background-color: var(--color--secondary-hover);
          }
        }
      }
    }

    ul.nav-list-footer {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 2rem;
      list-style: none;
      margin: 0;
      padding: 0;
      transition: transform 0.3s, right 0.3s, left 0.3s;
      justify-content: center;
      margin-block-end: var(--spacing--small);
      position: relative;
      z-index: 1000;

      a {
        text-decoration: none;
        color: inherit;
        font-size: var(--font--size--16);
        font-weight: 500;
      }
    }

    @container footer (min-width: 1023px) {
      section.contact-form {
        grid-template-columns: 1fr 1fr;

        .contact-info { 
          .hero-image {
            inline-size: 50%;

            img {
              max-height: 46vh;
            }
          } 

          .social-links {
            justify-content: flex-start;
          }
        }

        form {

          button {
            max-inline-size: 50%;
          }
        }
      }
    }
  }

  @supports (background-color: light-dark(white, black)) {
    body > footer {
      background-color: transparent;
      /* background-color: light-dark(
        var(--fn--footer--background-color--light),
        var(--fn--footer--background-color--dark)
      ); */
    }
  }

  @supports not (background-color: light-dark(white, black)) {
    body > footer {
      /* background-color: var(--fn--footer--background-color--light); */
      background-color: transparent;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) body > footer {
        /* background-color: var(--fn--footer--background-color--dark); */
        background-color: transparent;

        section.contact-form {
          .contact-info {
            .social-links {
              .social-link {
                svg path {
                  color: var(--color--secondary);
                  fill: var(--color--secondary);
                  transition: var(--transition);
                }
                &:hover svg path {
                  background-color: var(--color--secondary-hover);
                  fill: var(--color--secondary-hover);
                }
              }
            }
          }

          form {
            button {
              background-color: var(--color--secondary);
              border: none;
              max-inline-size: 50%;
              transition: var(--transition);

              &:hover {
                background-color: var(--off-white);
              }
            }
          }
        }
      }
    }
  }
:root {
  --font-family-Montserrat: 'Montserrat', sans-serif;

  --mnml--body--background-color--light: oklch(100% 0 0);
  --mnml--body--background-color--dark: oklch(26.21% 0.009 248.19);
  --mnml--body--text-color--light: oklch(26.21% 0.009 248.19);
  --mnml--body--text-color--dark: oklch(98.16% 0.002 247.84);

  --spacing--xx-small: 0.5rem;
  --spacing--x-small: 0.75rem;
  --spacing--small: 1rem;
  --spacing--medium: 1.5rem;
  --spacing--large: 2rem;
  --spacing--x-large: 3rem;

  --color--primary: oklch(31.317% 0.00004 271.152);
  --color--secondary: oklch(69.501% 0.07346 148.976);
  --color--secondary-hover: oklch(75.0% 0.08 148.976);
  --color--tertiary: oklch(35.618% 0.00004 271.152);
  --off-white: oklch(97.015% 0.00011 271.152);
  --white: oklch(100% 0.00011 271.152);

  --background--light: oklch(98.212% 0.00011 271.152);
  --border-radius-8: .5rem;
  --border-radius-16: 1rem;
  --box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  --btn--background-color: var(--color--opposite);
  --btn--background-color--hover: oklch(0.36 0 0);
  --card-bg: var(--off-white);
  --color--opposite: var(--color--secondary);
  --font--family: 'Montserrat', sans-serif;
  --font--semibold: 600;
  --font--size--16: 1rem;
  --font--size--18: 1.125rem;
  --font--size--20: 1.25rem;
  --font--size--24: 1.5rem;
  --font--size--32: 2rem;
  --font--size--48: 3rem;
  --font--size--64: 4rem;
  --font--bold: bold;
  --text--color--light: var(--off-white);
  --transition: all ease-in-out 0.3s;

  /*Header/Nav */
  --header-height: 4rem;
  --offset-height: 6rem;
  --menu-toggle-color: var(--color--primary);
  --nav-bg: var(--off-white);

  /*Hero */
  /* --hero-bg-color: oklch(91.41% 0.01679 151.395); */
  --hero-height: calc(100vh - var(--offset-height, 6rem));
  --hero-image-bg: oklab(100% 0 -0.00011 / 0.715);
  --h1-size: clamp(3rem, 6vw, 4rem);
  --h2-size: clamp(1.5rem, 6vw, 2.25rem);
  --h3-size: 2rem;
  --h4-size: 1.25rem;
  --p-size: 1rem;

  --fn--footer--background-color--light: var(--background--light);
  --fn--footer--background-color--dark: var(--color--primary);
}

:root[data-theme="dark"] {
  --body--bg-color: linear-gradient(to right bottom, #313131, #353636, #393a3b, #3d3f3f, #414443, #414443, #414443, #414443, #3d3f3f, #393a3b, #353636, #313131);
  --btn--background-color: var(--color--primary);
  --card-bg: var(--color--primary);
  --color--opposite: oklch(97.015% 0.00011 271.152);
  --nav-bg: var(--color--primary);
  --nav-text-color: oklch(100% 0.00011 271.152);
  --hero-bg-color: oklch(69.501% 0.07346 148.976);
  --menu-toggle-color: oklch(100% 0.00011 271.152);
  --section-bg-opposite: oklch(0.4091 0 0);

  body {
    background: var(--body--bg-color);
  }

  section.portfolio, section.clients {
    background-color: var(--color--tertiary, oklch(35.618% 0.00004 271.152));
  }

  .nav-list a {
    color: var(--nav-text-color);
  }

  body > header {
    background-color: var(--color-primary);

    .logo {
      color: var(--menu-toggle-color);
    }
  }

  .portfolio, .clients, .portfolio-text {
    h2, h3, p, a {
      color: var(--color--opposite, oklch(97.015% 0.00011 271.152));
    }
  }

  a.btn {
      background-color: var(--btn--background-color, oklch(35.618% 0.00004 271.152));
  }

  .close-menu {
    button {
        color: var(--off-white);
       
    }
  }

  .portfolio-card h4 {
      color: var(--off-white);
  }
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-200.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url('/portfolio/assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

html { scroll-behavior: smooth; }

body {
    /* background-color: var(--background--light, oklch(97.015% 0.00011 271.152)); */
    background: linear-gradient(145deg,rgba(249, 249, 249, 1) 25%, rgba(232, 237, 235, 1) 50%, rgba(249, 249, 249, 1) 75%);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1, h2, h3, h4 {
    font-family: var(--font-family-Montserrat, 'Montserrat', sans-serif);
}

h1, h2 {
    color: var(--color--primary);
    margin-block: 0;
    span.color-opposite {
        color: var(--color--opposite, oklch(97.015% 0.00011 271.152));
        -webkit-text-stroke: 2px var(--color--primary);
        paint-order: stroke fill;
    }
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--font--bold);
    line-height: clamp(3rem, 6vw, 3.5rem);
}

h2 {
    font-size: var(--h2-size);
    line-height: 2.5rem;
}

h3 {
    font-size: var(--h3-size);
    font-weight: 600;
    line-height: 2.25rem;
}

p {
    color: var(--color--primary);
    font-weight: var(--font--semibold, 600);
    line-height: 1.5rem;
    padding-inline-end: .5rem;
    margin-block-start: 0;
}

header .container {
    display: flex;
    justify-content: space-between;
}

section {
    border-radius: var(--border-radius-8, .5rem);
    box-shadow: var(--box-shadow, 0 1px 4px rgba(0, 0, 0, 0.2));
    display: grid;
    gap: var(--spacing--small);
}

@media (min-width: 1024px) {
    section:not(.hero) {
        padding: calc(var(--spacing--large) * 2);
    }
}

.portfolio, .clients {
    background-color: var(--white);
    padding: var(--spacing--medium);
}

.container--grid {
    row-gap: var(--spacing--medium, 1.5rem);
}

@keyframes fade {
    to { scale: 1; opacity: 1; }
}

.animate-on-scroll {
    opacity: 0;
    filter: blur(0.45rem);
    transform: translateX(-100%);
    transition: all 1s;
}

.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        animation: none;
        transition: none;
    }
}

/* #portfolio, #about, #clients {
    scale: 0.5; 
    opacity: 0;
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range: entry;
    animation-duration: .3s;
} */
/*
 * 🎨 mnml.css 7.0.7
 *                  Support Matrix                  
 * | Browser               | Supported Versions    |
 * | --------------------- | --------------------- |
 * | Android Browser       | 123                   |
 * | Chrome                | 109; 121-123          |
 * | Chrome (Android)      | 123                   |
 * | Edge                  | 122-123               |
 * | Firefox               | 102; 123-124          |
 * | Firefox (Android)     | 124                   |
 * | KaiOS Browser         | 2.5; 3.0-3.1          |
 * | Opera                 | 107-109               |
 * | Opera Mobile          | 80                    |
 * | QQ Browser (Android)  | 14.9                  |
 * | Safari (iOS & iPadOS) | 15.6; 15.8; 16.6-17.4 |
 * | Safari (macOS)        | 17.3-17.4             |
 * | Samsung Internet      | 23-24                 |
 * | UC Browser (Android)  | 15.5                  |
 */

/*
 * Inspirations
 * https://www.sarasoueidan.com/blog/focus-indicators/
 * https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/
 */

 @layer mnml, mnml.reset, mnml.theme, mnml.baseline, mnml.layout, mnml.animation, mnml.forms, mnml.buttons, mnml.a11y, mnml.utils;@layer mnml{@layer reset{:where(:not(iframe,canvas,img,svg,video,dialog,[popover]):not(svg *):not(symbol *)){all:unset;appearance:revert;cursor:revert;display:revert;list-style-type:revert;outline:revert;resize:revert;vertical-align:revert}}@layer theme{:where(:root,:host){--mnml--theme--primary:#f04d00;--mnml--theme--primary--contrasting:white;--mnml--theme--primary--hover:#ff6b24;--mnml--theme--primary--hover--contrasting:white;--mnml--theme--secondary:#84003a;--mnml--theme--secondary--contrasting:white;--mnml--theme--secondary--hover:#b80051;--mnml--theme--secondary--hover--contrasting:white}@media (color-gamut:p3),(color-gamut:rec2020) @supports (color:color(display-p3 0 0 0)),where(:root,:host){--mnml--theme--primary:color(display-p3 0.90119 0.29731 0.02634);--mnml--theme--primary--hover:color(display-p3 0.90119 0.29731 0.02634);--mnml--theme--secondary:oklch(39.42% 0.178 5.16);--mnml--theme--secondary--hover:oklch(50.23% 0.201 6.5)}}@layer baseline{:where(:root,:host){--mnml--focus-ring--color:hsl(208.4deg 76.9% 47.5%);--mnml--focus-ring--width:0.125rem;--mnml--focus-ring--offset:0.125rem;--mnml--body--background-color--light:hsl(210deg 16.7% 97.6%);--mnml--body--background-color--dark:hsl(210deg 40% 2%);--mnml--body--font-family:var(--mnml--font--sans);--mnml--body--text-color--light:hsl(210deg 10.3% 22.7%);--mnml--body--text-color--dark:hsl(210deg 13.8% 88.6%);--mnml--headers--font-weight:bolder;--mnml--headers--font-family:var(--mnml--font--sans);--mnml--headers--text-color:inherit;--mnml--link--text-color--light:hsl(208deg 80% 52%);--mnml--link--text-color--dark:hsl(207deg 91% 64%);--mnml--link--text-color--visited--light:hsl(255deg 53% 50%);--mnml--link--text-color--visited--dark:hsl(256deg 100% 87%);--mnml--link--text-color--hover--light:hsl(208deg 80% 52%);--mnml--link--text-color--hover--dark:hsl(206deg 100% 82%);--mnml--link--text-decoration:underline;--mnml--link--text-decoration--hover:underline;--mnml--selection--background-color:hsl(47deg 100% 62%);--mnml--selection--text-color:hsl(210deg 11% 15%);--mnml--font--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif;--mnml--font--serif:ui-serif,Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif;--mnml--font--monospace:ui-monospace,Menlo,Consolas,Monaco;color-scheme:light dark}@supports (color:light-dark(black,white)){:where(:root,:host){--mnml--body--background-color:light-dark(var(--mnml--body--background-color--light),var(--mnml--body--background-color--dark));--mnml--body--text-color:light-dark(var(--mnml--body--text-color--light),var(--mnml--body--text-color--dark));--mnml--link--text-color:light-dark(var(--mnml--link--text-color--light),var(--mnml--link--text-color--dark));--mnml--link--text-color--hover:light-dark(var(--mnml--link--text-color--hover--light),var(--mnml--link--text-color--hover--dark));--mnml--link--text-color--visited:light-dark(var(--mnml--link--text-color--visited--light),var(--mnml--link--text-color--visited--dark))}}@supports not (color:light-dark(black,white)){:where(:root,:host){--mnml--body--background-color:var(--mnml--body--background-color--light);--mnml--body--text-color:var(--mnml--body--text-color--light);--mnml--link--text-color:var(--mnml--link--text-color--light);--mnml--link--text-color--hover:var(--mnml--link--text-color--hover--light    );--mnml--link--text-color--visited:var(--mnml--link--text-color--visited--light    )}}:where(:root,:host)[data-theme~=light]{color-scheme:light}:where(:root,:host)[data-theme~=dark]{color-scheme:dark}@media (prefers-color-scheme:dark){:where(:root,:host):not([data-theme~=light]){color-scheme:dark}@supports not (color:light-dark(black,white)){:where(:root,:host):not([data-theme~=light]){--mnml--body--background-color:var(--mnml--body--background-color--dark);--mnml--body--text-color:var(--mnml--body--text-color--dark);--mnml--link--text-color:var(--mnml--link--text-color--dark);--mnml--link--text-color--hover:var(--mnml--link--text-color--hover--dark      );--mnml--link--text-color--visited:var(--mnml--link--text-color--visited--dark      )}}}*,:after,:before{box-sizing:border-box}:where(:focus-visible){outline:var(--mnml--focus-ring--width) solid var(--mnml--focus-ring--color);outline-offset:var(--mnml--focus-ring--offset)}ol[class],ul[class]{list-style-type:""}::selection{background-color:var(--mnml--selection--background-color);color:var(--mnml--selection--text-color)}html{text-size-adjust:none;line-height:1.15}body{background-color:var(--mnml--body--background-color);color:var(--mnml--body--text-color);font-family:var(--mnml--body--font-family)}:where(a){text-decoration:var(--mnml--link--text-decoration);transition-duration:var(--mnml--animation-duration);transition-property:color;transition-timing-function:ease-out}:where(a):where(:link){color:var(--mnml--link--text-color)}:where(a):where(:visited){color:var(--mnml--link--text-color--visited)}:where(a):where(:focus-visible){color:var(--mnml--link--text-color--hover);text-decoration:var(--mnml--link--text-decoration--hover)}@media (pointer:fine) and (hover:hover){:where(a):where(:hover,:active){color:var(--mnml--link--text-color--hover);text-decoration:var(--mnml--link--text-decoration--hover)}}:where(a) *{color:inherit}:where(hr){border-top:1px solid;margin-block:1rem}h1,h2,h3,h4,h5,h6{color:var(--mnml--headers--text-color);font-family:var(--mnml--headers--font-family);font-weight:var(--mnml--headers--weight)}h1,h2,h3,h4,h5,h6,p{margin-block-end:var(--mnml--spacing);margin-block-start:0;margin-inline:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}h5{font-size:.8125rem}h6{font-size:.625rem}blockquote,h1,h2,h3,h4,h5,h6,li,p{line-height:calc(1em + .5rem);overflow-wrap:break-word}ol:not([class]),ul:not([class]){margin-block-end:var(--mnml--spacing);margin-inline-start:var(--mnml--list--margin-inline-start,1.25rem)}ol:not([class]) li+li,ul:not([class]) li+li{margin-block-start:var(--mnml--spacing)}ol[role=list],ul[role=list]{list-style-type:""}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}em,i{font-style:italic}u{text-decoration:underline}code,kbd,pre,samp{font-family:var(--mnml--font--monospace);font-size:1rem;white-space:revert}small{font-size:.8em}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}:where(button,input,optgroup,select,textarea){font-family:inherit;font-size:1em;line-height:1.15}:where(button){cursor:pointer}body{margin:0;min-block-size:100vh;min-block-size:100dvh}img{block-size:auto;border-style:none;max-inline-size:100%}table{border-collapse:collapse}textarea{white-space:revert}hr{block-size:0;box-sizing:content-box;overflow:visible}details{display:block;margin-inline-start:1rem}summary{display:list-item}[hidden],template{display:none}}@layer layout{:where(:root,:host){--mnml--spacing:1rem;--mnml--spacing--double:calc(var(--mnml--spacing)*2);--mnml--spacing--half:calc(var(--mnml--spacing)/2);--mnml--container--padding-inline:var(--mnml--spacing);--mnml--container--max-inline-size:75rem;--mnml--grid--column-gap:var(--mnml--spacing);--mnml--grid--row-gap:var(--mnml--spacing);--mnml--grid--column--min-inline-size:12.5rem;--mnml--grid--row--block-size:auto}.container{container-name:--mnml-container;container-type:inline-size;margin-inline:auto;max-inline-size:var(--mnml--container--max-inline-size);padding-inline:var(--mnml--container--padding-inline)}.container--grid{display:grid;grid-template-columns:1fr calc(min(var(--mnml--container--max-inline-size), 100%) - var(--mnml--container--padding-inline)*2) 1fr}.container--grid>*{grid-column:2}.container--grid .full-bleed{grid-column:1/-1}:where(.site-header,.site-main,.site-footer),body>:where(header,main,footer,section){padding-block:var(--mnml--spacing)}.site-header,body>header{align-items:center}.sticky:is(body>header,.site-header){inset-block-start:0;position:sticky;z-index:10}.site-footer,body>footer{text-align:center}.sticky:is(body>footer,.site-footer){inset-block-start:100%;position:sticky;z-index:10}.grid,.grid--vertical{column-gap:var(--mnml--grid--column-gap);display:grid;row-gap:var(--mnml--grid--row-gap)}.grid{grid-template-columns:repeat(auto-fit,minmax(var(--mnml--grid--column--min-inline-size),1fr))}.grid--vertical{grid-auto-flow:row;grid-auto-rows:var(--mnml--grid--row--block-size);grid-template-columns:unset}}@layer animation{:where(:root,:host){--mnml--animation-duration--allowed:200ms;--mnml--animation-duration--allowed--slow:400ms;--mnml--animation-duration--allowed--fast:100ms;--mnml--animation-duration--disallowed:0ms;--mnml--animation-duration:var(--mnml--animation-duration--disallowed);--mnml--animation-duration--slow:var(--mnml--animation-duration--disallowed);--mnml--animation-duration--fast:var(--mnml--animation-duration--disallowed);--mnml--timing-function--sudden-end:cubic-bezier(0.9,0.03,0.69,0.22);--mnml--timing-function--sudden-start:cubic-bezier(0.17,0.84,0.44,1);--mnml--timing-function--smooth:cubic-bezier(0.62,0.16,0.13,1.01);--mnml--timing-function--inertia:cubic-bezier(0.5,-0.53,0.14,1.23)}@media (prefers-reduced-motion:no-preference){:where(:root,:host){--mnml--animation-duration:var(--mnml--animation-duration--allowed);--mnml--animation-duration--slow:var(--mnml--animation-duration--allowed--slow    );--mnml--animation-duration--fast:var(--mnml--animation-duration--allowed--fast    )}}@media not (update:fast){:where(:root,:host){--mnml--animation-duration:var(--mnml--animation-duration--disallowed);--mnml--animation-duration--slow:var(--mnml--animation-duration--disallowed    );--mnml--animation-duration--fast:var(--mnml--animation-duration--disallowed    )}}}@layer forms{:where(:root,:host){--mnml--input--min-block-size:3.5rem;--mnml--input--background-color--light:hsl(0deg 0% 100%);--mnml--input--background-color--dark:hsl(210deg 8.8% 31.4%);--mnml--input--background-color--disabled--light:hsl(210deg 16% 93%);--mnml--input--background-color--disabled--dark:hsl(210deg 10.3% 22.7%);--mnml--input--background-color--focus--light:hsl(0deg 0% 100%);--mnml--input--background-color--focus--dark:hsl(210deg 14% 89%);--mnml--input--border-color--light:hsl(210deg 17% 95%);--mnml--input--border-color--dark:hsl(210deg 10.3% 22.7%);--mnml--input--border-color--disabled--light:hsl(210deg 16% 93%);--mnml--input--border-color--disabled--dark:hsl(210deg 10.3% 22.7%);--mnml--input--border-color--focus--light:hsl(210deg 14% 89%);--mnml--input--border-color--focus--dark:hsl(210deg 8.8% 31.4%);--mnml--input--border-style:solid;--mnml--input--border-width:1pt;--mnml--input--padding-block:1rem;--mnml--input--padding-inline:1rem;--mnml--input--border-radius:0.25rem;--mnml--input--text-color--light:hsl(0deg 0% 0%);--mnml--input--text-color--dark:hsl(0deg 0% 100%);--mnml--input--text-color--focus--light:hsl(0deg 0% 0%);--mnml--input--text-color--focus--dark:hsl(0deg 0% 10%);--mnml--input--text-color--disabled--light:hsl(0deg 0% 0%);--mnml--input--text-color--disabled--dark:hsl(210deg 14% 83.1%);--mnml--input--font-size:1rem;--mnml--input--file--button--background-color:var(--mnml--theme--primary);--mnml--input--file--button--text-color:var(--mnml--theme--primary--contrasting  );--mnml--input--file--button--background-color--hover:var(--mnml--theme--primary--hover  );--mnml--input--focus-ring--color:var(--mnml--focus-ring--color);--mnml--input--focus-ring--width:var(--mnml--focus-ring--width);--mnml--input--focus-ring--offset:var(--mnml--focus-ring--offset);--mnml--input--placeholder--text-color--light:hsl(210deg 7% 56%);--mnml--input--placeholder--text-color--dark:hsl(210deg 16.7% 95.3%);--mnml--input--placeholder--text-color:var(--mnml--input--placeholder--text-color--light  );--mnml--input--help-text--opacity:0.8;--mnml--input--required--text-color--light:hsl(0deg 65% 48%);--mnml--input--required--text-color--dark:hsl(0deg 100% 76.5%);--mnml--select--arrow--light:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="hsl(210deg 10.3% 22.7%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/%3e%3c/svg%3e');--mnml--select--arrow--dark:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="hsl(0deg 0% 100%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/%3e%3c/svg%3e');--mnml--select--arrow:var(--mnml--select--arrow--light)}@supports (color:light-dark(black,white)){:where(:root,:host){--mnml--input--background-color:light-dark(var(--mnml--input--background-color--light),var(--mnml--input--background-color--dark));--mnml--input--background-color--disabled:light-dark(var(--mnml--input--background-color--disabled--light),var(--mnml--input--background-color--disabled--dark));--mnml--input--background-color--focus:light-dark(var(--mnml--input--background-color--focus--light),var(--mnml--input--background-color--focus--dark));--mnml--input--border-color:light-dark(var(--mnml--input--border-color--light),var(--mnml--input--border-color--dark));--mnml--input--border-color--disabled:light-dark(var(--mnml--input--border-color--disabled--light),var(--mnml--input--border-color--disabled--dark));--mnml--input--border-color--focus:light-dark(var(--mnml--input--border-color--focus--light),var(--mnml--input--border-color--focus--dark));--mnml--input--text-color:light-dark(var(--mnml--input--text-color--light),var(--mnml--input--text-color--dark));--mnml--input--text-color--focus:light-dark(var(--mnml--input--text-color--focus--light),var(--mnml--input--text-color--focus--dark));--mnml--input--text-color--disabled:light-dark(var(--mnml--input--text-color--disabled--light),var(--mnml--input--text-color--disabled--dark));--mnml--input--placeholder--text-color:light-dark(var(--mnml--input--placeholder--text-color--light),var(--mnml--input--placeholder--text-color--dark));--mnml--input--required--text-color:light-dark(var(--mnml--input--required--text-color--light),var(--mnml--input--required--text-color--dark))}}@supports not (color:light-dark(black,white)){:where(:root,:host){--mnml--input--background-color:var(--mnml--input--background-color--light    );--mnml--input--background-color--disabled:var(--mnml--input--background-color--disabled--light    );--mnml--input--background-color--focus:var(--mnml--input--background-color--focus--light    );--mnml--input--border-color:var(--mnml--input--border-color--light);--mnml--input--border-color--disabled:var(--mnml--input--border-color--disabled--light    );--mnml--input--border-color--focus:var(--mnml--input--border-color--focus--light    );--mnml--input--text-color:var(--mnml--input--text-color--light);--mnml--input--text-color--focus:var(--mnml--input--text-color--focus--light    );--mnml--input--text-color--disabled:var(--mnml--input--text-color--disabled--light    );--mnml--input--placeholder--text-color:var(--mnml--input--placeholder--text-color--light    );--mnml--input--required--text-color:var(--mnml--input--required--text-color--light    );--mnml--select--arrow:var(--mnml--select--arrow--light)}@media (prefers-color-scheme:dark){:where(:root,:host):not([data-theme~=light]){--mnml--input--background-color:var(--mnml--input--background-color--dark      );--mnml--input--background-color--disabled:var(--mnml--input--background-color--disabled--dark      );--mnml--input--background-color--focus:var(--mnml--input--background-color--focus--dark      );--mnml--input--border-color:var(--mnml--input--border-color--dark);--mnml--input--border-color--disabled:var(--mnml--input--border-color--disabled--dark      );--mnml--input--border-color--focus:var(--mnml--input--border-color--focus--dark      );--mnml--input--text-color:var(--mnml--input--text-color--dark);--mnml--input--text-color--focus:var(--mnml--input--text-color--focus--dark      );--mnml--input--text-color--disabled:var(--mnml--input--text-color--disabled--dark      );--mnml--input--placeholder--text-color:var(--mnml--input--placeholder--text-color--dark      );--mnml--input--required--text-color:var(--mnml--input--required--text-color--dark      )}}}@media (prefers-color-scheme:dark){:where(:root,:host):not([data-theme~=light]){--mnml--select--arrow:var(--mnml--select--arrow--dark)}}form{fieldset{legend{font-weight:bolder;margin-block-end:var(--mnml--spacing)}}fieldset+fieldset{margin-block-start:calc(var(--mnml--spacing)*2)}label{display:block;margin-block-end:.25rem}label.toggle-label{display:grid;gap:calc(var(--mnml--spacing)*.75);grid-template-columns:1em auto}}form .help{display:block;font-style:italic;margin-block-start:.25rem;opacity:var(--mnml--input--help-text--opacity)}form{abbr[title~=required i]{color:var(--required-color);text-decoration:none}}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select){appearance:auto;background-clip:padding-box;background-color:var(--mnml--input--background-color);border:var(--mnml--input--border-width) var(--mnml--input--border-style) var(--mnml--input--border-color);border-radius:var(--mnml--input--border-radius);color:var(--mnml--input--text-color);display:block;font-size:var(--mnml--input--font-size);inline-size:100%;min-block-size:var(--mnml--input--min-block-size);padding-block:var(--mnml--input--padding-block);padding-inline:var(--mnml--input--padding-inline);transition-duration:var(--mnml--animation-duration);transition-property:box-shadow,background-color,border-color;transition-timing-function:var(--mnml--timing-function--smooth)}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where(:focus-visible){background-color:var(--mnml--input--background-color--focus);border-color:var(--mnml--input--border-color--focus);color:var(--mnml--input--text-color--focus);outline-color:var(--mnml--input--focus-ring--color);outline-offset:var(--mnml--input--focus-ring--offset);outline-width:var(--mnml--input--focus-ring--width)}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where([disabled],[readonly]){background-color:var(--mnml--input--background-color--disabled);border-color:var(--mnml--input--border-color--disabled);color:var(--mnml--input--text-color--disabled);opacity:.8}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where([disabled]){cursor:not-allowed}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select)::placeholder{color:var(--mnml--input--placeholder--text-color)}form :where(input[type=radio],input[type=checkbox]){accent-color:var(--mnml--theme--primary,currentColor);appearance:auto}form{input[type=number].no-arrows{-moz-appearance:textfield}input.no-arrows[type=number]::-webkit-inner-spin-button,input.no-arrows[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=file]{overflow:hidden}input[type=file]::-webkit-file-upload-button,input[type=file]::file-selector-button{align-items:center;background-color:var(--mnml--input--file--button--background-color);border:2px solid transparent;color:var(--mnml--input--file--button--text-color);display:inline-flex;filter:brightness(1);font-weight:400;justify-content:center;margin-block:-1rem;margin-inline-end:var(--mnml--spacing);margin-inline-start:-1rem;min-block-size:100%;padding:1rem;text-align:center;transition-duration:var(--mnml--animation-duration);transition-property:background-color}input[type=file]:not(:disabled):not([readonly])::-webkit-file-upload-button,input[type=file]:not(:disabled):not([readonly])::file-selector-button{cursor:pointer}input[type=file]:where(:hover,:focus-visible)::-webkit-file-upload-button,input[type=file]:where(:hover,:focus-visible)::file-selector-button{background-color:var(--mnml--input--file--button--background-color--hover        );color:var(--mnml--input--file--button--text-color--hover)}select{word-wrap:normal;-webkit-appearance:none;appearance:none;padding-block:var(--mnml--input--padding-block);padding-inline:var(--mnml--input--padding-inline)}select:where(:not([multiple])){background-image:var(--mnml--select--arrow);background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px;padding-inline-end:calc(1.75rem + var(--mnml--input--padding-inline))}select:where([multiple]){overflow-x:hidden;overflow-y:scroll;option{align-items:center;display:flex;margin:.25rem -.5rem;min-block-size:1.5em;padding:0 .5rem}}}:where(:root,:host)[dir=rtl]{form{select{background-position:left .75rem center}}}}@layer buttons{:where(:root,:host){--mnml--button--background-color:hsl(0deg 0% 67%);--mnml--button--background-color--hover:hsl(0deg 0% 75%);--mnml--button--text-color:hsl(0deg 0% 0%);--mnml--button--text-color--hover:hsl(0deg 0% 0%);--mnml--button--border-color:transparent;--mnml--button--border-color--hover:transparent;--mnml--button--border-width:1pt;--mnml--button--border-style:solid;--mnml--button--border-radius:0.25rem;--mnml--button--font-family:var(--mnml--font--sans);--mnml--button--font-size:1rem;--mnml--button--font-weight:700;--mnml--button--line-height:1.4;--mnml--button--text-transform:none;--mnml--button--padding-block:0.5rem;--mnml--button--padding-inline:1rem;--mnml--button--min-block-size:3.5rem;--mnml--button--display:inline-flex;--mnml--button--column-gap:0;--mnml--button--row-gap:0;--mnml--button--disabled--background-color:hsl(0deg 0% 80%);--mnml--button--disabled--text-color:hsl(0deg 0% 50%);--mnml--button--disabled--border-color:transparent}:where(button,.button){--button--base:var(--mnml--button--background-color);--button--base--hover:var(--mnml--button--background-color--hover);--button--text-color:var(--mnml--button--text-color);--button--text-color--hover:var(--mnml--button--text-color--hover);--button--border-width:var(--mnml--button--border-width);--button--border-style:var(--mnml--button--border-style);--button--border-radius:var(--mnml--button--border-radius);--button--display:var(--mnml--button--display);--button--font-family:var(--mnml--button--font-family);--button--font-size:var(--mnml--button--font-size);--button--font-weight:var(--mnml--button--font-weight);--button--text-transform:var(--mnml--button--text-transform);--button--column-gap:var(--mnml--button--column-gap);--button--row-gap:var(--mnml--button--row-gap);--button--min-block-size:var(--mnml--button--min-block-size);--button--line-height:var(--mnml--button--line-height);--button--padding-block:var(--mnml--button--padding-block);--button--padding-inline:var(--mnml--button--padding-inline);align-items:center;background-color:var(--button--base);border:var(--button--border-width) var(--button--border-style) var(--button--base);border-radius:var(--button--border-radius);color:var(--button--text-color);column-gap:var(--button--column-gap);display:var(--button--display);font-family:var(--button--font-family);font-size:var(--button--font-size,1rem);font-weight:var(--button--font-weight,bold);justify-content:center;line-height:var(--button--line-height);min-block-size:var(--button--min-block-size);padding-block:var(--button--padding-block);padding-inline:var(--button--padding-inline);row-gap:var(--button--row-gap);text-align:center;text-decoration:none;text-transform:var(--button--text-transform);transition-duration:var(--mnml--animation-duration);transition-property:color,background-color,border-color}:where(button,.button):where(:focus-visible){background-color:var(--button--base--hover);border-color:var(--button--base--hover);color:var(--button--text-color--hover)}@media (pointer:fine) and (hover:hover){:where(button,.button):where(:hover,:active){background-color:var(--button--base--hover);border-color:var(--button--base--hover);color:var(--button--text-color--hover)}}:where(button,.button):where(:link){color:var(--button--text-color)}:where(button,.button):where(.primary,[data-color=primary]){--button--base:var(--mnml--theme--primary);--button--base--hover:var(--mnml--theme--primary--hover);--button--text-color:var(--mnml--theme--primary--contrasting);--button--text-color--hover:var(--mnml--theme--primary--hover--contrasting    )}:where(button,.button):where(.secondary,[data-color=secondary]){--button--base:var(--mnml--theme--secondary);--button--base--hover:var(--mnml--theme--secondary--hover);--button--text-color:var(--mnml--theme--secondary--contrasting);--button--text-color--hover:var(--mnml--theme--secondary--hover--contrasting    )}:where(button,.button):where(.white,[data-color=white]){--button--base:hsl(0deg 0% 100%);--button--base--hover:hsl(0deg 0% 90.2%);--button--text-color:hsl(210deg 10.3% 22.7%);--button--text-color--hover:hsl(210deg 10.3% 22.7%)}:where(button,.button):where(.black,[data-color=black]){--button--base:hsl(0deg 0% 0%);--button--base--hover:hsl(210deg 10.3% 22.7%);--button--text-color:hsl(0deg 0% 100%);--button--text-color--hover:hsl(0deg 0% 100%)}:where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]){--_hover-mixin-color:white;--button--base:var(--mnml--body--background-color--dark);--button--base--hover:color-mix(in oklab,var(--button--base),var(--_hover-mixin-color) 10%);--button--text-color:var(--mnml--body--text-color--dark);--button--text-color--hover:var(--mnml--body--text-color--dark)}@supports (color:light-dark(black,white)){:where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]){--_hover-mixin-color:light-dark(white,black);--button--base:light-dark(var(--mnml--body--background-color--dark),var(--mnml--body--background-color--light));--button--text-color:light-dark(var(--mnml--body--text-color--dark),var(--mnml--body--text-color--light));--button--text-color--hover:light-dark(var(--mnml--body--text-color--dark),var(--mnml--body--text-color--light))}}:where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]):where(.no-bg,[data-variant~=no-bg]){--button--text-color:var(--button--base);--button--text-color--hover:var(--button--base--hover)}@media (prefers-color-scheme:dark){@supports not (color:light-dark(black,white)){:where(:root,:host):not([data-theme~=light]) :where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]){--_hover-mixin-color:black;--button--base:var(--mnml--body--background-color--light)}:where(:root,:host):not([data-theme~=light]) :where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]):not(:where(.outline,[data-variant~=outline])){--button--text-color:var(--mnml--body--text-color--light);--button--text-color--hover:var(--mnml--body--text-color--light)}:where(:root,:host):not([data-theme~=light]) :where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]):where(.outline,[data-variant~=outline]):where(:focus-visible,:hover,:active){--button--text-color:var(--mnml--body--text-color--light);--button--text-color--hover:var(--mnml--body--text-color--light)}@media (pointer:fine) and (hover:hover){:where(:root,:host):not([data-theme~=light]) :where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]):where(.outline,[data-variant~=outline]):where(:hover,:active){--button-color:var(--button--base--hover)}}:where(:root,:host):not([data-theme~=light]) :where(button,.button):where(.theme-contrasting,[data-color=theme-contrasting]):where(.no-bg,[data-variant~=no-bg]){--button--text-color:var(--button--base);--button--text-color--hover:var(--button--base--hover)}}}:where(button,.button):where(.outline,[data-variant~=outline]):where(:not(:hover,:active,:focus-visible)){background-color:transparent;border-color:var(--button--base);color:var(--button--base)}:where(button,.button):where(.no-bg,[data-variant~=no-bg]){--button--text-color:var(--button--base);--button--text-color--hover:var(--button--base--hover);background-color:transparent;border-color:transparent}:where(button,.button):where(.inline,[data-variant~=inline]){background-color:transparent;border-radius:0;border-width:0;color:var(--mnml--link--text-color);display:inline;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;min-block-size:0;padding:0;text-align:inherit;vertical-align:baseline}:where(button,.button):where(.inline,[data-variant~=inline]):where(:focus-visible){color:var(--mnml--link--text-color--hover)}@media (pointer:fine) and (hover:hover){:where(button,.button):where(.inline,[data-variant~=inline]):where(:hover,:active){color:var(--mnml--link--text-color--hover)}}:where(button,.button):where(.rounded,[data-variant~=rounded]){--button--border-radius:5rem}:where(button,.button):is(:disabled,[disabled]){--button--base:var(--mnml--button--disabled--background-color);--button--text-color:var(--mnml--button--disabled--text-color);--button--border-color:var(--mnml--button--disabled--border-color);cursor:not-allowed;pointer-events:none}:where(button,.button):is(:disabled,[disabled]):where(.outline,[data-variant~=outline]){background-color:color-mix(in oklch,var(--button--base),transparent 90%);color:var(--mnml--button--disabled--text-color)}:where(button,.button){svg{block-size:1em;inline-size:1em}}form :where(button,.button){min-block-size:var(--mnml--input--min-block-size)}}@layer a11y{:where(:root,:host){--mnml--skip-link--background-color:hsl(47deg 100% 62%);--mnml--skip-link--text-color:hsl(210deg 11% 15%)}:where(.reader-only,.skip-link):not(:focus-visible):not(:active){word-wrap:normal!important;block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap}.skip-link{position:absolute;z-index:1}.skip-link:focus-visible{--mnml--link--text-color--hover:var(--mnml--skip-link--text-color);--mnml--focus-ring--color:transparent;--mnml--focus-ring--offset:0;background-color:var(--mnml--skip-link--background-color);inset-block-start:.25rem;inset-inline-start:.25rem;padding:1rem;z-index:100000}}}