html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

body {
  width: 100%;
  background-color: #151515;
  color: #ffffff;
  position: relative; }

main {
  padding: 0 16.5rem;
  overflow: hidden; }
  @media screen and (max-width: 1280px) {
    main {
      padding: 0 8rem; } }
  @media screen and (max-width: 890px) {
    main {
      padding: 0 3.2rem; } }
  @media screen and (max-width: 690px) {
    main {
      padding: 0 1.6rem; } }

.hidden {
  display: none; }

body {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.8rem; }

.heading-xl {
  font-size: 8.8rem;
  font-weight: bold;
  line-height: 8.8rem;
  letter-spacing: -2.5px; }
  @media screen and (max-width: 1280px) {
    .heading-xl {
      font-size: 6.4rem;
      line-height: 6.4rem; } }
  @media screen and (max-width: 890px) {
    .heading-xl {
      line-height: 7.2rem;
      font-size: 7.2rem;
      letter-spacing: -2.05px; } }
  @media screen and (max-width: 690px) {
    .heading-xl {
      line-height: 5.8rem;
      font-size: 5.8rem;
      letter-spacing: -1.5px; } }
  @media screen and (max-width: 560px) {
    .heading-xl {
      line-height: 4rem;
      font-size: 4rem;
      letter-spacing: -1.14px; } }

.heading-l {
  font-size: 4.8rem;
  font-weight: bold;
  line-height: 5.6rem;
  letter-spacing: -1.5px; }
  @media screen and (max-width: 1280px) {
    .heading-l {
      font-size: 4rem; } }
  @media screen and (max-width: 690px) {
    .heading-l {
      font-size: 3.2rem;
      line-height: 4rem;
      letter-spacing: -1px; } }
  @media screen and (max-width: 560px) {
    .heading-l {
      font-size: 3.2rem;
      line-height: 4rem;
      letter-spacing: -1px; } }

.heading-m {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3.2rem; }
  @media screen and (max-width: 1280px) {
    .heading-m {
      font-size: 2rem; } }
  @media screen and (max-width: 690px) {
    .heading-m {
      font-size: 1.8rem; } }
  @media screen and (max-width: 690px) {
    .heading-m {
      font-size: 2.6rem; } }

.logo {
  font-size: 3.2rem; }
  @media screen and (max-width: 560px) {
    .logo {
      font-size: 2.4rem; } }

p {
  color: #d9d9d9;
  font-size: 1.8rem;
  line-height: 2.8rem; }
  @media screen and (max-width: 1280px) {
    p {
      font-size: 1.6rem; } }

.error-message {
  font-size: 1.4rem;
  font-weight: 500;
  color: #ff6f5b; }

.projects-skills span {
  font-weight: 300; }
  @media screen and (max-width: 1280px) {
    .projects-skills span {
      font-size: 1.6rem; } }
  @media screen and (max-width: 690px) {
    .projects-skills span {
      font-size: 1.4rem; } }
  @media screen and (max-width: 560px) {
    .projects-skills span {
      font-size: 1.8rem; } }

.btn {
  font-size: 1.5rem;
  font-weight: 400; }

header {
  margin: 0 16.5rem;
  position: relative;
  display: grid;
  grid-template-columns: 60% 40%; }
  @media screen and (max-width: 1280px) {
    header {
      margin: 0 8rem; } }
  @media screen and (max-width: 890px) {
    header {
      grid-template-columns: 58% 42%;
      margin: 0; } }
  @media screen and (max-width: 560px) {
    header {
      margin: 0 auto;
      width: 100%;
      grid-template-columns: 1fr;
      overflow: hidden;
      padding: 1.6rem; } }

.header-col--2 {
  position: relative; }
  @media screen and (max-width: 890px) {
    .header-col--2 {
      overflow: hidden; } }
  @media screen and (max-width: 560px) {
    .header-col--2 {
      margin: 0 auto;
      overflow: visible;
      text-align: center; } }

.logo-top {
  position: absolute;
  top: 3.9rem;
  left: 0;
  z-index: 999; }
  @media screen and (max-width: 890px) {
    .logo-top {
      left: 3.2rem; } }
  @media screen and (max-width: 560px) {
    .logo-top {
      top: 2rem;
      left: 50%;
      transform: translateX(-50%); } }

.social-media-top {
  position: absolute;
  top: 4.3rem;
  right: 0;
  display: flex;
  gap: 3.2rem;
  margin-right: 2.8rem;
  z-index: 999; }
  @media screen and (max-width: 560px) {
    .social-media-top {
      top: 7.2rem;
      margin-right: 0;
      justify-content: space-around;
      gap: 2rem;
      left: 50%;
      transform: translateX(-50%) scale(0.8); } }

.profile-img {
  width: 100%;
  height: 100%; }
  @media screen and (max-width: 560px) {
    .profile-img {
      position: relative;
      max-width: 46%;
      height: auto; } }

.about {
  position: absolute;
  top: 19.8rem;
  left: 0;
  width: 64%;
  z-index: 999; }
  @media screen and (max-width: 1280px) {
    .about {
      top: 15rem; } }
  @media screen and (max-width: 890px) {
    .about {
      left: 3.2rem; } }
  @media screen and (max-width: 560px) {
    .about {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 4rem 0; } }
  .about p {
    display: block;
    width: 44.5rem;
    margin-top: 4.3rem;
    padding-right: 2rem; }
    @media screen and (max-width: 890px) {
      .about p {
        margin-top: 7rem;
        margin-bottom: 2rem;
        padding-right: 6rem; } }
    @media screen and (max-width: 690px) {
      .about p {
        font-size: 1.6rem;
        margin-top: 4rem;
        padding-right: 6rem; } }
    @media screen and (max-width: 560px) {
      .about p {
        width: 100%;
        padding-right: 0;
        margin: 4rem 0; } }

.name {
  border-bottom: 6px solid #4ee1a0; }

footer {
  background-color: #242424;
  padding: 8.4rem 16.5rem 9.2rem 16.5rem; }
  @media screen and (max-width: 1280px) {
    footer {
      padding: 8.4rem 8rem 9.2rem 8rem; } }
  @media screen and (max-width: 890px) {
    footer {
      padding: 6rem 3.2rem 4rem 3.2rem; } }
  @media screen and (max-width: 560px) {
    footer {
      padding: 6rem 1.6rem 4rem 1.6rem; } }

.contact-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 9.2rem;
  border-bottom: 1px solid #d9d9d9; }
  @media screen and (max-width: 890px) {
    .contact-box {
      flex-direction: column;
      align-items: center;
      text-align: center; } }
  .contact-box-info {
    width: 40%; }
    @media screen and (max-width: 1280px) {
      .contact-box-info {
        width: 45%; } }
    @media screen and (max-width: 890px) {
      .contact-box-info {
        width: 58%;
        margin-bottom: 4.8rem; } }
    @media screen and (max-width: 560px) {
      .contact-box-info {
        width: 100%; } }
  .contact-box-heading {
    margin-bottom: 3.6rem; }

form {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.2rem; }
  @media screen and (max-width: 1280px) {
    form {
      width: 45%; } }
  @media screen and (max-width: 890px) {
    form {
      width: 58%; } }
  @media screen and (max-width: 560px) {
    form {
      width: 100%; } }
  form div {
    width: 100%;
    position: relative; }
    form div input,
    form div textarea {
      font-family: inherit;
      width: 100%;
      background-color: #242424;
      color: #ffffff;
      font-size: 1.6rem;
      font-weight: medium;
      padding-bottom: 1.6rem;
      padding-left: 2.4rem;
      border: none;
      border-bottom: 1px solid #d9d9d9;
      outline: none; }
      form div input:valid,
      form div textarea:valid {
        border-bottom: 1px solid #4ee1a0; }
      form div input:invalid,
      form div textarea:invalid {
        border-bottom: 1px solid #d9d9d9; }

.error-message {
  position: absolute;
  right: 0;
  bottom: -2.4rem; }

.error-icon {
  position: absolute;
  right: 0;
  bottom: 1.6rem;
  width: 2.4rem;
  color: #ff6f5b;
  fill: #ff6f5b; }

.footer-bar {
  margin-top: 4.7rem;
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 560px) {
    .footer-bar {
      flex-direction: column;
      gap: 2rem;
      align-items: center; } }

.social-media-bottom {
  display: flex;
  gap: 3.2rem; }

.section-skills {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5rem;
  margin-top: 10.4rem;
  border-top: 1px solid #d9d9d9; }
  @media screen and (max-width: 890px) {
    .section-skills {
      grid-template-columns: repeat(2, 1fr); } }
  @media screen and (max-width: 560px) {
    .section-skills {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      margin-top: 4rem;
      padding-top: 1.6rem;
      padding-bottom: 4rem;
      border-bottom: 1px solid #d9d9d9; } }

.heading-skills {
  margin-top: 6.5rem;
  margin-bottom: 1.4rem; }
  @media screen and (max-width: 560px) {
    .heading-skills {
      margin-top: 2.3rem;
      margin-bottom: 0; } }

.section-projects {
  margin-top: 14rem;
  margin-bottom: 15rem;
  max-width: 100%; }
  @media screen and (max-width: 560px) {
    .section-projects {
      margin-top: 8rem; } }

.projects-heading {
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 560px) {
    .projects-heading {
      margin-bottom: 4rem; } }

.projects-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem; }
  @media screen and (max-width: 560px) {
    .projects-container {
      grid-template-columns: 1fr; } }

.projects-item-img {
  position: relative; }
  .projects-item-img img {
    width: 100%; }

.projects-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 3.9rem; }
  @media screen and (min-width: 561px) {
    .projects-item-text--1 {
      grid-row-start: 2; }
    .projects-item-text--2 {
      grid-row-start: 2; }
    .projects-item-text--3 {
      grid-row-start: 4; }
    .projects-item-text--4 {
      grid-row-start: 4; }
    .projects-item-text--5 {
      grid-row-start: 6; }
    .projects-item-text--6 {
      grid-row-start: 6; } }
  @media screen and (max-width: 560px) {
    .projects-item-text {
      margin-bottom: 0.8rem; } }

.projects-btn-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.8rem;
  transition: all 0.3s; }
  @media screen and (max-width: 890px) {
    .projects-btn-box {
      display: none; } }

.projects-btn-box-small {
  display: none; }
  @media screen and (max-width: 890px) {
    .projects-btn-box-small {
      display: block;
      margin-top: 1.3rem; } }
  @media screen and (max-width: 890px) {
    .projects-btn-box-small .btn {
      display: inline-block; } }
  .projects-btn-box-small .btn:first-child {
    margin-right: 3rem; }

.projects-title {
  text-transform: uppercase; }

.projects-skills span {
  display: inline-block;
  margin-right: 2rem;
  text-transform: uppercase; }

.btn {
  text-transform: uppercase;
  background-color: transparent;
  border: none;
  letter-spacing: 2.29px;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid #4ee1a0;
  cursor: pointer; }
  @media screen and (max-width: 690px) {
    .btn {
      font-size: 1.2rem;
      letter-spacing: 1.2px;
      padding-bottom: 1rem; } }
  @media screen and (max-width: 560px) {
    .btn {
      font-size: 1.6rem;
      letter-spacing: 2.29px;
      line-height: 2.6rem; } }
  .btn--1 {
    display: inline-block;
    margin-top: 6.6rem; }
    @media screen and (max-width: 1280px) {
      .btn--1 {
        margin-top: 3rem; } }
  .btn--2 {
    display: inline-block;
    margin-top: 2.5rem;
    margin-bottom: 10.5rem;
    align-self: end; }
    @media screen and (max-width: 560px) {
      .btn--2 {
        margin: 0; } }
  .btn--form {
    color: #ffffff;
    display: inline-block; }
    .btn--form:hover, .btn--form:active {
      color: #4ee1a0; }

a:link, a:visited {
  color: #ffffff;
  text-decoration: none; }

a:hover, a:active {
  color: #4ee1a0; }

#rings--1 {
  position: absolute;
  top: 13.3rem;
  left: -10rem; }
  @media screen and (max-width: 890px) {
    #rings--1 {
      top: 8.6rem;
      left: -26.5rem; } }
  @media screen and (max-width: 560px) {
    #rings--1 {
      top: 12.4rem;
      left: -34.2rem; } }

#rings--2 {
  position: absolute;
  top: 25.3rem;
  right: -40.4rem; }
  @media screen and (max-width: 890px) {
    #rings--2 {
      top: 38.7rem;
      right: -40.4rem; } }
  @media screen and (max-width: 560px) {
    #rings--2 {
      top: 54rem;
      right: -34.4rem; } }

#rings--3 {
  position: absolute;
  bottom: 21.9rem;
  left: -20.5rem; }
  @media screen and (max-width: 890px) {
    #rings--3 {
      bottom: 15rem;
      left: -36.8rem; } }
  @media screen and (max-width: 560px) {
    #rings--3 {
      bottom: 26.9rem;
      left: -36.8rem; } }

#circle {
  position: absolute;
  bottom: 7rem;
  left: -6.45rem; }
  @media screen and (max-width: 890px) {
    #circle {
      bottom: 0;
      left: 25.64rem; } }
  @media screen and (max-width: 560px) {
    #circle {
      bottom: 0;
      left: 30rem;
      z-index: 9999; } }

.social-media-icon:hover path,
.social-media-icon:focus path {
  fill: #4ee1a0; }