* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  aspect-ratio: 375 / 5410;
  overflow-x: hidden !important;
  height: 100%;
  min-height: 1em;
  font-family: Poppins, sans-serif;
  font-style: normal;
}

ul {
  list-style-type: none;
}

#container {
  width: 100%;
  aspect-ratio: 375 / 5410;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  background: #e5e5e5;
}

#app-bar-compact {
  width: 100%;
  aspect-ratio: 375 / 92;
  z-index: 3;
  font-size: 100%;
  background: white;
}

#toolbar {
  width: 100%;
  height: 100%;
}

#div-button {
  width: 10.15%;
  aspect-ratio: 1 / 1;
  left: 83%;
  top: 52%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

#menu {
  width: 60%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#icon-button-button {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  z-index: 10;
  cursor: pointer;
}

#icon-button-button:enabled {
  background: transparent;
}

#icon-button-button:hover {
  background: lightgray;
}

#icon-button-button:active {
  background: lightgreen;
}

#union {
  height: 80%;
  aspect-ratio: 15 / 18;
  display: grid;
  position: relative;
  align-items: center;
  justify-content: center;
}

#div-logo {
  width: 26%;
  aspect-ratio: 100 / 40;
  left: 3.5%;
  top: 10%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 100%;
}

#div-logo-a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6070ff;
  font-weight: 700;
  font-size: 5vw;
  line-height: 112%;
  text-decoration: none;
}

#my-logo {
  width: 75%;
  height: 50%;
  font-weight: 700;
  font-size: 112%;
  line-height: 112%;
  color: #6070ff;
}

#headline {
  width: 100%;
  aspect-ratio: 375 / 625;
  z-index: 2;
  margin: 0;
  background: white;
  border-bottom-left-radius: 20vw;
}

#menu-2-button {
  background: transparent;
  border: none;
  color: transparent;
}

#div-primary-text-1 {
  width: 87.2%;
  aspect-ratio: 327 / 150;
  left: 6.4%;
  top: 3.8%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: normal;
}

#div-primary-text-2 {
  width: 87.2%;
  aspect-ratio: 327 / 146;
  left: 6.4%;
  top: 6.8%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#div-social-media {
  width: 36%;
  aspect-ratio: 117 / 24;
  left: 6.4%;
  top: 9.722735%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#div-social-media-icons {
  width: 50%;
  aspect-ratio: 170.17 / 20;
  left: 2.2%;
  top: 10.25%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

#social-media-icons-li {
  position: absolute;
  left: 6%;
  top: 10.25%;
  width: 46%;
  aspect-ratio: 170.17 / 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

#social-media-icons-li-2 {
  position: absolute;
  left: 2%;
  top: -2%;
  width: 30%;
  aspect-ratio: 170.17 / 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

#social-media-icons-item-1 {
  aspect-ratio: 19.99 / 19.96;
  width: 11.75%;
}

#social-media-icons-item-1 > a {
  height: 100%;
  width: 100%;
  display: flex;
}

#social-media-icons-item-2 {
  aspect-ratio: 20 / 20;
  width: 11.75%;
}

#social-media-icons-item-2 > a {
  height: 100%;
  width: 100%;
  display: flex;
}

#social-media-icons-item-3 {
  aspect-ratio: 20 / 16;
  width: 11.75%;
}

#social-media-icons-item-3 > a {
  height: 100%;
  width: 100%;
  display: flex;
}

#social-media-icons-item-4 {
  aspect-ratio: 17.99 / 20;
  width: 10.57%;
}

#social-media-icons-item-4 > a {
  height: 100%;
  width: 100%;
  display: flex;
}

#social-media-icons-item-5 {
  aspect-ratio: 14.17 / 20;
  width: 8.32%;
}

#social-media-icons-item-5 > a {
  height: 100%;
  width: 100%;
  display: flex;
}

#header-shapes-mobile {
  width: 124%;
  aspect-ratio: 462 / 587.15;
  top: 1.922365%;
  position: absolute;
  z-index: 10;
  background: url("header-shapes mobile.svg");
  background-size: auto;
  background-position: center;
}

#header-background-mobile {
  width: 100%;
  aspect-ratio: 375 / 718;
  position: absolute;
  background: #fff;
  border-bottom-left-radius: 20vw;
}

.primary-text-1 span {
  display: none;
}

.primary-text-1::after {
  position: absolute;
  top: -2%;
  height: 100%;
  width: 100%;
  font-weight: 700;
  font-size: 10.7vw;
  line-height: 14vw;
  color: #172b4d;
  align-items: center;
  content: 'ľm Mariane Glad to see you!';
}

.primary-text-2 {
  top: -10%;
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 4.25vw;
  font-weight: 400;
  line-height: 6.35vw;
  text-align: left;
  color: #344563;
}

.social-media-p {
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 4.2vw;
  font-weight: 500;
  line-height: 6.3vw;
  text-align: left;
  color: #7f8cff;
  margin: 0;
}

.vector {
  width: 4vw;
  border-radius: 1px;
  display: block;
  border: 0.5vw solid #6070ff;
  background: #6070ff;
}

/* Works section */
#works-section {
  width: 100%;
  aspect-ratio: 375 / 2788;
  top: 13.271719%;
  position: absolute;
  background-image: url("images/works-mobile.png");
  background-size: cover;
  background-position: center;
  justify-content: center;
  display: grid;
  align-items: start;
}

#align-section {
  width: 87.3%;
  height: 91.9%;
  top: 4%;
  left: 6.3%;
  aspect-ratio: 375 / 2788;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.works-section-class {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  background-color: white;
  position: relative;
  border: 0.3vw solid #dfe1e6;
}

#works-section-div1 {
  width: 100%;
  aspect-ratio: 327 / 552;
  border-radius: 4.3vw;
  top: 0.1%;
}

#works-section-div2 {
  width: 100%;
  aspect-ratio: 327 / 596;
  border-radius: 4.3vw;
  top: 0.08%;
}

#works-section-div3 {
  width: 100%;
  aspect-ratio: 327 / 552;
  border-radius: 4.3vw;
  top: 0.03%;
}

#works-section-div4 {
  width: 100%;
  aspect-ratio: 327 / 596;
  border-radius: 4.3vw;
}

.snapshot-portfolio-class {
  width: 90%;
  aspect-ratio: 295 / 220;
  position: relative;
  border-radius: 2vw;
}

#snapshot-portfolio-1 {
  top: 1.65%;
  background: url("Snapshoot Portfolio1.png");
  background-size: cover;
  background-position: center;
}

#snapshot-portfolio-2 {
  top: -2.2%;
  background: url("Snapshoot Portfolio2.png");
  background-size: cover;
  background-position: center;
}

#snapshot-portfolio-3 {
  top: 1.65%;
  position: relative;
  background: url("Snapshoot Portfolio3.png");
  background-size: cover;
  background-position: center;
}

#snapshot-portfolio-4 {
  top: -2.2%;
  position: relative;
  background: url("Snapshoot Portfolio4.png");
  background-size: cover;
  background-position: center;
}

#block-apart1 {
  width: 100%;
  aspect-ratio: 295 / 288;
  top: -3.7%;
  position: relative;
}

#block-apart2 {
  width: 100%;
  aspect-ratio: 295 / 288;
  top: 0.2%;
  position: relative;
}

#block-apart-primary-text-1 {
  width: 90%;
  aspect-ratio: 295 / 124;
  left: 4.8%;
  position: relative;
  display: grid;
  flex-direction: column;
  align-items: center;
}

#block-apart-primary-text-1-project-title {
  width: 90%;
  aspect-ratio: 295 / 80;
  top: 0%;
  left: 0%;
  position: relative;
}

.block-apart-primary-text {
  position: absolute;
  height: 100%;
  width: 100%;
  font-weight: 700;
  font-size: 8.4vw;
  line-height: 11.8vw;
  color: #344563;
}

#block-apart-primary-text-1-project-title-text-1::after {
  position: absolute;
  top: -15%;
  left: 0%;
  content: "Tonic";
}

#block-apart-primary-text-1-project-title-text-2::after {
  position: absolute;
  top: -73%;
  left: 0%;
  width: 60%;
  content: "Multi-Post Stories";
}

#block-apart-primary-text-1-project-title-text-3::after {
  position: absolute;
  top: -37%;
  left: 0%;
  content: "Tonic";
}

#block-apart-primary-text-1-project-title-text-4::after {
  position: absolute;
  top: -72%;
  left: 0%;
  width: 60%;
  content: "Multi-Post Stories";
}

#works-section-1-block-apart-primary-text-2-p::after {
  position: absolute;
  top: 42%;
  left: 4.5%;
  width: 85%;
  font-weight: 400;
  font-size: 4vw;
  line-height: 6.4vw;
  color: #344563;
  content: "A daily selection of privately personalized reads; no accounts or sign-ups required.";
}

#works-section-2-block-apart-primary-text-2-p::after {
  position: absolute;
  top: 42%;
  left: 4.5%;
  width: 85%;
  font-weight: 400;
  font-size: 4vw;
  line-height: 6.4vw;
  color: #344563;
  content: "A daily selection of privately personalized reads; no accounts or sign-ups required.";
}

#works-section-3-block-apart-primary-text-2-p::after {
  position: absolute;
  top: 42%;
  left: 4.5%;
  width: 85%;
  font-weight: 400;
  font-size: 4vw;
  line-height: 6.4vw;
  color: #344563;
  content: "A daily selection of privately personalized reads; no accounts or sign-ups required.";
}

#works-section-4-block-apart-primary-text-2-p::after {
  position: absolute;
  top: 42.3%;
  left: 4.5%;
  width: 85%;
  font-weight: 400;
  font-size: 4vw;
  line-height: 6.4vw;
  color: #344563;
  content: "A daily selection of privately personalized reads; no accounts or sign-ups required.";
}

.style-1-font {
  font-weight: 600;
  font-size: 3.5vw;
  line-height: 0vw;
}

#frame-2 {
  width: 81%;
  aspect-ratio: 236 / 32;
  top: 12%;
  left: 0%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#works-section-1-frame-2 {
  position: absolute;
  width: 80%;
  aspect-ratio: 297 / 40;
  left: 0%;
  top: 73.5%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

#works-section-2-frame-2 {
  position: absolute;
  width: 80%;
  aspect-ratio: 297 / 40;
  left: 0%;
  top: 73.5%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

#works-section-3-frame-2 {
  position: absolute;
  width: 80%;
  aspect-ratio: 297 / 40;
  left: 0%;
  top: 73.5%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

#works-section-4-frame-2 {
  position: absolute;
  width: 80%;
  aspect-ratio: 297 / 40;
  left: 0%;
  top: 73.5%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

#counter {
  width: 3.8%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  background: #c1c7d0;
}

#works-section-1-client-text::after {
  color: #344563;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "CANOPY";
}

#works-section-1-role-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "Back End Dev";
  font-weight: 700;
}

#works-section-1-year-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "2015";
  font-weight: 700;
}

#works-section-2-client-text::after {
  color: #344563;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "CANOPY";
}

#works-section-2-role-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "Back End Dev";
  font-weight: 700;
}

#works-section-2-year-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "2015";
  font-weight: 700;
}

#works-section-3-client-text::after {
  color: #344563;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "CANOPY";
}

#works-section-3-role-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "Back End Dev";
  font-weight: 700;
}

#works-section-3-year-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "2015";
  font-weight: 700;
}

#works-section-4-client-text::after {
  color: #344563;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "CANOPY";
}

#works-section-4-role-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "Back End Dev";
  font-weight: 700;
}

#works-section-4-year-text::after {
  color: #7a869a;
  font-size: 3.3vw;
  line-height: 0vw;
  content: "2015";
  font-weight: 700;
}

#block-apart-primary-text-2 {
  width: 90%;
  aspect-ratio: 295 / 76;
  top: 3%;
  left: 4.8%;
  position: relative;
}

#block-apart-primary-text-2-p {
  top: -18%;
  left: 0%;
  position: absolute;
  height: 100%;
  width: 100%;
  font-weight: 400;
  font-size: 3.95vw;
  line-height: 6.45vw;
  color: #344563;
}

#works-section-1-block-apart-tags {
  position: absolute;
  width: 62.2%;
  aspect-ratio: 208 / 24;
  left: 4.5%;
  top: 68%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

#works-section-2-block-apart-tags {
  position: absolute;
  width: 62.2%;
  aspect-ratio: 208 / 24;
  left: 4.5%;
  top: 68%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#works-section-3-block-apart-tags {
  position: absolute;
  width: 62.2%;
  aspect-ratio: 208 / 24;
  left: 4.5%;
  top: 68%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

#works-section-4-block-apart-tags {
  position: absolute;
  width: 62.2%;
  aspect-ratio: 208 / 24;
  left: 4.5%;
  top: 68%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#block-apart-tags-li {
  height: 100%;
  aspect-ratio: 208 / 24;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
}

.block-apart-tags-item {
  font-weight: 500;
  font-size: 3.5vw;
  line-height: 0vw;
  color: #6070ff;
}

.block-apart-tags {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 1.5vw;
  background: #ebebff;
}

#block-apart-tags-item-1 {
  aspect-ratio: 54 / 24;
}

#block-apart-tags-item-2 {
  aspect-ratio: 48 / 24;
}

#block-apart-tags-item-3 {
  aspect-ratio: 94 / 24;
}

#block-apart-action {
  width: 37.8%;
  aspect-ratio: 124 / 48;
  border: 0.3vw solid #6070ff;
  top: 12%;
  left: 4.8%;
  position: relative;
  border-radius: 2vw;
}

#works-section-1-block-apart-action {
  position: absolute;
  width: 37.7%;
  aspect-ratio: 124 / 48;
  left: 4.8%;
  top: 85%;
  border: none;
}

#works-section-2-block-apart-action {
  position: absolute;
  width: 37.7%;
  aspect-ratio: 124 / 48;
  left: 4.8%;
  top: 85%;
  border: none;
}

#works-section-3-block-apart-action {
  position: absolute;
  width: 37.7%;
  aspect-ratio: 124 / 48;
  left: 4.8%;
  top: 85%;
  border: none;
}

#works-section-4-block-apart-action {
  position: absolute;
  width: 37.7%;
  aspect-ratio: 124 / 48;
  left: 4.8%;
  top: 85%;
  border: none;
}

.button {
  cursor: pointer;
}

#block-apart-action-button {
  width: 100%;
  height: 100%;
  border-radius: 2vw;
  background-color: transparent;
  border: none;
  font-weight: 500;
  font-size: 4.8vw;
  line-height: 0vw;
  color: #396df2;
  cursor: pointer;
}

#block-apart-action-button:enabled {
  background: #fff;
  color: #6070ff;
  cursor: pointer;
  border: 0.3vw solid #396df2;
}

#block-apart-action-button:hover {
  background: #6070ff;
  color: #fff;
}

#block-apart-action-button:active {
  background: #2230d2;
  color: #fff;
}

/* About Myself */
#about-myself-base {
  width: 100%;
  aspect-ratio: 375 / 1125.15;
  top: 64.805914%;
  position: absolute;
  border-top-right-radius: 23vw;
  background: white;
}

#about-myself {
  width: 100%;
  aspect-ratio: 375 / 1125.15;
  top: 64.805914%;
  position: absolute;
  border-top-right-radius: 23vw;
}

#about-myself-top {
  width: 87.2%;
  aspect-ratio: 327 / 409;
  top: 10.124333%;
  left: 6.4%;
  position: relative;
}

#about-myself-top-primary-text {
  width: 87.2%;
  aspect-ratio: 327 / 150;
  left: -0.5%;
  top: -0.5%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.about-myself-top-primary-text-1 {
  position: absolute;
  height: 100%;
  width: 100%;
  font-weight: 700;
  font-size: 10.7vw;
  line-height: 14vw;
  color: #172b4d;
  align-items: center;
}

#about-myself-top-primary-text-2 {
  width: 100%;
  aspect-ratio: 327 / 144;
  left: 0%;
  top: -4.5%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.about-myself-top-primary-text-2 {
  height: 100%;
  width: 100%;
  font-weight: 400;
  font-size: 4.25vw;
  line-height: 6.5vw;
  text-align: left;
  color: #344563;
  margin: 0;
}

#about-myself-top-social-media {
  width: 36%;
  aspect-ratio: 117 / 24;
  left: 0%;
  top: -1.2%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#about-myself-top-social-media-icons {
  position: absolute;
  width: 110%;
  aspect-ratio: 200 / 40;
  left: -2%;
  top: 75%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#about-myself-top-block-apart-action {
  width: 49.5%;
  aspect-ratio: 162 / 48;
  top: 88.5%;
  left: 0%;
  position: absolute;
  border-radius: 2vw;
}

#about-myself-skill-list {
  width: 87.2%;
  aspect-ratio: 327 / 464.15;
  top: 12%;
  left: 6.4%;
  position: relative;
}

#about-myself-skill-list-frame-12 {
  width: 100%;
  aspect-ratio: 327 / 320.15;
}

#about-myself-skill-list-frame-8 {
  width: 100%;
  aspect-ratio: 327 / 72;
}

#about-myself-skill-list-frame-9 {
  width: 100%;
  aspect-ratio: 327 / 72;
}

#about-myself-skill-list-skills {
  top: 22%;
  left: -6%;
  position: relative;
  font-weight: 500;
  font-size: 5.35vw;
  line-height: 0vw;
  color: #000;
}

#about-myself-skill-list-skills2 {
  position: absolute;
  top: 8%;
  left: 4%;
  font-weight: 500;
  font-size: 5.28vw;
  line-height: 0vw;
  color: #000;
}

#about-myself-skill-list-frame-separator {
  width: 100%;
  height: 0.3vw;
  top: 85%;
  position: relative;
  background: #dfe1e6;
}

#about-myself-skill-list-button {
  aspect-ratio: 1 / 1;
  height: 8vw;
  top: 15%;
  left: 81.5%;
  position: relative;
  background: transparent;
  border: none;
}

#about-myself-skill-list-button2 {
  aspect-ratio: 1 / 1;
  height: 8vw;
  top: 32%;
  left: 81.5%;
  position: relative;
  background: transparent;
  border: none;
}

#about-myself-skill-list-frame-7 {
  width: 100%;
  aspect-ratio: 327 / 72;
}

#about-myself-skill-list-language-list {
  width: 100%;
  aspect-ratio: 327 / 248.15;
  top: -2.5%;
  left: -4%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.about-myself-skill-list {
  width: 92%;
  aspect-ratio: 303 / 66.72;
  border-radius: 2vw;
  background: #f7f7f9;
}

#about-myself-skill-list-frame-92 {
  top: 3%;
  position: relative;
}

#about-myself-skill-list-frame-10 {
  top: 1%;
  position: relative;
}

#about-myself-skill-list-frame-11 {
  top: 0%;
  position: relative;
}

#about-myself-skill-list-icon-1 {
  width: 17%;
  aspect-ratio: 1 / 1;
  top: 12%;
  left: 3.4%;
  position: relative;
  border-radius: 50%;
  background-image: url("Ellipse 3.png");
  background-size: cover;
  background-position: center;
}

#about-myself-skill-list-icon-2 {
  width: 17%;
  aspect-ratio: 1 / 1;
  top: 12%;
  left: 3.4%;
  position: relative;
  border-radius: 50%;
  background-image: url("Ellipse 2.png");
  background-size: cover;
  background-position: center;
}

#about-myself-skill-list-icon-3 {
  width: 17%;
  aspect-ratio: 1 / 1;
  top: 12%;
  left: 3.4%;
  position: relative;
  border-radius: 50%;
  background-image: url("Ellipse 1.png");
  background-size: cover;
  background-position: center;
}

.about-myself-skill-list-text {
  font-weight: 500;
  font-size: 3.9vw;
  line-height: 0vw;
  color: #000;
}

#about-myself-skill-list-text-1 {
  top: -29%;
  left: 25%;
  position: relative;
}

#about-myself-skill-list-text-2 {
  top: -29%;
  left: 25%;
  position: relative;
}

#about-myself-skill-list-text-3 {
  top: -29%;
  left: 25%;
  position: relative;
}

/* contact form */
#contact-form-base {
  position: absolute;
  width: 100%;
  aspect-ratio: 375 / 779;
  left: 0%;
  top: 85.600739%;
  background: #6070ff;
  border-top-left-radius: 21vw;
}

#contact-form-shapes {
  position: absolute;
  width: 70.666667%;
  aspect-ratio: 265 / 709;
  left: 41%;
  top: 85.988909%;
  background: url("contact form shapes-mobile.svg");
  background-size: contain, cover;
  background-position: initial;
}

#contact-form-data {
  position: absolute;
  width: 100%;
  aspect-ratio: 375 / 779;
  left: 0%;
  top: 85.600739%;
  background: transparent;
}

#contact-form-data-div {
  position: absolute;
  width: 213.6%;
  aspect-ratio: 801 / 56;
  left: -56.8%;
  top: 13.22208%;
  display: grid;
  align-items: center;
  text-align: center;
  flex-grow: none;
}

#contact-form-data-h1 {
  position: absolute;
  width: 213.6%;
  aspect-ratio: 801 / 56;
  left: -56.8%;
  top: 8.6%;
  height: auto;
  font-weight: 700;
  font-size: 10.7vw;
  color: #fff;
  text-align: center;
}

#contact-form-data-h6 {
  position: absolute;
  width: 87.2%;
  aspect-ratio: 327 / 102;
  left: 6.4%;
  top: 21.95122%;
  font-weight: 400;
  font-size: 5.3vw;
  line-height: 7.5vw;
  color: #fff;
  text-align: center;
  margin: auto;
}

#contact-form-data-button {
  position: absolute;
  width: 37.333333%;
  aspect-ratio: 140 / 48;
  left: 6.4%;
  top: 88.061617%;
  background: white;
  border-radius: 2vw;
  font-weight: 500;
  font-size: 4.8vw;
  line-height: 7.5vw;
  color: #6070ff;
  text-align: center;
  margin: auto;
  border: none;
}

#contact-form-data-button:enabled {
  background: #fff;
  color: #6070ff;
}

#contact-form-data-button:hover {
  background: #6070ff;
  color: #fff;
}

#contact-form-data-button:active {
  background: #2230d2;
  color: #fff;
}

#shape {
  position: absolute;
  width: 35.733333%;
  aspect-ratio: 134 / 5;
  left: 32%;
  top: 98.331194%;
  border-radius: 1vw;
  background: #0d151e;
}

#survey-form-name-input {
  position: absolute;
  width: 87.2%;
  aspect-ratio: 327 / 48;
  left: 6.4%;
  top: 46.213094%;
  background: white;
  border-radius: 2vw;
  font-weight: 400;
  font-size: 4.6vw;
  line-height: 7.5vw;
  color: #172b4d;
  padding-left: 4vw;
  border: none;
}

#survey-form-email-input {
  position: absolute;
  width: 87.2%;
  aspect-ratio: 327 / 48;
  left: 6.4%;
  top: 54.942234%;
  background: white;
  border-radius: 2vw;
  font-weight: 400;
  font-size: 4.6vw;
  line-height: 7.5vw;
  color: #172b4d;
  padding-left: 4vw;
  border: none;
}

#survey-form-message-input {
  position: absolute;
  width: 87.2%;
  aspect-ratio: 327 / 170;
  left: 6.4%;
  top: 63.414634%;
  background: white;
  border-radius: 2vw;
  font-weight: 400;
  font-size: 4vw;
  line-height: 7.5vw;
  color: #172b4d;
  padding-left: 4vw;
  border: none;
}

::placeholder {
  color: #b3bac5;
}

/* desktop version */
@media (min-width: 1000px) and (orientation: landscape) {
  /* For desktop: */
  #container {
    width: 100%;
    aspect-ratio: 1440 / 5125;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    background: #e5e5e5;
  }

  #app-bar-compact {
    width: 100%;
    aspect-ratio: 1440 / 72;
    z-index: 3;
  }

  #div-logo {
    width: 6.944444%;
    aspect-ratio: 100 / 40;
    left: 9.930556%;
    top: 0.292683%;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 100%;
  }

  #div-logo-a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6070ff;
    font-weight: 700;
    font-size: 1.25vw;
    line-height: 112%;
    text-decoration: none;
  }

  #icon-button-button:disabled {
    background: transparent;
  }

  #div-button {
    width: 0;
    left: 0%;
    top: 0%;
    border: none;
  }

  #menu {
    width: 0%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .vector {
    width: 0;
    border: none;
    background: transparent;
  }

  #menu-2 {
    position: absolute;
    width: 17.986111%;
    aspect-ratio: 259 / 40;
    left: 72%;
    top: 0.312195%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 1.4vw;
  }

  #menu-2-button {
    background: transparent;
    border: none;
    color: #344563;
    font-weight: 600;
    font-size: 1.2vw;
    line-height: 100%;
  }

  #headline {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 846;
    left: 0%;
    top: 1.385366%;
    z-index: 2;
    margin: 0;
    border-bottom-left-radius: 10vw;
  }

  #div-primary-text-1 {
    position: absolute;
    width: 33%;
    aspect-ratio: 920 / 122;
    left: 18.055556%;
    top: 36%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: normal;
  }

  #div-primary-text-2 {
    position: absolute;
    width: 63.888889%;
    aspect-ratio: 920 / 98;
    left: 18.055556%;
    top: 48.7%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .primary-text-1 span {
    display: none;
  }

  .primary-text-1::after {
    position: absolute;
    top: -20%;
    height: 100%;
    width: 100%;
    font-weight: 700;
    font-size: 3.4vw;
    line-height: 4vw;
    color: #172b4d;
    align-items: center;
    content: "I'm Alexandra Glad to see you!";
  }

  .primary-text-2 {
    height: 100%;
    width: 100%;
    font-weight: 400;
    font-size: 1.38vw;
    line-height: 2vw;
    text-align: left;
    color: #344563;
  }

  #div-social-media {
    position: absolute;
    width: 8.125%;
    aspect-ratio: 117 / 24;
    left: 18.055556%;
    top: 63%;
  }

  .social-media-p {
    height: 100%;
    aspect-ratio: 117 / 24;
    font-weight: 500;
    font-size: 1.07vw;
    line-height: 2vw;
    text-align: left;
    color: #7f8cff;
    margin: 0;
  }

  #div-social-media-icons {
    position: absolute;
    width: 11.805556%;
    aspect-ratio: 170 / 20;
    left: 18.055556%;
    top: 66%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid green;
    padding: 0;
  }

  #social-media-icons-item-1 {
    aspect-ratio: 1 / 1;
    height: 100%;
  }

  #social-media-icons-item-1 > a {
    height: 100%;
    width: 100%;
    display: flex;
  }

  #social-media-icons-item-2 {
    aspect-ratio: 1 / 1;
    height: 100%;
  }

  #social-media-icons-item-2 > a {
    height: 100%;
    width: 100%;
    display: flex;
  }

  #social-media-icons-item-3 {
    aspect-ratio: 20 / 16;
    height: 100%;
  }

  #social-media-icons-item-3 > a {
    height: 100%;
    width: 100%;
    display: flex;
  }

  #social-media-icons-item-4 {
    aspect-ratio: 18 / 20;
    height: 100%;
  }

  #social-media-icons-item-4 > a {
    height: 100%;
    width: 100%;
    display: flex;
  }

  #social-media-icons-item-5 {
    aspect-ratio: 14 / 20;
    height: 100%;
  }

  #social-media-icons-item-5 > a {
    height: 100%;
    width: 100%;
    display: flex;
  }

  /* Works section */
  #works-section {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 2694;
    left: 0%;
    top: 17.892683%;
    justify-content: center;
    display: grid;
    align-items: start;
  }

  #align-section {
    width: 100%;
    aspect-ratio: 1440 / 2694;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .works-section-class {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: white;
    position: relative;
  }

  #works-section-div1 {
    position: absolute;
    width: 80.277778%;
    aspect-ratio: 1156 / 496;
    left: 3.5%;
    top: 1.4%;
    border-radius: 1.6vw;
  }

  #works-section-div2 {
    position: absolute;
    width: 80.277778%;
    aspect-ratio: 1156 / 496;
    left: 3.5%;
    top: 27.2%;
    border-radius: 1.6vw;
  }

  #works-section-div3 {
    position: absolute;
    width: 80.277778%;
    aspect-ratio: 1156 / 496;
    left: 3.5%;
    top: 52.9%;
    border-radius: 1.6vw;
  }

  #works-section-div4 {
    position: absolute;
    width: 80.277778%;
    aspect-ratio: 1156 / 496;
    left: 3.5%;
    top: 78.6%;
    border-radius: 1.6vw;
  }

  .snapshot-portfolio-class {
    width: 47.5%;
    aspect-ratio: 544 / 448;
    border-radius: 0.5vw;
  }

  #block-apart1 {
    position: absolute;
    width: 47.058824%;
    aspect-ratio: 544 / 445;
    left: 51.038062%;
    top: 4.83871%;
  }

  #block-apart2 {
    position: absolute;
    width: 47.058824%;
    aspect-ratio: 544 / 445;
    left: 2.076125%;
    top: 4.83871%;
  }

  #snapshot-portfolio-1 {
    top: 0%;
    left: -24.2%;
    background: url("Desktop-Snapshoot Portfolio1.jpg");
    background-size: cover;
    background-position: center;
  }

  #snapshot-portfolio-2 {
    top: 0%;
    left: 24.7%;
    background: url("Desktop-Snapshoot Portfolio2.jpg");
    background-size: cover;
    background-position: center;
  }

  #snapshot-portfolio-3 {
    top: 0%;
    left: -24.2%;
    position: relative;
    background: url("Desktop-Snapshoot Portfolio3.jpg");
    background-size: cover;
    background-position: center;
  }

  #snapshot-portfolio-4 {
    top: 0%;
    left: 24.7%;
    position: relative;
    background: url("Desktop-Snapshoot Portfolio4.jpg");
    background-size: cover;
    background-position: center;
  }

  #block-apart-primary-text-1 {
    position: absolute;
    width: 91.176471%;
    aspect-ratio: 496 / 98;
    left: 4.411765%;
    top: 5.393258%;
    display: grid;
    flex-direction: column;
    align-items: center;
  }

  #block-apart-primary-text-1-project-title {
    position: absolute;
    width: 100%;
    aspect-ratio: 496 / 46;
    top: -20%;
    left: 0.5%;
  }

  #block-apart-primary-text-1-project-title-2 {
    position: absolute;
    width: 100%;
    aspect-ratio: 496 / 46;
    top: -20%;
    left: -0.5%;
  }

  #block-apart-primary-text-1-project-title-3 {
    position: absolute;
    width: 100%;
    aspect-ratio: 496 / 46;
    top: -15%;
    left: 0.5%;
  }

  #block-apart-primary-text-1-project-title-4 {
    position: absolute;
    width: 100%;
    aspect-ratio: 496 / 46;
    top: -15%;
    left: -0.5%;
  }

  .block-apart-primary-text {
    height: 100%;
    width: 100%;
    font-weight: 700;
    font-size: 2.8vw;
    line-height: 1vw;
    color: #091e42;
    flex: none;
    flex-grow: 0;
  }

  #block-apart-primary-text-1-project-title-text-1 span {
    display: none;
  }

  #block-apart-primary-text-1-project-title-text-1::after {
    position: absolute;
    top: 0%;
    left: 0%;
    display: contents;
    content: "Tonic";
  }

  #block-apart-primary-text-1-project-title-text-2::after {
    top: 0%;
    left: 0%;
    display: contents;
    content: "Multi-Post Stories";
  }

  #block-apart-primary-text-1-project-title-text-3::after {
    top: 0%;
    left: 0%;
    display: contents;
    content: "Facebook 360";
  }

  #block-apart-primary-text-1-project-title-text-4::after {
    top: 0%;
    left: 0%;
    display: contents;
    content: "Uber Navigation";
  }

  .style-1-font {
    font-weight: 600;
    font-size: 1vw;
    line-height: 0vw;
  }

  #works-section-1-frame-2 {
    position: absolute;
    width: 60%;
    aspect-ratio: 297 / 40;
    left: 0%;
    top: 59.183673%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-2-frame-2 {
    position: absolute;
    width: 65%;
    aspect-ratio: 297 / 40;
    left: -0.5%;
    top: 55%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-3-frame-2 {
    position: absolute;
    width: 65%;
    aspect-ratio: 297 / 40;
    left: 0%;
    top: 57%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-4-frame-2 {
    position: absolute;
    width: 58%;
    aspect-ratio: 297 / 40;
    left: 0%;
    top: 62%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  #counter {
    width: 2.1%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #c1c7d0;
    position: relative;
  }

  #works-section-1-client-text::after {
    color: #344563;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "CANOPY";
  }

  #works-section-1-role-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "Back End Dev";
    font-weight: 400;
  }

  #works-section-1-year-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "2015";
    font-weight: 400;
  }

  #works-section-2-client-text::after {
    color: #344563;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "FACEBOOK";
  }

  #works-section-2-role-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "Full Stack Dev";
    font-weight: 400;
  }

  #works-section-2-year-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "2015";
    font-weight: 400;
  }

  #works-section-3-client-text::after {
    color: #344563;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "FACEBOOK";
  }

  #works-section-3-role-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "Full Stack Dev";
    font-weight: 400;
  }

  #works-section-3-year-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "2015";
    font-weight: 400;
  }

  #works-section-4-client-text::after {
    color: #344563;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "Uber";
  }

  #works-section-4-role-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "Lead Developer";
    font-weight: 400;
  }

  #works-section-4-year-text::after {
    color: #7a869a;
    font-size: 1.2vw;
    line-height: 0vw;
    content: "2018";
    font-weight: 400;
  }

  #works-section-1-block-apart-primary-text-2 {
    position: absolute;
    width: 91.176471%;
    aspect-ratio: 496 / 50;
    left: 0%;
    top: 27.5%;
  }

  #works-section-1-block-apart-primary-text-2-p::after {
    width: 100%;
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.7vw;
    color: #344563;
    color: black;
    content: "A daily selection of privately personalized reads; no accounts or sign-ups required.";
  }

  #works-section-2-block-apart-primary-text-2 {
    position: absolute;
    width: 91.176471%;
    aspect-ratio: 496 / 50;
    left: 0%;
    top: 27%;
    line-height: 0.5vw;
  }

  #works-section-2-block-apart-primary-text-2-p::after {
    width: 100%;
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.7vw;
    color: #344563;
    content: "Experimental content creation feature that allows users to add to an existing story over the course of a day without spamming their friends.";
  }

  #works-section-3-block-apart-primary-text-2 {
    position: absolute;
    width: 91.176471%;
    aspect-ratio: 496 / 50;
    left: 0.5%;
    top: 28%;
    line-height: 0.5vw;
  }

  #works-section-3-block-apart-primary-text-2-p::after {
    width: 100%;
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.7vw;
    color: #344563;
    content: "Exploring the future of media in Facebook's first Virtual Reality app; a place to discover and enjoy 360 photos and videos on Gear VR.";
  }

  #works-section-4-block-apart-primary-text-2 {
    position: absolute;
    width: 92%;
    aspect-ratio: 496 / 50;
    left: 0%;
    top: 28%;
    line-height: 0.5vw;
  }

  #works-section-4-block-apart-primary-text-2-p::after {
    width: 100%;
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.7vw;
    color: #344563;
    content: "A smart assistant to make driving more safe, efficient, and fun by unlocking your most expensive computer: your car.";
  }

  #works-section-1-block-apart-tags {
    position: absolute;
    width: 37.316176%;
    aspect-ratio: 203 / 24;
    left: 4.411765%;
    top: 49.438202%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-2-block-apart-tags {
    position: absolute;
    width: 37.316176%;
    aspect-ratio: 203 / 24;
    left: 4.411765%;
    top: 53.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-3-block-apart-tags {
    position: absolute;
    width: 37.316176%;
    aspect-ratio: 203 / 24;
    left: 4.411765%;
    top: 53.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #works-section-4-block-apart-tags {
    position: absolute;
    width: 37.316176%;
    aspect-ratio: 203 / 24;
    left: 4.411765%;
    top: 50.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #block-apart-tags-li {
    top: 0%;
    left: 0%;
    height: 100%;
    aspect-ratio: 203 / 24;
    display: contents;
    padding: 0;
  }

  .block-apart-tags-item {
    font-weight: 500;
    font-size: 0.9vw;
    line-height: 0.5vw;
    color: #6070ff;
  }

  .block-apart-tags {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 0.5vw;
    background: #ebebff;
    background: transparent;
    text-align: center;
  }

  #block-apart-tags-item-1 {
    aspect-ratio: 54 / 24;
  }

  #block-apart-tags-item-2 {
    aspect-ratio: 48 / 24;
  }

  #block-apart-tags-item-3 {
    aspect-ratio: 94 / 24;
  }

  #block-apart-tags-item-aux {
    aspect-ratio: 81 / 16;
  }

  .block-apart-tags-aux {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 0.5vw;
    background: #ebebff;
    background: transparent;
    text-align: center;
  }

  .block-apart-tags-item-aux::after {
    font-weight: 500;
    font-size: 0.9vw;
    line-height: 2.5vw;
    color: #6070ff;
    content: 'Ruby on rails';
  }

  #works-section-1-block-apart-action {
    position: absolute;
    width: 23%;
    aspect-ratio: 124 / 48;
    left: 4.4%;
    top: 63.6%;
    border: none;
  }

  #works-section-2-block-apart-action {
    position: absolute;
    width: 23%;
    aspect-ratio: 124 / 48;
    left: 3.6%;
    top: 68%;
    border: none;
  }

  #works-section-3-block-apart-action {
    position: absolute;
    width: 23%;
    aspect-ratio: 124 / 48;
    left: 4.4%;
    top: 68%;
    border: none;
  }

  #works-section-4-block-apart-action {
    position: absolute;
    width: 23%;
    aspect-ratio: 124 / 48;
    left: 3.6%;
    top: 65%;
    border: none;
  }

  .button {
    cursor: pointer;
  }

  #block-apart-action-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-weight: 600;
    font-size: 1.3vw;
    line-height: 1vw;
    color: #396df2;
    border: 0.15vw solid #6070ff;
    border-radius: 0.6vw;
    cursor: pointer;
  }

  #block-apart-action-button:enabled {
    background: #fff;
    color: #6070ff;
    background-color: transparent;
    cursor: pointer;
    border: 0.15vw solid #396df2;
  }

  #block-apart-action-button:hover {
    background: #6070ff;
    color: #fff;
  }

  #block-apart-action-button:active {
    background: #2230d2;
    color: #fff;
  }

  /* About Myself */
  #about-myself-base {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 924;
    left: 0%;
    top: 70.4%;
    border-top-right-radius: 10vw;
    background: white;
  }

  #about-myself {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 924;
    left: 0%;
    top: 70.4%;
    border-top-right-radius: 10vw;
  }

  #about-myself-top {
    position: absolute;
    width: 31.041667%;
    aspect-ratio: 447 / 392;
    left: 9.861111%;
    top: 15.8%;
  }

  #about-myself-skill-list {
    position: absolute;
    width: 47.5%;
    aspect-ratio: 684 / 360;
    left: 42.638889%;
    top: 15.367965%;
  }

  #about-myself-top-primary-text {
    position: relative;
    width: 100%;
    aspect-ratio: 447 / 114;
    left: 0%;
    top: 0%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .about-myself-top-primary-text-1 {
    height: 100%;
    width: 100%;
    font-weight: 700;
    font-size: 2.75vw;
    line-height: 3.75vw;
    color: #172b4d;
    align-items: center;
    margin: 0;
  }

  #about-myself-top-primary-text-2 {
    position: relative;
    width: 100%;
    aspect-ratio: 447 / 102;
    left: 0%;
    top: 3.061224%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .about-myself-top-primary-text-2 {
    height: 100%;
    width: 100%;
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.65vw;
    text-align: left;
    color: #344563;
    color: black;
    margin: 0;
  }

  #about-myself-top-social-media {
    position: relative;
    width: 26.174497%;
    aspect-ratio: 117 / 24;
    left: 0%;
    top: 5.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  #about-myself-top-social-media-icons {
    position: relative;
    width: 41%;
    aspect-ratio: 170 / 20;
    left: 0%;
    top: 12%;
  }

  #social-media-icons-li {
    position: absolute;
    width: 12%;
    aspect-ratio: 170 / 20;
    left: 18%;
    top: 67.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
  }

  #social-media-icons-li-2 {
    position: absolute;
    width: 95%;
    aspect-ratio: 170 / 20;
    left: 5%;
    top: 0%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
  }

  #about-myself-top-block-apart-action {
    position: relative;
    width: 36.241611%;
    aspect-ratio: 162 / 48;
    left: 0%;
    top: 21%;
    border-radius: 0.5vw;
  }

  #about-myself-skill-list-skills {
    top: 20%;
    left: -14%;
    position: relative;
    font-weight: 500;
    font-size: 1.4vw;
    line-height: 1vw;
    color: #000;
  }

  #about-myself-skill-list-skills2 {
    height: 35.5%;
    aspect-ratio: 582 / 24;
    left: 3.3%;
    top: 36%;
    font-weight: 500;
    font-size: 1.4vw;
    line-height: 1vw;
    color: #000;
    text-align: left;
  }

  #about-myself-skill-list-frame-separator {
    width: 100%;
    height: 0.1vw;
    top: 91%;
    position: absolute;
    background: #dfe1e6;
  }

  #about-myself-skill-list-button {
    aspect-ratio: 1 / 1;
    height: 8vw;
    top: 15%;
    left: 85%;
    position: relative;
    background: transparent;
    border: none;
  }

  #about-myself-skill-list-button2 {
    width: 5.847953%;
    aspect-ratio: 1 / 1;
    left: -4%;
    top: -10%;
    background: transparent;
    border: none;
  }

  #about-myself-skill-list-frame-7 {
    position: absolute;
    width: 100%;
    aspect-ratio: 684 / 72;
    left: inherit;
    top: -5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
  }

  #about-myself-skill-list-language-list {
    width: 57%;
    aspect-ratio: 414 / 144;
    left: 2%;
    top: 17%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    gap: 3%;
  }

  .about-myself-skill-list {
    width: 92%;
    aspect-ratio: 122 / 120;
    border-radius: 0.5vw;
    background: #f7f7f9;
  }

  #about-myself-skill-list-frame-12 {
    position: absolute;
    width: 100%;
    aspect-ratio: 684 / 216;
    left: 0%;
    top: 0%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    margin: 0;
  }

  #about-myself-skill-list-frame-8 {
    position: absolute;
    width: 100%;
    aspect-ratio: 684 / 72;
    left: 0%;
    top: 50%;
  }

  #about-myself-skill-list-frame-9 {
    position: absolute;
    width: 100%;
    aspect-ratio: 684 / 72;
    left: 0%;
    top: 72%;
  }

  #about-myself-skill-list-frame-92 {
    top: 0%;
    position: relative;
  }

  #about-myself-skill-list-frame-10 {
    top: 0%;
    position: relative;
  }

  #about-myself-skill-list-frame-11 {
    top: 0%;
    position: relative;
  }

  #about-myself-skill-list-icon-1 {
    width: 40%;
    aspect-ratio: 1 / 1;
    top: 10%;
    left: 8%;
    position: relative;
    border-radius: 50%;
    background-image: url("Ellipse 3.png");
    background-size: cover;
    background-position: center;
  }

  #about-myself-skill-list-icon-2 {
    width: 40%;
    aspect-ratio: 1 / 1;
    top: 10%;
    left: 8%;
    position: relative;
    border-radius: 50%;
    background-image: url("Ellipse 2.png");
    background-size: cover;
    background-position: center;
  }

  #about-myself-skill-list-icon-3 {
    width: 40%;
    aspect-ratio: 1 / 1;
    top: 10%;
    left: 8%;
    position: relative;
    border-radius: 50%;
    background-image: url("Ellipse 1.png");
    background-size: cover;
    background-position: center;
  }

  .about-myself-skill-list-text {
    font-weight: 500;
    font-size: 1vw;
    line-height: 0vw;
    color: #000;
  }

  #about-myself-skill-list-text-1 {
    top: 20.2%;
    left: 6%;
    position: relative;
  }

  #about-myself-skill-list-text-2 {
    top: 20.2%;
    left: 6%;
    position: relative;
  }

  #about-myself-skill-list-text-3 {
    top: 20.2%;
    left: 6%;
    position: relative;
  }

  /* contact form */
  #contact-form-base {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 846;
    left: 0%;
    top: 83.5%;
    background: #6070ff;
    border-top-left-radius: 10vw;
  }

  #contact-form-shapes {
    position: absolute;
    width: 89.583333%;
    aspect-ratio: 1290 / 718;
    left: 5.208333%;
    top: 85.034146%;
    background: url("contact form background shapes.svg");
    background-size: contain, cover;
    background-position: inherit;
  }

  #contact-form-data {
    position: absolute;
    width: 100%;
    aspect-ratio: 1440 / 846;
    left: 0%;
    top: 83%;
    background: transparent;
  }

  #contact-form-data-div {
    position: absolute;
    width: 213.6%;
    aspect-ratio: 801 / 56;
    left: -56.8%;
    top: 13.22208%;
    display: grid;
    align-items: center;
    text-align: center;
    flex-grow: none;
  }

  #contact-form-data-h1 {
    position: absolute;
    width: 55.625%;
    aspect-ratio: 801 / 56;
    left: 22.222222%;
    top: 15.5%;
    height: auto;
    font-weight: 700;
    font-size: 2.77vw;
    color: #fff;
    text-align: center;
  }

  #contact-form-data-h6 {
    position: absolute;
    width: 39.513889%;
    aspect-ratio: 569 / 102;
    left: 30.277778%;
    top: 27.8%;
    font-weight: 400;
    font-size: 1.387vw;
    line-height: 2vw;
    color: #fff;
    text-align: center;
    margin: auto;
  }

  #contact-form-data-button {
    position: absolute;
    width: 32%;
    aspect-ratio: 140 / 48;
    left: 34%;
    top: 94%;
    background: white;
    border-radius: 0.7vw;
    font-weight: 500;
    font-size: 1.5vw;
    line-height: 0.5vw;
    color: #6070ff;
    text-align: center;
    margin: auto;
    border: none;
  }

  #contact-form-data-button:enabled {
    background: #fff;
    color: #6070ff;
  }

  #contact-form-data-button:hover {
    background: #6070ff;
    color: #fff;
  }

  #contact-form-data-button:active {
    background: #2230d2;
    color: #fff;
  }

  #shape {
    position: absolute;
    width: 35.733333%;
    aspect-ratio: 134 / 5;
    left: 32%;
    top: 98.331194%;
    border-radius: 1vw;
    background: #0d151e;
    background: transparent;
  }

  #survey-form {
    position: absolute;
    width: 31.041667%;
    aspect-ratio: 447 / 395;
    left: 34.513889%;
    top: 38.297872%;
  }

  #survey-form-name-input {
    position: absolute;
    width: 100%;
    aspect-ratio: 447 / 48;
    left: 0%;
    top: 6%;
    background: white;
    border-radius: inherit;
    font-weight: 400;
    font-size: 1.34vw;
    line-height: 0.5vw;
    color: #172b4d;
    padding-left: 1vw;
    border: none;
  }

  #survey-form-email-input {
    position: absolute;
    width: 100%;
    aspect-ratio: 447 / 48;
    left: 0%;
    top: 25%;
    background: white;
    border-radius: inherit;
    font-weight: 400;
    font-size: 1.34vw;
    line-height: 0.5vw;
    color: #172b4d;
    padding-left: 1vw;
    border: none;
  }

  #survey-form-message-input {
    position: absolute;
    width: 100%;
    aspect-ratio: 447 / 170;
    left: 0%;
    top: 44%;
    background: white;
    border-radius: inherit;
    font-weight: 400;
    font-size: 0.97vw;
    line-height: 0.5vw;
    color: #172b4d;
    padding: 1.5vw 3vw 1vw 1vw;
    border: none;
  }

  ::placeholder {
    color: #b3bac5;
  }

  #header-shapes-mobile {
    position: absolute;
    width: 97.013889%;
    aspect-ratio: 1397 / 721;
    left: 2.361111%;
    top: 2.321951%;
    z-index: 10;
    background: url("Header bg.svg");
    background-size: contain, cover;
    background-position: inherit;
  }
}