a#about {
  position: relative;
  top: -200px;
}

a#portfolio {
  position: relative;
  top: 50px;
}
section.about {
  margin: 100px 0 0;
}

section.about .container,
section.tech-projects .container,
section.design-projects .container,
section.contact .container {
  width: var(--content-width);
}

section.about .container,
section.tech-projects .container,
section.tech-projects .headline,
section.design-projects .container,
section.design-projects .headline,
section.contact .container {
  margin: auto;
}

section.about .container,
section.tech-projects .headline,
.portfolio .projects-container,
.portfolio .project .details,
.portfolio .project .details .description .links ul,
section.contact .container,
section.contact .headline {
  display: flex;
}

section.about {
  margin-top: 56px;
}

section.about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.about .image {
  display: flex;
  justify-content: center;
}

section.about .image img {
  width: 274px;
}

section.about .headline {
  margin-top: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.about .btns-container {
  justify-content: center;
  width: 100%;
}

.project .description .tools {
  margin-top: 16px;
  color: grey;
}

section.about .container,
.portfolio .project .details {
  justify-content: space-between;
}

section.about .container,
section.contact .container {
  align-items: center;
}

section.about .personal-info {
  width: 500px;
}

section.about .personal-info .headline p {
  width: 92%;
}

section.about .personal-info .headline p,
section.tech-projects .headline p,
section.design-projects .headline p,
.portfolio .project .details .description .links ul,
section.contact .headline p {
  margin: 16px 0 0;
}

section.about .btns-container,
.portfolio .project .details,
section.contact .btns-container {
  margin: 32px 0 0;
}

section.about .image,
section.tech-projects .headline,
section.design-projects .headline {
  width: 40%;
}

.portfolio .project .image img {
  /* box-shadow: 0px 0px 4px rgb(201, 201, 201); */
}

.portfolio .project .image img {
  width: 100%;
}

section.tech-projects,
section.design-projects,
section.contact {
  margin: 180px 0 0;
}

section.tech-projects .headline,
section.design-projects .headline,
section.contact .headline {
  text-align: center;
}

section.tech-projects .headline,
.portfolio .projects-container,
section.contact .container,
section.contact .headline {
  flex-flow: column wrap;
}

.portfolio .projects-container {
  gap: 100px;
}

.portfolio .projects-container,
.portfolio .btns-container {
  margin: 64px 0 0;
}

.portfolio .project .image img {
}

.portfolio .project .details .intro,
.portfolio .project .details .description,
section.contact .headline {
  width: 44%;
}

.portfolio .project .details .description .links ul {
  gap: 16px;
  list-style: none;
}

.portfolio .btns-container,
section.contact .container {
  justify-content: center;
}

.portfolio .btns-container,
.about .btns-container {
  width: 100%;
}

section.contact {
  background-color: #f6f6f6;
}

section.contact .container {
  height: 480px;
}

.contact .btns-container {
  width: var(--content-width);
  justify-content: center;
}

.portfolio .image img {
  box-shadow: 0px 0px 2px rgb(175, 175, 175);
}

/* breakpoints */

@media screen and (max-width: 1920px) {
}

@media screen and (max-width: 1680px) {
  section.about {
    margin-top: 80px;
  }
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1080px) {
  section.about {
    margin-top: 56px;
  }
}

@media screen and (max-width: 960px) {
  section.about .image img {
    width: 240px;
  }

  section.about .headline {
    margin-top: 36px;
  }

  section.about {
    margin-top: 48px;
  }
}

@media screen and (max-width: 720px) {
  section.about .image {
    width: 412px;
  }
  section.about .container {
    flex-direction: column;
  }

  section.tech-projects,
  section.design-projects,
  section.contact {
    margin-top: 120px;
  }

  section.tech-projects .headline,
  section.design-projects .headline {
    width: 320px;
  }

  .portfolio .project .details {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .portfolio .project .details .intro {
    width: 100%;
  }
  .portfolio .project .details .description {
    width: 100%;
  }

  section.contact .headline {
    width: 340px;
  }
}

@media screen and (max-width: 600px) {
  section.about .image img {
    width: 200px;
  }

  section.about .headline {
    margin-top: 20px;
  }

  section.about .personal-info {
    width: 100%;
  }

  .portfolio .project .details {
    margin-top: 24px;
  }

  section.contact .container {
    justify-content: center;
    align-items: center;
  }
  section.contact .btns-container {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  section.about {
    margin-top: 36px;
  }
  section.about .personal-info,
  section.about .image {
    width: 100%;
  }
  section.about .container {
    flex-direction: column;
  }

  section.tech-projects .headline,
  section.design-projects .headline {
    width: 100%;
  }

  section.contact .headline {
    width: 88%;
  }
}

@media screen and (max-width: 425px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
}

@media screen and (max-width: 280px) {
}

@media screen and (max-width: 240px) {
}