@media (max-width: 980px) {
  .container {
    max-width: 768px;
  }

  #experience .description {
    flex: 0 0 70%;
  }

  .cv__button {
    margin: 0 0 4.8rem;
  }

  .circle {
    width: 12rem;
    height: 12rem;
  }

  .circle2 {
    width: 15rem;
    height: 15rem;
  }

  .avatar svg {
    width: 9rem;
  }

  .avatar__container {
    gap: 4rem;
  }

  h2.title {
    font-size: 2rem;
  }

  #experience .avatar__container {
    gap: 5rem;
  }
}

@media (max-width: 768px) {
  .container,
  section {
    width: 100%;
  }

  section#about .container,
  #education .container,
  section#experience .container {
    padding: 6.4rem 3.2rem;
  }

  .avatar__container {
    display: none;
  }

  #education .description,
  #experience .description {
    flex: 0 0 100%;
  }

  footer {
    padding: 0 3.2rem 1.2rem;
  }

  #about .container {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #about .description {
    align-items: center;
  }

  .cv__button {
    margin-bottom: 2.4rem;
  }

  .contact__info {
    justify-items: space-between;
    grid-template-columns: 1fr 1fr;
  }

  .avatar img {
    width: 150px;
    height: 150px;
    margin-bottom: 3.2rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }

  .name {
    font-size: 3rem;
  }

  .gpa p {
    font-size: 1.4rem;
    color: var(--important);
  }
}

@media (max-width: 430px) {
  section#about .container {
    padding-top: 4.8rem;
  }

  .decription__text {
    letter-spacing: 0.4px;
  }

  .exp__date {
    font-size: 1.4rem;
  }

  .exp__tip {
    font-size: 1.2rem;
  }

  .edu__title svg {
    display: none;
  }
}

@media (max-width: 380px) {
  .exp__date {
    font-size: 1.2rem;
  }

  .education__entry p,
  .education__entry i {
    font-size: 1.2rem;
  }

  .copyright {
    font-size: 1rem;
  }
}

@media (max-width: 340px) {
  .name {
    font-size: 2.4rem;
  }

  .description,
  .nav li a {
    font-size: 1.4rem;
  }

  .edu__title,
  .exp__entry h3 {
    font-size: 1.6rem;
  }
}

/*FONT SIZE SYSTEM (px)*/
/*10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98*/

/*SPACING SYSTEM (px)*/
/*2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128*/