@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap");
:root {
  --background: #ffffff;
  --background-alt: #f2f2f2;
  --link-hover: #f6f6f6;
  --foreground: #242424;
  --button-active: #121212;
  --border-line: #12121230;
}

html {
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: "DM Sans", sans-serif;
}
*:focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--foreground);
  transition: box-shadow 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::after,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}
button {
  all: unset;
  border-radius: 20pt;
  margin: 1rem 0;
  padding: 0.8rem 1.6rem;
  background-color: var(--foreground);
  color: var(--background);
  cursor: pointer;
  @media only screen and (max-width: 612px) {
    font-size: 1rem;
  }
  &:active {
    background-color: var(--button-active);
  }
}
body {
  background-color: var(--background);
  color: var(--foreground);
  opacity: 0;
  transition:
    color 200ms ease-in-out,
    background-color 200ms ease-in-out,
    opacity 400ms ease,
    background 400ms ease;
  &.loaded {
    opacity: 1;
  }
}
h1,
h2 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
}
.hero-section {
  margin: 2rem;
  margin-top: 4rem;
  text-align: center;
  h1 {
    margin-bottom: 1rem;
    font-size: 3rem;
    @media only screen and (max-width: 612px) {
      font-size: 2.4rem;
      line-height: 100%;
    }
  }
  p {
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    @media only screen and (max-width: 612px) {
      font-size: 12pt;
      width: 95%;
      margin: 2rem auto;
    }
  }
}
@media only screen and (max-width: 612px) {
  .mx-screen {
    display: none;
  }
}
.moving-section {
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  opacity: 0.8;

  .marquee {
    display: flex;
    animation: scroll 40s linear infinite;
    @media only screen and (min-width: 612px) {
      animation-duration: 160s;
    }
  }

  .marquee p {
    margin: 0;
    padding-right: 0.5rem;
    flex-shrink: 0;
    word-spacing: 0.2rem;
    font-family: "DM Mono", monospace;

    .dots {
      margin: 0 1rem;
      @media only screen and (max-width: 612px) {
        margin: 0 0.5rem;
      }
    }
    @media only screen and (max-width: 612px) {
      font-size: 0.9rem;
    }
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.btnwicon {
  all: unset;
  display: inline-block;
  border-radius: 20pt;
  margin: 1rem 0;
  padding: 0.8rem 1.6rem;
  background-color: var(--foreground);
  color: var(--background);
  cursor: pointer;
  @media only screen and (max-width: 612px) {
    font-size: 1rem;
  }
  &:active {
    background-color: var(--button-active);
  }
  position: relative;
  transition:
    padding 200ms ease-in-out,
    box-shadow 200ms ease-out;

  .iconb {
    position: absolute;
    right: 1.2rem;
    transform: translateX(-4px);
    opacity: 0;
    transition:
      opacity 100ms ease-in-out,
      transform 300ms ease-in-out;
  }
  &:hover,
  &:focus {
    padding-right: 3rem;
    .iconb {
      opacity: 1;
      transform: translateX(0);
      transition:
        opacity 200ms ease-in-out,
        transform 300ms ease-in-out,
        box-shadow 200ms ease-out;
    }
  }
  &:focus {
    outline: none;
    box-shadow:
      0 0 0 2px var(--background),
      0 0 0 4px var(--foreground);
  }
}

.post-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, 350px);
  @media only screen and (min-width: 1200px) {
    grid-template-columns: repeat(3, 350px);
  }
  gap: 2rem;
  justify-content: center;
  padding: 2rem 4rem;
  margin: 2rem auto;
  .post {
    all: unset;
    position: relative;
    background-color: var(--background-alt);
    width: 350px;
    height: 350px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 1.2rem;
    cursor: pointer;
    &:focus {
      box-shadow:
        0 0 0 2px var(--background),
        0 0 0 4px var(--foreground);
      transition: box-shadow 200ms ease-out;
    }
    h2 {
      font-family: "DM Sans", sans-serif;
      font-weight: bold;
      font-size: 2rem;
    }
    .num {
      position: absolute;
      bottom: 0;
      left: 0;
      font-family: "DM Serif Display", serif;
      font-size: 2rem;
      transform: scale(16) translate(40%, -48%);
      line-height: 70%;
      opacity: 0.05;

      user-select: none;
      pointer-events: none;
    }
  }
}
a {
  all: unset;
  cursor: pointer;
  text-decoration: underline;
  outline: none;
}
.tooltip {
  background-color: var(--background-alt);
  padding: 0.4rem 0.8rem;
  z-index: 10;
  border-radius: 6pt;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  .links {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    a {
      text-decoration: none;
      position: relative;
      width: 42px;
      height: 42px;
      border-radius: 100px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
      }
      .tooltip {
        position: absolute;
        opacity: 0;
        top: -20%;
        left: 50%;
        transform: translate(-50%, -100%);
        font-size: 0.8rem;
        transition: none;
        pointer-events: none;
        user-select: none;
      }
      &:hover,
      &:focus {
        background-color: var(--link-hover);

        .tooltip {
          opacity: 1;
          transition: opacity 200ms ease-out;
        }
      }
    }
  }
}

.desdev {
  font-weight: 500;
  font-size: 0.8rem;
}

.not-found {
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  p {
    font-weight: 800;
    font-size: 1.5rem;
  }
}

.case_study {
  --base: #d2d2d2;
  --lighter-base: color-mix(in oklch, var(--base) 30%, white);
  --darker-base: color-mix(in oklch, var(--base) 80%, black);
  --primary-accent: #606060;
  --lighter-primary-accent: color-mix(
    in oklch,
    var(--primary-accent) 30%,
    white
  );
  --darker-primary-accent: color-mix(
    in oklch,
    var(--primary-accent) 80%,
    black
  );
  --line-base: color-mix(in oklch, var(--darker-base) 30%, transparent);
  --border-rounded-hero: 2rem;
  max-width: 2560px;
  margin: 0 auto;
  .hero {
    min-height: 450px;
    max-height: 600px;
    height: 75vh;
    @media only screen and (max-width: 612px) {
      height: auto;
    }
    overflow: hidden;
    margin: 2rem 4rem;
    &.lighterbg {
      background-color: var(--lighter-base);
    }
    &.normalbg {
      background-color: var(--base);
    }
    border-radius: 2rem;
    &.together {
      display: grid;
      grid-template-columns: 500px 1fr;
    }
    &.seperate {
      display: grid;
      grid-template-columns: 500px 1fr;
      gap: 0.5rem;
      div {
        background-color: var(--base);
        position: relative;
      }
      @media only screen and (max-width: 612px) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      div:nth-child(1) {
        padding: 4rem;
        height: 100%;
        border-radius: var(--border-rounded-hero);
        @media only screen and (max-width: 612px) {
          padding: 2rem;
        }
        .timebadge {
          margin: 4rem;
          @media only screen and (max-width: 612px) {
            margin: 0;
            margin-top: 2rem;
          }
        }
      }
      .hero-extra {
        border-radius: var(--border-rounded-hero);
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }
    @media only screen and (max-width: 612px) {
      margin: 2rem;
      &.together {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    &.together {
      div:nth-child(1) {
        margin: 4rem;
        @media only screen and (max-width: 612px) {
          margin: 2rem;
        }
      }
    }
    div:nth-child(1) {
      position: relative;
      h1 {
        font-family: "DM Sans", sans-serif;
        font-weight: 800;
        font-size: 2.5rem;
        color: var(--primary-accent);
      }
      .subtitle {
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        opacity: 0.8;
        margin-bottom: 2rem;
        font-size: 1.2rem;
        color: var(--darker-primary-accent);
      }
      p {
        font-size: 1.2rem;
        @media only screen and (max-width: 612px) {
          font-size: 1rem;
        }
      }
      .timebadge {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: fit-content;
        padding: 0.8rem 1.2rem;
        position: absolute;
        @media only screen and (max-width: 612px) {
          position: static;
          margin-top: 2rem;
          padding: 0.6rem 1rem;
        }
        bottom: 0;
        left: 0;
        background: color-mix(
          in oklab,
          var(--darker-primary-accent) 20%,
          var(--lighter-base)
        );
        opacity: 0.8;
        color: color-mix(in oklab, var(--darker-primary-accent) 40%, black);
        border-radius: 5rem;
        gap: 0.5rem;
        span {
          font-size: 1.4rem;
          @media only screen and (max-width: 612px) {
            font-size: 1.2rem;
          }
        }
        time {
          font-weight: 600;
          @media only screen and (max-width: 480px) {
            font-size: 0.8rem;
          }
        }
      }
    }
    div:nth-child(2) {
      display: flex;
      gap: 0.2rem;
      align-items: flex-end;
      justify-content: end;
      .screenshots {
        width: 256px;
        background-color: #00000016;
        margin: 0;
        border-radius: 2rem 2rem 0 0;
        display: flex;
        align-items: end;
        overflow: hidden;
        @media only screen and (max-width: 480px) {
          border-radius: 1rem 1rem 0 0;
        }
        img {
          width: 100%;
        }
        &:not(:has(*)) {
          height: 80%;
        }
      }
    }
  }

  .intro {
    width: 640px;
    margin: 6rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1.2rem;
    @media only screen and (max-width: 764px) {
      width: 100%;
      padding: 0 2rem;
    }
    h2 {
      font-size: 2.2rem;
      line-height: 2.5rem;
      @media only screen and (max-width: 764px) {
        font-size: 2rem;
        line-height: 2.25rem;
      }
      @media only screen and (max-width: 480px) {
        text-align: left;
      }
    }
    h3 {
      font-weight: 400;
      margin-bottom: 2rem;
      @media only screen and (max-width: 480px) {
        font-size: 1.2rem;
        text-align: left;
      }
    }
    .seperator {
      width: 180px;
      margin-top: 2rem;
    }
  }
  .two-section {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: start;
    padding-right: 8rem;
    padding-left: 4rem;
    @media only screen and (max-width: 1400px) {
      padding: 0 4rem;
    }
    @media only screen and (max-width: 1060px) {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
    }
    @media only screen and (max-width: 764px) {
      width: 100%;
      padding: 0 2rem;
    }
    p,
    h4 {
      margin-left: 2rem;
    }
    h4 {
      margin-bottom: 2rem;
    }
    aside {
      position: sticky;
      top: 2rem;
      align-self: start;
      height: fit-content;
      padding: 1rem;
      @media only screen and (max-width: 1060px) {
        position: fixed;
        top: 1rem;
        right: 0;
        transform: translateX(-50%);
        background-color: var(--background);
        border: 1px solid var(--border-line);
        border-radius: 2rem 0 0 2rem;
        transform: translateX(95%);
        transition: transform 800ms ease;
        &:hover {
          transform: translateX(0);
        }
      }
      #auto-toc {
        @media only screen and (max-width: 1060px) {
          p:nth-child(1),
          h4 {
            display: none;
          }
        }
      }
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
          margin-left: 1rem;
        }
        @media only screen and (max-width: 1060px) {
        }
      }
      li {
        margin-top: 0.5rem;
        a {
          color: var(--foreground);
          text-decoration: none;
          display: block;
          padding: 0.3rem 1rem;
          border-radius: 5rem;
          transition:
            box-shadow 400ms ease-in-out,
            font-weight 200ms ease-in-out;
          width: fit-content;
          user-select: none;
          &:hover,
          &:focus {
            box-shadow: none;
            outline: none;
            font-weight: 600;
          }
          &.active {
            box-shadow: 0 0 0 2px var(--foreground);
            font-weight: 600;
          }
        }
      }
    }

    main {
      padding: 0 4rem;
      @media only screen and (max-width: 1400px) {
        padding: 0;
        padding-right: 2rem;
      }
      @media only screen and (max-width: 1060px) {
        padding-right: 0;
      }
      h3 {
        font-weight: 600;
      }

      section:first-child {
        margin-top: 0;
        padding-top: 0;
      }

      section {
        section {
          margin-left: 2rem;
          @media only screen and (max-width: 1060px) {
            margin-left: 0;
          }
          h3 {
            font-size: 1.5rem;
          }
          p {
            all: unset;
          }
        }
        h2,
        h3,
        h4,
        h5 {
          padding-top: 2rem;
        }
        h2 {
          font-size: 2rem;
          font-family: "DM Sans", sans;
          font-weight: 700;
          margin-bottom: 1rem;
        }
        p {
          margin: 0;
          font-size: 1.4rem;
          width: 80%;
          @media only screen and (max-width: 1600px) {
            width: 100%;
          }
          @media only screen and (max-width: 612px) {
            font-size: 1rem;
          }
        }
        img.transparent {
          background-color: var(--lighter-base);
          border-radius: 2rem;
          padding: 4rem;
        }
      }

      .upp {
        width: 90%;
        @media only screen and (max-width: 1600px) {
          width: 100%;
        }
        .box {
          h6 {
            font-size: 1.8rem;
            font-weight: 600;
            width: 80%;
            @media only screen and (max-width: 1400px) {
              font-size: 1.2rem;
            }
          }
        }
      }

      #user-persona {
        h3 {
          margin-bottom: 1.4rem;
        }
        .pj {
          margin-top: 2rem;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
          gap: 2rem;
          width: 100%;
          @media only screen and (max-width: 764px) {
            flex-direction: column;
          }
          @media only screen and (max-width: 612px) {
            align-items: center;
          }
          .persona-container {
            display: flex;
            flex-direction: column;
            flex: 1;
            .persona {
              display: flex;
              margin-bottom: 1rem;
              gap: 0.8rem;
              img {
                width: 72px;
                object-fit: contain;
              }
              figcaption {
                width: 75%;
                h6 {
                  font-size: 1rem;
                }
                p {
                  font-size: 0.9rem;
                }
              }
            }
            .pkf {
              &.lighter .card {
                background-color: var(--lighter-base);
              }
              .card {
                background-color: var(--base);
                overflow: hidden;
                margin-bottom: 0.2rem;
                border-radius: 0.8rem;
                padding: 1.5rem;
                position: relative;
                .title {
                  font-weight: 600;
                  font-size: 1.05rem;
                }
                .details {
                  display: block;
                  margin-top: 0.5rem;
                  font-size: 0.9rem;
                  width: 85%;
                  line-height: 1.5rem;
                  opacity: 0.9;
                }
                [class^="icon-"] {
                  position: absolute;
                  right: 0;
                  top: 0;
                  margin: 0.5rem;
                  padding: 0.5rem;
                  font-size: 1.2rem;
                  &::before {
                    z-index: 1;
                    background: url('data:image/svg+xml;utf8,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.2246 0.771822C29.7032 -2.47624 37.2936 5.1142 34.0456 12.5928L33.5085 13.8293C32.5169 16.1125 32.5169 18.7049 33.5085 20.9881L34.0456 22.2246C37.2936 29.7032 29.7032 37.2936 22.2246 34.0456L20.9881 33.5085C18.7048 32.5169 16.1125 32.5169 13.8293 33.5085L12.5928 34.0456C5.11419 37.2936 -2.47623 29.7032 0.771824 22.2246L1.30885 20.9881C2.3005 18.7048 2.3005 16.1125 1.30885 13.8293L0.771822 12.5928C-2.47624 5.11419 5.1142 -2.47623 12.5928 0.771824L13.8293 1.30885C16.1125 2.3005 18.7049 2.3005 20.9881 1.30885L22.2246 0.771822Z" fill="white"/></svg>')
                      no-repeat center;
                    background-size: contain;
                    background: url('data:image/svg+xml;utf8,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.2246 0.771822C29.7032 -2.47624 37.2936 5.1142 34.0456 12.5928L33.5085 13.8293C32.5169 16.1125 32.5169 18.7049 33.5085 20.9881L34.0456 22.2246C37.2936 29.7032 29.7032 37.2936 22.2246 34.0456L20.9881 33.5085C18.7048 32.5169 16.1125 32.5169 13.8293 33.5085L12.5928 34.0456C5.11419 37.2936 -2.47623 29.7032 0.771824 22.2246L1.30885 20.9881C2.3005 18.7048 2.3005 16.1125 1.30885 13.8293L0.771822 12.5928C-2.47624 5.11419 5.1142 -2.47623 12.5928 0.771824L13.8293 1.30885C16.1125 2.3005 18.7049 2.3005 20.9881 1.30885L22.2246 0.771822Z" fill="white"/></svg>')
                      no-repeat center;
                    background-size: contain;
                    padding: 0.6rem;
                  }
                }
                ul {
                  padding-left: 1rem;
                  li {
                    margin-left: 1rem;
                    &::marker {
                      font-size: 0.8rem;
                    }
                    /*&::before {
                      content: "•";
                      font-size: 0.9rem;
                      margin-right: 0.6rem;
                      vertical-align: middle;
                    }*/
                  }
                }
              }
            }
          }
          .journey-map {
            border: 1px solid var(--line-base);
            border-radius: 2rem;
            overflow: hidden;
            width: 100%;
            flex: 1;
            @media only screen and (max-width: 1600px) {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
            }
            @media only screen and (max-width: 612px) {
              width: 100%;
            }
            table {
              border-collapse: collapse;
              width: 100%;
              th,
              td {
                padding: 1rem;
                font-size: 0.8rem;
                @media only screen and (max-width: 480px) {
                  padding: 0.8rem;
                  font-size: 0.8rem;
                  overflow-wrap: anywhere;
                  word-break: break-word;
                }
                border: 0;
                border-bottom: 1px solid var(--line-base);
              }
              tbody tr:last-child {
                td {
                  border: none;
                }
              }
              thead {
                background-color: var(--base);
                &.lighter {
                  background-color: var(--lighter-base);
                }
                .table-title th {
                  text-align: left;
                  padding: 1.2rem 1.4rem;
                }
                tr:nth-child(2) th {
                  font-weight: 600;
                  text-align: left;
                  color: color-mix(in oklab, var(--darker-base) 50%, black);
                }
              }
            }
          }
        }
      }

      #sitemap {
        img {
          width: 90%;
          object-fit: contain;
          transform: translateY(-20px);
          @media only screen and (max-width: 612px) {
            width: 100%;
            transform: none;
          }
        }
      }
      .content-section {
        h3 {
          margin-bottom: 2rem;
        }
        img {
          overflow: hidden;
          width: 100%;
          object-fit: contain;
          object-position: left;
          display: block;
          border-radius: 2rem;
        }
      }
      #wireframe {
        img {
          border-radius: 1.2rem;
          overflow: hidden;
          width: 60%;
          object-fit: contain;
          @media only screen and (max-width: 612px) {
            width: 100%;
          }
        }
      }

      .content80 {
        width: 80%;
        @media only screen and (max-width: 1600px) {
          width: 100%;
        }
        h3 {
          margin-bottom: 1.4rem;
        }
        p {
          font-size: 1.2rem;
          @media only screen and (max-width: 612px) {
            font-size: 1rem;
          }
        }
        a:focus {
          border-radius: 2rem;
        }
      }

      #goals {
        margin-top: 4rem;
      }

      #implementation {
        margin-top: 4rem;
      }

      .finallink {
        margin: 2rem 0;
        margin-bottom: 4rem;
        .labelforrevised {
          display: block;
          font-size: 1.4rem;
          font-weight: 400;
          margin-bottom: 0.4rem;
        }
        a {
          display: block;
          width: fit-content;
          border-radius: 2rem;
        }
      }

      .problems {
        @media only screen and (max-width: 764px) {
          width: 90%;
          margin: 0 auto;
        }
        img.transparent {
          width: 100%;
          height: 400px;
          background-color: var(--lighter-base);
          object-fit: contain;
          padding: 2rem;
          border-radius: 2rem;
          object-position: center;
        }
      }
      .two-column {
        p {
          width: 80%;
          line-height: 1.6;
          font-size: 1.2rem;
          @media only screen and (max-width: 764px) {
            width: 100%;
          }
          margin: 2rem 0;
        }
        img {
          margin: 0;
          @media only screen and (max-width: 764px) {
            width: 100%;
          }
        }
      }
      #mockups {
        .mocks,
        .mock-img {
          display: grid;
          margin-top: 2rem;
          gap: 1rem;
          @media only screen and (min-width: 612px) {
            width: 80%;
          }
        }
        .mock-img {
          grid-template-columns: 400px 1fr;
          height: 400px;
          @media only screen and (max-width: 1600px) {
            width: 100%;
            grid-template-columns: 1fr 1fr;
          }
          @media only screen and (max-width: 612px) {
            display: flex;
            flex-direction: column;
            height: auto;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 2rem;
            overflow: hidden;
          }
        }
        .linkforvisit {
          font-size: 1rem;
          display: block;
          margin: 2rem 0;
          a {
            border-radius: 2rem;
          }
        }
      }
      #code {
        margin-top: 4rem;
        p {
          width: 60%;
          font-size: 1.2rem;
          line-height: 1.6;
          @media only screen and (max-width: 1600px) {
            width: 100%;
          }
          @media only screen and (max-width: 612px) {
            font-size: 1rem;
          }
          a {
            display: block;
            width: fit-content;
            border-radius: 2rem;
          }
        }
      }
      #conclusions {
        margin-top: 4rem;
        margin-bottom: 10rem;
        p {
          line-height: 1.4;
          width: 60%;
          @media only screen and (max-width: 1600px) {
            width: 100%;
          }
        }
      }
      #accessibility {
        .ab {
          gap: 2rem;
          margin-top: 5rem !important;
          figure {
            background-color: #fefefe;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.8rem;
            border-radius: 1.2rem;
            border: 1px solid #00000015;
            position: relative;
            padding-top: 3.2rem;
            padding-bottom: 0;
            p {
              background-color: var(--base);
              width: 64px;
              height: 64px;
              display: grid;
              place-content: center;
              border-radius: 2rem;
              position: absolute;
              top: -7%;
              left: 50%;
              font-size: 1.8rem;
              transform: translateX(-50%);
            }
            figcaption,
            p {
              color: #161616;
            }
            figcaption {
              font-weight: 600;
              text-align: center;
              font-size: 1.2rem;
              @media only screen and (max-width: 612px) {
                font-size: 1rem;
              }
            }
            img,
            video {
              width: 100%;
              border-radius: 1rem;
              overflow: hidden;
              filter: none;
            }
          }
        }
      }
    }
  }
  .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.2rem;
    margin: 2rem 0;
    @media only screen and (max-width: 764px) {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .box {
      border-radius: 2rem;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      p {
        font-size: 1rem;
      }

      h6 {
        all: unset;
        font-size: 1.4rem;
        font-weight: 600;
      }

      &:nth-child(1) {
        background: var(--base);
      }

      &:nth-child(2) {
        background: color-mix(in oklch, var(--base) 80%, white);
        filter: hue-rotate(20deg);
      }

      &:nth-child(3) {
        background: color-mix(in oklch, var(--base) 70%, white);
        filter: hue-rotate(40deg);
      }

      &:nth-child(4) {
        background: color-mix(in oklch, var(--base) 65%, white);
        filter: hue-rotate(60deg);
      }

      &:nth-child(5) {
        background: color-mix(in oklch, var(--base) 55%, white);
        filter: hue-rotate(80deg);
      }

      &:nth-child(6) {
        background: color-mix(in oklch, var(--base) 45%, white);
        filter: hue-rotate(100deg);
      }
    }
  }
  .link-border {
    border-radius: 2rem;
  }
  .us-finding {
    background-color: var(--base);
    padding: 2rem;
    margin-top: 1rem;
    border-radius: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    @media only screen and (max-width: 612px) {
      flex-direction: column;
      gap: 4rem;
    }
    figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 2rem 4rem;
      height: 100%;
      .img-figure {
        min-height: 250px;
        margin: 0 !important;
        width: 200px !important;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0 0 2px #00000025 !important;
        border-radius: 1rem !important;
      }
      figcaption {
        display: flex;
        flex-direction: column-reverse;
        @media only screen and (max-width: 612px) {
          flex-direction: column;
        }
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        p {
          font-size: 1.2rem !important;
        }
        label {
          font-weight: bold;
          text-align: center;
        }
      }
    }
    @media only screen and (min-width: 612px) {
      figure:nth-child(1) {
        figcaption {
          align-items: flex-start;
        }
        label {
          text-align: left;
        }
      }
      figure:last-child {
        figcaption {
          align-items: flex-end;
        }
        label {
          text-align: right;
        }
      }
    }
  }
}

.my-3 {
  margin: 3rem 0;
}
.mt-3 {
  margin-top: 3rem;
}
.img-contain {
  object-fit: contain !important;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  @media only screen and (max-width: 612px) {
    grid-template-columns: 1fr;
    gap: 4rem !important;
  }
}

#cs-header {
  margin: 0 4rem;
  @media only screen and (max-width: 612px) {
    margin: 0 2rem;
  }
  margin-top: 2rem;
  .backbutton {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--link-hover);
    color: var(--foreground);
    font-size: 1.2rem;
    padding: 0.8rem;
    border-radius: 1rem;
  }
}

.thank-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0;
  text-align: center;
  .avatar {
    user-select: none;
    border-radius: 5rem;
    height: 140px;
    width: 140px;
    background-color: var(--link-hover);
    @media only screen and (max-width: 480px) {
      height: 120px;
      width: 120px;
    }
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    h4 {
      font-size: 1.4rem;
      @media only screen and (max-width: 480px) {
        font-size: 1.2rem;
      }
    }
    p {
      font-size: 1.2rem;
      @media only screen and (max-width: 480px) {
        font-size: 1rem;
      }
    }
  }
}

.hide {
  display: none !important;
}

.w-100 {
  width: 100% !important;
}
.w-75 {
  width: 75% !important;
}
.w-60 {
  width: 60% !important;
}
.w-50 {
  width: 50% !important;
}
.w-25 {
  width: 25% !important;
}

#auto-toc ul ul {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 250ms ease,
    opacity 200ms ease,
    transform 200ms ease;
  padding-left: 1rem;
  li:last-child {
    margin-bottom: 0.5rem;
  }
}

#auto-toc li.expanded > ul {
  max-height: fit-content;
  opacity: 1;
  transform: translateY(0);
}

.two-column {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 2rem;
  @media only screen and (max-width: 764px) {
    flex-direction: column;
  }
  &.reveresed {
    flex-direction: row-reverse;
  }
}

.img-fitcontent {
  width: fit-content;
}

@media only screen and (max-width: 764px) {
  a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.theme-button {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  color: var(--foreground);
  padding: 0.8rem 1rem;
  padding-right: 2rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transform: translateX(90%);
  transition: transform 600ms ease-in-out;
  border: 1px solid var(--border-line);
  p {
    font-weight: 600;
    font-size: 0.8rem;
  }
  &:hover,
  &:focus {
    transform: translateX(10%);
  }
  &.first-time {
    transform: translateX(10%);
  }
  &:active {
    background-color: var(--background-alt);
  }
}
.btn-outline {
  background-color: transparent;
  color: var(--foreground);
  box-shadow: 0 0 0 2px var(--foreground);
  &:active {
    color: var(--background);
  }
}
.aboutme {
  --background: #f3e4ca;
  --background-alt: #e0c9a1;
  --link-hover: #f3e4ca;
  --border-profile: #1212129d;
  *::selection {
    background-color: #4c2a27;
    color: var(--background);
  }
  background: url(noise.webp), var(--background);
  background-repeat: repeat;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  &::before {
    content: attr(data-title);
    display: block;
    font-size: 18.35vw;
    font-weight: 400;
    white-space: nowrap;
    font-family: "DM Serif Display", serif;
    position: absolute;
    top: -13vw;
    opacity: 0.1;
    z-index: -1;
    width: 100%;
    overflow-x: hidden;
    user-select: none;
    pointer-events: none;
    @media only screen and (max-width: 480px) {
      opacity: 0.08;
      top: -18vw;
    }
  }
  &::after {
    content: "";
    position: fixed;
    inset: 0;
    background: url(noise.webp);
    opacity: 0.1;
    pointer-events: none;
  }
  .downloadbtn {
    font-weight: 500;
    .iconb {
      transform: translateY(-8px);
    }
    &:hover,
    &:focus {
      .iconb {
        transform: translateY(0);
      }
    }
  }
  .hero-section {
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 0 2rem;
    padding-bottom: 1.5rem;
    position: relative;
    width: 100%;
    img {
      padding: 0.25rem;
      border: 2px solid var(--border-profile);
      border-radius: 3rem;
      overflow: hidden;
      object-fit: cover;
      width: 300px;
      margin-bottom: 1.8rem;
      user-select: none;
      @media only screen and (max-width: 480px) {
        width: 80%;
        margin-top: 0;
      }
    }
    .skills {
      white-space: nowrap;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      font-size: 1.08rem;
      font-weight: 400;
      font-family: "DM Mono", monospace;
      opacity: 0.6;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      @media only screen and (max-width: 480px) {
        font-size: 3vw;
        top: -6.5%;
        gap: 1rem;
      }
    }
  }
  .timeline {
    display: grid;
    justify-items: center;
    h2 {
      font-family: "DM Serif Display", serif;
      font-size: 3rem;
      position: relative;
      @media only screen and (max-width: 612px) {
        font-size: 1.5rem;
      }
      &::after {
        content: "";
        width: 100%;
        height: 52px;
        display: block;
        background: url(./belowtext.webp) center/contain no-repeat;
        position: absolute;
        bottom: -10%;
        z-index: -1;
        opacity: 0.2;
        @media only screen and (max-width: 612px) {
          bottom: -50%;
        }
      }
      @media only screen and (max-width: 612px) {
        margin-bottom: 1rem;
      }
    }
    .upcoming-timeline {
      width: 100%;
      user-select: none;
      pointer-events: none;
      @media only screen and (max-width: 612px) {
        margin-bottom: 1rem;
      }
    }
  }
}

.coming-soon {
  background-color: var(--base);
  display: grid;
  place-items: center;
  padding: 2rem;
  min-height: 72.5vh;
  margin: 4rem;
  @media only screen and (max-width: 612px) {
    margin: 2rem;
  }
  margin-top: 2rem;
  border-radius: 2rem;
  overflow: hidden;
  img {
    width: 20vw;
    max-width: 300px;
    @media only screen and (max-width: 612px) {
      width: 60%;
    }
  }
  .cs-text {
    font-size: 1.2rem;
    color: var(--darker-primary-accent);
    opacity: 0.8;
  }
  position: relative;
}

.two-img {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: flex-start;
  img {
    width: 50%;
  }
}