/* **************************** */
/* BELOW 1800PX */
/* **************************** */

@media (max-width: 112.5em) {
  .hero-grid {
    /* height: 85vh; */
    grid-template-columns: 0.18fr 1.2fr 1fr;
  }

  .summary {
    font-size: 4rem;
    margin-right: 15rem;
  }
}

/* **************************** */
/* BELOW 1340PX  */
/* **************************** */
@media (max-width: 86em) {
  .grid {
    width: 105rem;
  }

  .popuptext-edu {
    width: 55rem;
  }

  .edu-line {
    font-size: 1.8rem;
  }

  .edu-subhead {
    font-size: 1.8rem;
  }

  .nav-bar:hover .nav-text {
    display: none;
  }

  .hide-icon {
    display: none;
  }

  .show-icon {
    display: block;
  }

  .nav-bar:hover {
    width: 7.5rem;
  }

  .hover {
    display: none;
  }

  .click {
    display: inline-block;
  }
}
/* **************************** */
/* BELOW 1200PX */
/* **************************** */
@media (max-width: 75em) {
  .main-img {
    grid-column: 2/3;
    width: 62%;
    margin-top: 6rem;
  }

  .hero-grid {
    grid-template-columns: 0.13fr 1fr;
    row-gap: 10rem;
  }

  .summary {
    justify-self: center;
    grid-row: 2/3;
    margin-right: 10rem;
    width: 75%;
    padding: 5rem;
  }

  .grid {
    width: 85rem;
  }

  .abo-list {
    font-size: 1.8rem;
  }

  .abo-subgrid {
    grid-template-columns: 1fr 0.25fr;
    column-gap: 4rem;
  }

  .abo-list::before {
    width: 25%;
  }

  .popuptext {
    width: 45rem;
    bottom: 20%;
    left: 45%;
  }

  .list1 {
    font-size: 1.8rem;
  }

  .exp-grid {
    grid-template-columns: 0.85fr 1fr;
  }

  .popuptext-edu {
    width: 42rem;
    height: 24rem;
    left: 48%;
  }

  .hovlist {
    line-height: 2rem;
    margin-bottom: 1rem;
  }

  .edu-subhead {
    padding-top: 2rem;
  }

  .edu-subhead2 {
    padding-top: 2rem;
  }

  .grid {
    padding: 15rem 8rem 15rem 5rem;
    margin-left: 7rem;
  }

  .edu-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* **************************** */
/* BELOW 944PX */
/* **************************** */

@media (max-width: 59em) {
  .main-img {
    width: 83%;
    margin-left: 12rem;
  }

  .summary {
    width: 95%;
    margin-left: 9rem;
    padding: 5rem;
  }

  .contact,
  .projects,
  .education,
  .experience,
  .downloads,
  .about {
    background-image: url("../img/codeblur.jpg");
    position: fixed;
    background-size: cover;
  }

  .grid {
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
    background-image: none;
  }

  .abo-subgrid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .abo-line {
    font-size: 2rem;
    grid-row: 2 / 3;
  }

  .skill-head {
    display: block;
    margin-top: 10rem;
    background-color: rgba(71, 64, 86, 0.801);
    padding: 2rem 4rem;
    border-radius: 2rem 2rem 0 0;

    margin-bottom: 0;
  }

  .abo-grid {
    padding-top: 10rem;
  }

  .abo-list {
    font-size: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 4rem 2rem 4rem;
    border-radius: 0 0 2rem 2rem;
    background-color: rgba(71, 64, 86, 0.801);
  }

  .abo-list::before {
    display: none;
    width: 95%;
    left: 50%;
    top: 74%;
    padding-bottom: 25rem;
  }

  .exp-grid,
  .edu-grid {
    grid-template-columns: 1fr;
  }

  .exp-subhead span,
  .edu-subhead span {
    display: inline-block;
    font-size: 2.6rem;
    color: var(--head-primary);
  }

  .edu-subhead,
  .exp-subhead {
    font-size: 2rem;
  }

  .edu-subhead2,
  .exp-subhead2 {
    font-size: 1.8rem;
  }

  .hovlist {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }

  .head {
    font-size: 4rem;
  }

  .click {
    display: none;
  }

  .popuptext,
  .popuptext-edu {
    position: inherit;
    visibility: visible;
    width: 100%;
    height: 100%;
    /* display: none; */
    transition: none;
    margin-bottom: 5rem;
  }

  .list1 {
    display: none;
  }

  .show {
    visibility: visible;
    /* display: block; */
  }

  .arrow {
    display: none;
  }
}

/* **************************** */
/* BELOW 600PX */
/* **************************** */

@media (max-width: 37.5em) {
  .nav-bar {
    bottom: 0;
    width: 100vw;
    height: 7.5rem;
  }

  .logo {
    margin-bottom: 0;
  }

  .nav-bar-nav {
    flex-direction: row;
  }

  .nav-link {
    justify-content: center;
  }

  .nav-icon {
    height: 2.4rem;
    width: 2.4rem;
    margin: 0;
  }

  .nav-bar:hover {
    width: 100vw;
  }

  .nav-bar:hover .logo svg {
    transform: rotate(0deg);
  }
  .nav-item:last-child {
    margin-top: 0;
  }

  .container {
    height: 100%;
    padding-top: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    margin-bottom: 10rem;
    height: 100vh;
    gap: 0;
  }

  .main-img {
    width: 100%;
    margin-left: 10%;
    grid-column: 1/2;
  }

  .summary {
    width: 100%;
    padding: 2rem;
    margin: 0 1.5rem;
    grid-column: 1/2;
    grid-row: 2/3;

    font-size: 3.5rem;
  }

  .grid {
    gap: 0;
    margin: 0 0 10rem 0;
    padding: 5rem 2rem;
  }

  .abo-line {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }

  .skill-head {
    font-size: 3rem;
    padding: 1rem 2rem;
    margin-top: 5rem;
  }

  .abo-list {
    grid-template-columns: 1fr;
    font-size: 1.8rem;
    line-height: 2.5rem;
    padding: 1rem 2rem;
  }

  .edu-subhead,
  .exp-subhead {
    font-size: 1.6rem;
  }

  .edu-subhead2,
  .exp-subhead2 {
    font-size: 1.4rem;
  }

  .exp-subhead span,
  .edu-subhead span {
    font-size: 2.2rem;
  }

  .hovlist {
    font-size: 1.6rem;
    line-height: 2.3rem;
    margin-bottom: 1rem;
  }

  .popuptext-edu,
  .popuptext {
    padding: 1rem 2rem;
  }

  .con-head {
    font-size: 2.6rem;
  }

  .con-line {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
  /* ------------------------------------------------- */
}