/* screen - index */

.index {
  align-items: flex-end;
  background-color: var(--dark);
  border: 1px none;
  display: flex;
  flex-direction: column;
  height: 7055px;
  overflow: hidden;
  padding: 31px 0;
  width: 1470px;
}

.index .content {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  height: 3939px;
  margin-right: -6px;
  position: relative;
}

.index .welcome {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 893px;
  justify-content: center;
  padding: 80px;
  position: relative;
  width: 100%;
}

.index .frame-857 {
  height: 392px;
  margin-top: -110.72px;
  position: relative;
  width: 442px;
}

.index .frame-855 {
  align-items: flex-start;
  box-shadow: 0px 4px 4px #00000040;
  display: flex;
  height: 332px;
  justify-content: center;
  left: 19px;
  min-width: 411px;
  position: relative;
  top: 125px;
}

.index .frame-856 {
  height: 372px;
  margin-top: -52.47px;
  width: 424px;
}

.index .yammie-summers-ui-ux-designer {
  height: 245.56px;
  position: relative;
  width: 993px;
}

.index .frame-824 {
  flex: 0 0 auto;
  margin-bottom: -110.72px;
  position: relative;
}

.index .skills {
  height: 871px;
  position: relative;
  width: 1468px;
}

.index .frame-container {
  height: 336px;
  left: 208px;
  position: absolute;
  top: -23px;
  width: 1068px;
}

.index .frame-826 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 80px;
  left: 0;
  position: absolute;
  top: 28px;
}

.index .skills-1 {
  color: var(--light);
  font-family: var(--font-family-space_mono);
  font-size: var(--font-size-xxxl);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 64px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-827 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

.index .frame-82 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 40px;
  justify-content: center;
  position: relative;
  width: 1051px;
}

.index .frame-819 {
  height: 238px;
  left: 872px;
  position: absolute;
  top: 0;
  width: 195px;
}

.index .frame-828 {
  height: 552px;
  left: 554px;
  position: absolute;
  top: 319px;
  width: 360px;
}

.index .start {
  height: 651.24px;
  position: relative;
  width: 1440px;
}

.index .overlap-group1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 74px;
  min-height: 625px;
}

.index .title {
  align-items: center;
  display: flex;
  height: 238px;
  justify-content: center;
  position: relative;
  width: 1440px;
}

.index .frame-81 {
  height: 238px;
  position: relative;
  width: 195px;
}

.index .my-design-journey {
  color: var(--light);
  font-family: var(--font-family-space_mono);
  font-size: var(--font-size-xxxl);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 64px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .ive-always-loved-cr {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(191.25, 239.7, 255) 0%,
    rgb(130, 180, 255) 100%
  );
  background-clip: text;
  height: 180px;
  letter-spacing: 0;
  line-height: 40px;
  margin-left: 0;
  position: relative;
  text-align: center;
  width: 456px;
}

.index .faisandu {
  height: 2809px;
  margin-bottom: -1285.24px;
  position: relative;
  width: 1448px;
}

.index .flex-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: -17px;
  min-height: 2524px;
  position: relative;
  top: -56px;
  width: 1525px;
}

.index .flex-row {
  align-items: flex-start;
  display: flex;
  height: 537px;
  margin-right: 44.08px;
  min-width: 1295px;
}

.index .overlap-group3 {
  height: 349px;
  margin-top: 24.45px;
  position: relative;
  width: 415px;
}

.index .i-love-designing-wr {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  height: 120px;
  left: 0;
  letter-spacing: 0;
  line-height: 40px;
  position: absolute;
  text-fill-color: transparent;
  top: 0;
  width: 354px;
}

.index .group-2836 {
  height: 274px;
  left: 71px;
  position: absolute;
  top: 75px;
  width: 344px;
}

.index .frame-862 {
  align-self: flex-end;
  height: 432px;
  margin-left: 45px;
  width: 401px;
}

.index .when-i-started-learn {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-dm_sans);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin-left: 99px;
  min-height: 144px;
  text-fill-color: transparent;
  width: 334px;
}

.index .flex-row-1 {
  align-items: flex-start;
  display: flex;
  gap: 513px;
  height: 215px;
  margin-right: 48.81px;
  margin-top: 141px;
  min-width: 1204px;
  padding: 0 0px;
}

.index .tech-however-is-so {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: flex-end;
  background: linear-gradient(
    180deg,
    rgb(191.25, 239.7, 255) 0%,
    rgb(130, 180, 255) 100%
  );
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-dm_sans);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 50px;
  margin-bottom: 0;
  min-height: 200px;
  text-fill-color: transparent;
  width: 335px;
}

.index .my-biggest-inspirati {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  height: 200px;
  letter-spacing: 0;
  line-height: 40px;
  margin-top: 0;
  text-fill-color: transparent;
  width: 354px;
}

.index .overlap-group4 {
  align-self: flex-start;
  height: 999px;
  margin-top: 49px;
  position: relative;
  width: 1448px;
}

.index .frame-container-1 {
  height: 996px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1448px;
}

.index .frame-116 {
  align-items: flex-start;
  display: flex;
  height: 695px;
  left: 0;
  min-width: 1448px;
  padding: 0 107.1px;
  position: absolute;
  top: 0;
}

.index .flex-col-1 {
  align-items: flex-start;
  align-self: flex-end;
  gap: 585px;
  margin-bottom: -561.37px;
  min-height: 1249px;
  width: 468px;
}

.index .frame-868 {
  height: 385px;
  width: 372px;
}

.index .vector-3 {
  align-self: flex-end;
  height: 278px;
  width: 236px;
}

.index .designing-and-creati {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: center;
  background: linear-gradient(
    180deg,
    rgb(191.25, 239.7, 255) 0%,
    rgb(130, 180, 255) 100%
  );
  background-clip: text;
  height: 180px;
  letter-spacing: 0;
  line-height: 40px;
  margin-left: 68px;
  margin-top: 162.41px;
  text-align: center;
  text-fill-color: transparent;
  width: 258px;
}

.index .flex-col-2 {
  align-items: center;
  gap: 38px;
  margin-left: 177px;
  margin-top: -83.5px;
  min-height: 431px;
  width: 241px;
}

.index .vector-3-1 {
  height: 150px;
  margin-right: 13.27px;
  width: 164px;
}

.index .frame-864 {
  height: 243px;
  width: 241px;
}

.index .frame-865 {
  height: 419px;
  left: 551px;
  position: absolute;
  top: 576px;
  width: 423px;
}

.index .i-think-creating-art {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  height: 180px;
  left: 68px;
  letter-spacing: 0;
  line-height: 40px;
  position: absolute;
  text-fill-color: transparent;
  top: 819px;
  width: 356px;
}

.index .i-have-a-lot-of-hobb {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-dm_sans);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 1129px;
  letter-spacing: 0;
  line-height: 24px;
  position: absolute;
  text-fill-color: transparent;
  top: 796px;
  width: 242px;
}

.index .frame-container-2 {
  align-items: center;
  align-self: flex-end;
  display: flex;
  gap: 646px;
  margin-top: 125px;
  min-width: 1471px;
}

.index .frame-867 {
  height: 356px;
  margin-top: 22.2px;
  width: 375px;
}

.index .frame-866 {
  height: 458px;
  width: 450px;
}

.index .title-1 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: center;
  background: linear-gradient(
    180deg,
    rgb(191.25, 239.7, 255) 0%,
    rgb(130, 180, 255) 100%
  );
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-space_mono);
  font-size: var(--font-size-xxxxl);
  font-weight: 700;
  height: 130px;
  letter-spacing: 0;
  line-height: 128px;
  margin-top: 1256px;
  text-align: center;
  text-fill-color: transparent;
  white-space: nowrap;
  width: 1009px;
}

.index .overlap-group5 {
  height: 1565px;
  margin-top: 49px;
  position: relative;
  width: 1468px;
}

.index .vector-5 {
  height: 82px;
  left: 1169px;
  position: absolute;
  top: 216px;
  width: 81px;
}

.index .frame-854 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
  left: 0;
  position: absolute;
  top: 916px;
  width: 1468px;
}

.index .frame-824-1 {
  flex: 0 0 auto;
  position: relative;
}

.index .frame-853 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
  width: 1280px;
}

.index .frame-8 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 40px;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.index .frame-850 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 40px;
  position: relative;
}

.index .linked-in {
  height: 64px;
  position: relative;
  width: 64px;
}

.index .linked-in-1 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    rgb(169.04, 253.94, 129.08) 0%,
    rgb(192, 240, 255) 100%
  );
  background-clip: text;
  cursor: pointer;
  letter-spacing: 0;
  line-height: 48px;
  position: relative;
  text-align: center;
  text-decoration: underline;
  text-fill-color: transparent;
}

.index .notion {
  height: 64px;
  position: relative;
  width: 64px;
}

.index .web-dev-portfolio {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    rgb(129.08, 179.03, 253.94) 0%,
    rgb(223.99, 165.97, 244.37) 100%
  );
  background-clip: text;
  cursor: pointer;
  letter-spacing: 0;
  line-height: 48px;
  position: relative;
  text-align: center;
  text-decoration: underline;
  text-fill-color: transparent;
}

.index .figma {
  height: 64px;
  position: relative;
  width: 64px;
}

.index .figma-1 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    rgb(169.04, 253.94, 129.08) 0%,
    rgb(171, 131, 254) 100%
  );
  background-clip: text;
  letter-spacing: 0;
  line-height: 48px;
  position: relative;
  text-align: center;
  text-decoration: underline;
  text-fill-color: transparent;
}

.index .frame-819-1 {
  height: 241px;
  left: 1161px;
  position: absolute;
  top: 81px;
  width: 192px;
}

.index .frame-860 {
  height: 241px;
  left: 144px;
  position: absolute;
  top: 831px;
  width: 192px;
}

.index .frame-863 {
  height: 924px;
  left: 226px;
  position: absolute;
  top: 0;
  width: 999px;
}

.index .flex-col-3 {
  display: flex;
  flex-direction: column;
}

.index .tag-7 {
  flex: 0 0 auto;
  position: relative;
}

Preview Code Style CSS Vars Copy .frame-826,
.frame-826 * {
  box-sizing: border-box;
}
.frame-826 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.skills {
  color: var(--light, #ffffff);
  text-align: center;
  font: 700 italic 48px/64px "Space Mono", sans-serif;
  position: relative;
}
.frame-827 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-820 {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 1051px;
  position: relative;
}
.tag {
  border-radius: 120px;
  border-width: 4px;
  border-style: solid;
  border-image: var(
    --gradient-grape,
    linear-gradient(
      -90deg,
      rgba(219, 166, 244, 1) 0%,
      rgba(169, 129, 254, 1) 100%
    )
  );
  border-image-slice: 1;
  padding: 15px 30px 15px 30px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.tag2 {
  color: var(
    --gradient-lima,
    linear-gradient(
      -90deg,
      rgba(255, 229, 151, 1) 0%,
      rgba(170, 255, 130, 1) 100%
    )
  );
  text-align: center;
  font: var(--button, 700 24px/32px "DM Sans", sans-serif);
  position: relative;
}
.frame-822 {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 1051px;
  position: relative;
}

/* ipad/tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --font-size-xxxxl: 40px;
  }
  .index .yammie-summers-ui-ux-designer {
    height: 242.56px;
    position: relative;
    width: 799px;
  }
  .index .frame-863 {
    height: 568px;
    left: 441px;
    position: absolute;
    top: 0;
    width: 542px;
  }
  .index .frame-860 {
    top: 540px;
  }
  .index .frame-819-1 {
    top: 183px;
  }
  .index .title-1 {
    font-size: 50px;
  }
}

/* computer */
@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --font-size-xxxxl: 40px;
  }
  .index .frame-856 {
    height: 211px;
    margin-top: 10px;
    margin-right: 60px;
  }
  .index .welcome {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0px;
    height: 500px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 100%;
  }
  .index .yammie-summers-ui-ux-designer {
    height: 150px;
    position: relative;
    width: 500px;
  }
  .index .frame-container {
    top: 80px;
  }
  .index .frame-860 {
    top: 270px;
  }
  .index .frame-819-1 {
    top: 92px;
  }
  .index .frame-819 {
    height: 238px;
    left: 939px;
    position: absolute;
    top: 21px;
    width: 99px;
  }
  .index .frame-81 {
    height: 113px;
    position: relative;
    width: 320px;
  }
  .index .frame-828 {
    height: 655px;
    left: 554px;
    position: absolute;
    top: 319px;
    width: 359px;
  }
  .index .title-1 {
    font-size: 50px;
    margin-top: unset !important;
  }
  .dmsans-bold-white-32px {
    font-family: var(--font-family-dm_sans);
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700;
  }
  .index .frame-862 {
    width: 300px;
  }
  .index .group-2836 {
    width: 300px;
    height: 200px;
  }
  .index .flex-row {
    min-width: fit-content !important;
    max-width: fit-content !important;
    margin-right: unset !important;
  }
  .index .frame-868 {
    height: 270px;
    width: 350px;
  }
  .index .flex-row-1 {
    align-items: flex-start;
    display: flex;
    gap: 450px;
    height: 215px;
    margin-right: initial;
    margin-top: auto;
    min-width: fit-content;
    padding: 0 0px;
  }
  .index .when-i-started-learn {
    margin-left: auto;
  }
  .index .frame-865 {
    left: 550px;
    width: 300px;
    top: 450px;
  }
  .index .frame-container-2 {
    align-self: auto;
    gap: 300px;
    min-width: auto;
    margin-top: unset;
  }
  .index .i-have-a-lot-of-hobb {
    left: 930px;
  }
  .index .flex-col {
    top: unset;
    left: unset;
    width: unset;
  }
  .index .i-think-creating-art {
    left: 200px;
    top: 710px;
  }
  .index .start {
    height: 450px;
  }
  .index .vector-3 {
    height: 190px;
    width: 100px;
  }
  .index .frame-864 {
    height: 200px;
    width: 300px;
  }
  .index .designing-and-creati {
    margin-top: unset !important;
    margin-left: unset !important;
  }
  .index .i-have-a-lot-of-hobb {
    top: 720px;
  }
  .index .frame-866 {
    height: 350px;
    width: 350px;
  }
  .index .frame-867 {
    height: 300px;
    margin-top: unset;
    width: 300px;
  }
  .index .faisandu {
    max-width: fit-content;
    margin-bottom: unset;
    width: unset !important;
    height: unset !important;
  }
  .index .frame-854 {
    top: 600px;
  }
  .index {
    height: 5800px;
  }
  .index .skills {
    margin-bottom: 900px !important;
  }
  .index .title-1 {
    height: auto !important;
    margin-top: 400px !important;
  }
  .index .frame-863 {
    height: 568px;
    left: 441px;
    position: absolute;
    top: 0;
    width: 542px;
  }
}