/* 1024px breakpoint */
@media screen and (max-width: 1024px) {
  html {
    font-size: 52%;
  }
}

@media screen and (max-width: 768px) {
  .cv-container {
    flex-direction: column;
  }

  .left-container {
    width: 100%;
    margin-top: 10rem;
    position: relative;
    background-color: rgb(237, 237, 237);
    color: #000;
  }

  .personal-info {
    flex-flow: row wrap;
    justify-content: center;
    gap: 4rem;
  }

  .white-line {
    background-color: #000;
  }

  .header {
    width: 100%;
    position: fixed;
    top: 0;
  }

  .footer {
    width: 100%;
  }

  .icon--dark {
    display: block;
  }

  .icon--light {
    display: none;
  }

  .contact-link a:link {
    color: #000;
  }

  .contact-link a:hover {
    color: #000;
  }

  .contact-link a:visited {
    color: #000;
  }

  .contact-link a:active {
    color: #000;
  }
}

/* 1024px breakpoint */
@media screen and (max-width: 560px) {
  .nav-icon {
    display: block;
    width: 2.2rem;
  }

  .nav-text {
    display: none;
  }

  .personal-info {
    gap: 2rem;
  }

  .main-content {
    padding: 0 2rem;
  }

  .footer {
    flex-direction: column;
    height: 15rem;
  }
}