html, body {
  background-color: #282C33;
  font-family: Firacode;
  font-size: 16px;
}

.wrapper {
  overflow: hidden;
}

.container {
  max-width: 1150px;
  margin: auto;
  padding: 32px 61.5px 8px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  white-space: nowrap;
}

.logo {
  padding-right: 32px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.okto {
  color: #C778DD;
}

.navlist {
  display: flex;
  gap: 32px;
  flex-direction: row;
  justify-content: space-between;
}

.active {
  color: white;
  font-weight: 500;
}

.navlink {
  font-weight: 400;
  color: #ABB2BF;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.navlink:hover {
  color: #C778DD;
}

.media {
  position: fixed;
  width: 32px;
  height: 311px;
  top: 0px;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.medialink {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.medialink:hover {
  transform: scale(1.05)
}

.logo:hover {
  transform: scale(1.05)
}

.main {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 62px 0px 0px;
}

.maintext {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 18px;
}

.text1 {
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  color: white;
  padding-top: 74px;
}

.text2 {
  font-weight: 400;
  line-height: 25px;
  color: #ABB2BF;
  padding-top: 32px;
  padding-bottom: 32px;
}

.text3 {
  font-weight: 500;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  width: 148px;
  height: 37px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;

  border: 1px solid #C778DD;
}

.text3:hover {
  transform: scale(1.05);
  background: rgba(199, 120, 221, 0.2);
}

.headerimg {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.headerimg-elias {}

.headerimgtextbox {
  box-sizing: border-box;

  width: 16px;
  height: 16px;
  margin-right: 10px;
  background: #C778DD;
  border: 1px solid #C778DD;
}

.headerimgtext {
  margin-left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-weight: 500;
  color: #ABB2BF;
  padding-left: 8px;
  width: 402px;
  height: 37px;
  border: 1px solid #ABB2BF;
}

.clr_f {
  color: #C778DD;
}

.clr_w {
  color: white;
}

.headerimgtextlink {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.headerimgtextlink:hover {
  color: #C778DD;
}

.mainquote {
  display: flex;
  flex-direction: column;
  align-self: center;
  max-width: 735px;
  min-width: 200px;
  padding-top: 112px;
  margin: auto;
}

.mainquotetext {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divquotetext {
  display: flex;
  max-width: 735px;
  min-width: 200px;
  min-height: 95px;
  border: 1px solid #ABB2BF;
  justify-content: center;
  align-items: center;


}

.divquotetexttext {
  max-width: 734;
  min-height: 35;
  display: flex;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  color: #FFFFFF;
  flex: auto;
  order: 0;
}

.mainquoteimg {
  position: relative;
  top: 48px;
  right: 20px;
}

.mainquoteimg1 {
  position: relative;
  bottom: 45px;
  left: 20px;
}

.mainquotetextautor {
  width: 162px;
  height: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  align-self: flex-end;
  border: 1px solid #ABB2BF;

  color: #FFFFFF;
}

.projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1027px;
  min-height: 518px;
  padding-top: 74px;
}

.projectsheader {
  max-width: 1027px;
  height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: #FFFFFF;
}

.projectsline {
  width: 511px;
  height: 1px;

  margin-left: 16px;
  margin-right: 16px;
  background: #C778DD;
}

.projectsviewall {
  width: 116px;
  height: 21px;
  margin-left: auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: white;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.projectsviewall:hover {
  color: #C778DD;
  transform: scale(1.05);
}

.projectsmain {
  margin-top: 48px;
  max-width: 1027px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.projectobject {
  margin-right: 16px;
  height: 391px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ABB2BF;
}

.projectobject1 {
  margin-right: 16px;
  height: 428px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ABB2BF;
}

.projectobject2 {
  height: 422px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ABB2BF;
}

.projectimg {
  width: 330.58px;
  height: 201px;
}

.projecttext {
  font-weight: 400;
  font-size: 16px;
  line-height: 37px;
  margin-left: 8px;

  color: #ABB2BF;

}

.projectbuttonandname {
  width: 330.58px;
  border-top: 1px solid #ABB2BF;
}

.projectname {
  margin: 16px;
  margin-top: 16px;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  color: #FFFFFF;
}

.projectnametext {
  margin: 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
}

.projectbuttons {
  display: flex;
  flex-direction: row;
}

.projectbutton {
  width: 109px;
  height: 37px;
  margin: 16px;
  margin-left: 16px;
  margin-right: 0px;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #C778DD;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.projectbutton2 {
  width: 109px;
  height: 37px;
  margin: 16px;
  margin-left: 16px;
  margin-right: 0px;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ABB2BF;
  color: #ABB2BF;
  font-weight: 500;
  font-size: 16px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.projectbutton:hover {
  transform: scale(1.05);
  border: 1px solid #C778DD;
  background: rgba(199, 120, 221, 0.2);
}

.projectbutton2:hover {
  transform: scale(1.05);
  border: 1px solid #C778DD;
  background: rgba(199, 120, 221, 0.2);
}

.skills {
  display: flex;
  flex-direction: row;
  padding-top: 106px;
}

.skillstittle {
  max-width: 391px;
  height: 381px;
  margin-right: 49px
}

.skilstittletext {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.skillsline {
  width: 239px;
  height: 1px;
  margin-left: 16px;
  background: #C778DD;
}

.skillsinfo {
  width: 584px;
  height: 280px;
  display: grid;
  grid-template-columns: 178px 178px 196px;
  grid-gap: 16px;
  margin-top: 69px;
}

.skillsinfotittle {
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  margin: 8px;
  color: #FFFFFF;
}

.skillsinfotext {
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  padding-left: 8px;
  padding-top: 4px;
  margin-bottom: 4px;
  padding-right: 8px;
  color: #ABB2BF;
  border-top: 1px solid #ABB2BF;
}

.skillsbox {
  margin-top: 16px;
  border: 1px solid #ABB2BF;
}

.about-me {
  display: flex;
  flex-direction: row;
  padding-top: 106px;
}

.about-metittle {
  max-width: 515px;
  height: 316px;
  margin-right: 166px
}

.about-metittletext {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.about-meline {
  width: 239px;
  height: 1px;
  margin-left: 16px;
  background: #C778DD;
}

.about-meinfo {
  width: 515px;
  height: 252px;
  margin-top: 48px;
}

.top {
  padding-top: 21px;
}

.about-meinfotext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;

  color: #ABB2BF;
}

.about-mebutton {
  width: 148px;
  height: 37px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ABB2BF;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.about-mebutton:hover {
  transform: scale(1.05);
  border: 1px solid #C778DD;
  background: rgba(199, 120, 221, 0.2);
}

.about-meimg {
  width: 339px;
  height: 507px;
}

.contacts {
  display: flex;
  flex-direction: row;
  padding-top: 112px;
  max-width: 1023px;
  min-height: 228px;
}

.contactstittle {
  max-width: 505px;
  height: 150px;
  margin-right: 311px;
}

.contactsline {
  width: 127px;
  height: 1px;
  margin-left: 16px;
  background: #C778DD;
}

.contactstittletext {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 12px;

}

.contactsinfo {
  margin-top: 45px;
  width: 505px;
  height: 63px;
}

.contactsinfotext {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;

  color: #ABB2BF;
}

.contactslinks {
  width: 204px;
  height: 141px;
  margin-top: 87px;
  border: 1px solid #ABB2BF;
}

.contactslinktext {
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  color: #FFFFFF;
  margin: 16px;

}

.contactslink {
  display: flex;
  align-items: center;
  margin-left: 16px;
  width: 200px;
  height: 32px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
}

.contactslinkimgtext {
  margin-left: 5px;
  width: 135px;
  height: 21px;
}

.contactslink:first-child {
  margin-bottom: 8px;
}

.footer {
  max-width: 100%;
  height: 222px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 131px;
  border-top: 1px solid #ABB2BF;
}

.footerframe {
  max-width: 1025px;
  height: 158px;
  display: flex;
  flex-direction: column;
}

.footersection {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 437px;

}

.footerinfo {
  width: 476px;
  height: 89px;
}

.footerlogo {
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 272px;
  height: 31px;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
}

.footerinfotext {
  padding-top: 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #FFFFFF;
}

.footercopyright {
  max-width: 1025px;
  height: 21px;
  display: flex;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  padding-top: 48px;
  color: #ABB2BF;
}

.footermedia {
  width: 113px;
  height: 75px;
  display: flex;
  flex-direction: column;
}

.footermediatittle {
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;

  color: #FFFFFF;
}

.footermedialogos {
  display: flex;
  flex-direction: row;
  padding-top: 12px;
  gap: 8px;
}

.skillsimg {
  width: 349px;
  height: 282px;
}

.workstittle {
  margin-top: 53px;
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  color: #FFFFFF;
  margin-bottom: 68px;
}

.workstittletext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #FFFFFF;
}

.complete-apps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.complete-appstittle {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: #FFFFFF;

}

.projectobject3 {
  height: 391px;
  display: flex;
  flex-direction: column;
  margin-right: 16px;
  border: 1px solid #ABB2BF;
}

.projectobject4 {
  height: 391px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ABB2BF;
  margin-right: 345px;
}

.projectsmain2 {
  margin-top: 16px;
  max-width: 1027px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.small-projects {
  padding-top: 81px;
}

.small-projectstittle {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  padding-bottom: 48px;
  color: #FFFFFF;
}

.small-projectsinfo {
  display: grid;
  grid-template-columns: 331px 331px 331px;
  gap: 16px;

}

.small-project {
  width: 331px;
  height: min-content;
  border: 1px solid #ABB2BF;
}

.small-projectplusinf {
  display: flex;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  padding: 8px;
  align-items: center;
  width: 331px;
  color: #ABB2BF;
}

.small-projecttittle {
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  padding: 16px;
  padding-bottom: 0px;
  color: #FFFFFF;
  width: 330px;
  border-top: 1px solid #ABB2BF;
}

.small-projecttext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  padding: 16px;
  color: #ABB2BF;
}

.heroabout-me {
  display: flex;
  flex-direction: column;
  padding-top: 53px;
}

.heroabout-metittle {
  display: flex;
  font-weight: 600;
  font-size: 32px;
  color: #FFFFFF;
  padding-bottom: 14px;
}

.heroabout-metittletext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;

  color: #FFFFFF;
}

.heroabout-meinfo {
  display: flex;
  flex-direction: row;
  padding-top: 8px;
  align-items: center;
  gap: 170px;
}

.heroabout-meinfotext {
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  width: 515px;
  height: 300px;
  color: #ABB2BF;
}

.about-meskills {
  display: flex;
  flex-direction: column;
  padding-top: 112px;
}

.aboutme-skillstittle {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;

  color: #FFFFFF;
}

.about-meskillsinfo {
  display: grid;
  grid-template-columns: 192px 192px 192px 192px 192px;
  gap: 16px;
  padding-top: 48px;
}

.about-meskillsinfogrid {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  height: min-content;
  color: #ABB2BF;
  border: 1px solid #ABB2BF;
}

.about-meskillsinfotexttittle {
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  border-bottom: 1px solid #ABB2BF;
  color: #FFFFFF;
  padding: 8px;
}

.about-meskillsinfotext {
  padding: 8px;
}

.my-fun-facts {
  display: flex;
  flex-direction: column;
  padding-top: 83px;
  padding-bottom: 17px;
}

.my-fun-factstittle {
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;

  color: #FFFFFF;
}

.my-fun-factsinf {
  display: flex;
  flex-direction: row;
  gap: 137px;
  padding-top: 26px;
}

.my-fun-factsinfo {
  width: 630px;
  height: 196px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.my-fun-factsinfotext {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.my-fun-factstext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
  padding: 8px;
  border: 1px solid #ABB2BF;
  width: max-content;
}

.contactshero {
  padding-top: 53px;
}

.contactsherotittle {
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;

  color: #FFFFFF;
}

.contactsherotittletext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  padding-top: 14px;
  color: #FFFFFF;
}

.contactsheroinfo {
  display: flex;
  flex-direction: row;
  padding-top: 43px;
}

.contactsherotext {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
  width: 505px;
  height: 63px;
  margin-right: 117px;
}

.contactsherotext1 {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ABB2BF;
  padding: 16px;
  padding-top: 0px;
  white-space: nowrap;
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ABB2BF;
}

.contactsherotexttittle {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #FFFFFF;
  padding: 16px;
  padding-bottom: 8px;
}

.contactsherotext2 {
  padding: 16px;
  padding-top: 0px;
  padding-bottom: 8px;
  white-space: nowrap;
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: column;
  border: 1px solid #ABB2BF;
  margin-left: 11px;

}

.contactsherolink {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 172px;
  height: 32px;
  padding-bottom: 8px;
  transition: 0.5s;
}
.contactsherolink:hover {
  color: #FFFFFF;
  transform: scale(1.03);
}
.contactsherolinktext {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  padding-left: 5px;
  color: #ABB2BF;
}
.contacts-allmedia {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
}
.contacts-allmediatittle {
  font-weight: 500;
font-size: 32px;
line-height: 42px;
color: #FFFFFF;
padding-bottom: 22px
}
.contacts-allmedialink {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: 0.5s;
}
.contacts-allmedialink:hover {
  color: #FFFFFF;
  transform: scale(1.03);
}
.contacts-allmedialinktext {
  font-weight: 400;
font-size: 16px;
line-height: 21px;
color: #ABB2BF;
margin-left: 5px;
}

/* -------------------------------------------------------- */
@media (max-width:1080px) {
  .container {
    max-width: 768px;
    margin: auto;
    padding: 32px 64px 8px;
  }

  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }

  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 62px 0px 0px;
  }

  .navlist {
    display: flex;
    padding-top: 32px;
    gap: 32px;
    flex-direction: row;
    justify-content: space-between;
  }

  .projects {
    padding-top: 0px;
  }

  .projectsmain {
    margin-top: 48px;
    max-width: 1023.74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .projectobject {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectobject1 {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectobject2 {
    max-width: 331px;
    margin-bottom: 16px;
  }

  .projectobject3 {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectobject4 {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectsmain2 {
    margin-top: 0px;
    max-width: 1023.74px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .skills {
    display: flex;
    flex-direction: column;
    padding-top: 0px;
  }

  .skillsinfo {
    margin-top: 0px;
  }

  .about-me {
    flex-direction: column;
    height: auto;
    padding-top: 70px;
  }

  .about-meimg {
    margin-top: 100px;
  }

  .contacts {
    flex-direction: column;
  }

  .footersection {
    flex-direction: column;
    gap: 0px;
    align-items: center;
  }

  .footercopyright {
    padding-top: 0px;
  }

  .footerinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
  }

  .footerinfotext {
    padding-top: 4px;
    display: flex;
    width: 280px;
    justify-content: center;
  }

  .footermedialogos {
    padding-top: 4px;
  }

  .footermediatittle {
    display: flex;
    justify-content: center;
  }
}

@media (max-width:420px) {
  .container {
    max-width: 420px;
    margin: auto;
    padding: 32px 64px 8px;
  }

  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }

  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 0px 0px;
  }

  .navlist {
    display: flex;
    padding-top: 32px;
    gap: 32px;
    flex-direction: row;
    justify-content: space-between;
  }

  .headerimg {
    transform: scale(0.6);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .navlist {
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 12px;
  }

  .media {
    transform: scale(0.8);
    position: fixed;
    width: 32px;
    height: 311px;
    top: -32px;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .text1 {
    font-weight: 600;
    font-size: 30px;
    line-height: 42px;
    color: white;
    padding-top: 0px;
  }

  .logo {
    padding-left: 26px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .divquotetexttext {
    display: flex;
    font-weight: 500;
    font-size: 12px;
    line-height: 31px;
    color: #FFFFFF;
    flex: auto;
    order: 0;
  }

  .mainquotetextautor {
    width: 162px;
    height: 63px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 31px;
    align-self: flex-end;
    border: 1px solid #ABB2BF;

    color: #FFFFFF;

  }

  .projects {
    padding-top: 0px;
    width: 270px;
  }

  .projectsheader {
    width: 240px;
  }

  .projectsmain {
    margin-top: 48px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .projectobject {
    width: 270px;
  }

  .projectimg {
    width: 270px;
    height: auto;
  }

  .projectbuttonandname {
    width: 270px;
  }

  .projectobject {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectobject1 {
    max-width: 331px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .projectobject2 {
    max-width: 331px;
    margin-bottom: 16px;
  }

  .contactsinfotext {
    width: 240px;
  }

  .footer {
    margin-top: 20px;
  }

  .about-meinfotext {
    width: 240px;
    height: auto;
  }

  .about-metittle {
    width: 240px;
    height: 670px;
    display: flex;
    flex-direction: column;
  }

  .about-meimg {
    width: 240px;
    height: auto;
    margin-top: 0px;
  }

  .about-mebutton {
    margin-top: 250px;
  }

  .about-meline {
    width: auto;
  }

  .skillsline {
    width: auto;
  }

  .skillsinfo {
    width: 584px;
    height: 700px;
    display: grid;
    grid-template-columns: 200px;
    grid-template-rows: 130px 240px 240px;
    grid-gap: 4px;
    margin-top: 0px;
    justify-content: start;
  }

  .skillsimg {
    width: 240px;
    height: 195px;
    margin-bottom: 16px;
  }

  .skilstittletext {
    width: 240px;
  }

  .skillstittle {
    height: auto;
  }

  .contacts {
    padding-top: 64px;
  }

  .footerframe {
    transform: scale(0.75);
  }

  .footercopyright {
    transform: scale(0.75);
  }
}