/* - Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */

/**************************/
/* BELOW 1808px (Smaller desktops) */
/**************************/
@media (max-width: 113em) {
  .option-container-two {
    min-width: 75%;
  }
  .option-container-two h2 {
    font-size: 3.5rem;
  }
  .option-container-two p {
    font-size: 1.8rem;
  }
}

/**************************/
/* BELOW 1408px (Smaller desktops) */
/**************************/
@media (max-width: 88em) {
  .option-container img {
    max-width: 7rem;
  }
  .option-container h3 {
    font-size: 3rem;
  }
  .option-container p {
    font-size: 1.4rem;
  }
  .option-container-two {
    min-width: 85%;
  }
}
/**************************/
/* BELOW 1200px (Smaller desktops) */
/**************************/

@media (max-width: 75em) {
  html {
    font-size: 55%;
  }
  .arabox-img {
    width: 350px;
  }
  .container {
    column-gap: 20px;
  }
  .option-container-two {
    min-width: 95%;
  }
}

/**************************/
/* BELOW 1152px (Smaller desktops) */
/**************************/

@media (max-width: 72em) {
  .types-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 3.6rem;
    column-gap: 0;
    max-width: 750px;
  }
  .type-img img {
    max-width: 35rem;
  }
}
/**************************/
/* BELOW 950px (Smaller desktops) */
/**************************/

@media (max-width: 60em) {
  .arabox-img {
    width: 300px;
  }
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
  }
  .header-text {
    text-align: center;
  }
}

/**************************/
/* BELOW 928px (Smaller desktops) */
/**************************/

@media (max-width: 58em) {
  html {
    font-size: 50%;
  }
  .arabox-img {
    width: 300px;
  }
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
  }
  .header-text {
    text-align: center;
  }

  .types-article p {
    font-size: 1.6rem;
  }
  .type-img img {
    max-width: 31rem;
  }
  .types-container {
    max-width: 600px;
  }
  .option-container-two h2 {
    font-size: 3rem;
  }
  .option-container-two p {
    font-size: 1.4rem;
  }
}

/**************************/
/* BELOW 700px (Smaller desktops) */
/**************************/
@media (max-width: 44em) {
  header {
    max-width: 80%;
  }
  .option-container {
    flex-direction: column;
  }
  .option-section {
    margin-bottom: 12.8rem;
  }
  /* Sections */
  .optwo {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
    text-align: center;
  }

  .opone {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    text-align: center;
    padding-top: 5rem;
  }
  .option-container-two h2 {
    font-size: 3.5rem;
  }
  .option-container-two p {
    font-size: 1.8rem;
    padding: 0 50px;
  }
  .pp {
    font-size: 12px !important;
  }
  #resume-img {
    max-width: 48rem;
  }
  footer {
    min-width: 70%;
  }
}

/**************************/
/* BELOW 544px (Smaller desktops) */
/**************************/

@media (max-width: 34em) {
  .header-text h1 {
    font-size: 2.6rem;
  }
  .header-text {
    margin-top: 50px;
  }
  .types-article h2 {
    font-size: 4rem;
  }

  /* navbar */
  #menu-icon {
    display: block;
  }
  header {
    max-width: 80%;
  }
  .navbar {
    position: absolute;
    top: 100%;
    left: -500px;
    width: 100%;
    background-color: #a18a5c;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
    transition: all 0.5s ease;
    z-index: 1;
  }
  .navbar li {
    display: block;
    margin: 12px 0 0 0;
    padding: 0 15px;
    transition: all 0.5s ease;
  }
  .navbar li:last-child {
    margin-bottom: 8px;
  }
  .navbar a:hover {
    color: #d8d8d8;
  }
  .navbar.open {
    left: 2%;
  }
  .nav-bar ul {
    gap: 1rem;
  }
  .type-img img {
    max-width: 20rem;
  }
  .types-container {
    max-width: 400px;
  }
  footer {
    grid-template-columns: 1fr 1fr;
    margin: 0 1.5rem 0 0;
    justify-items: start;
    min-width: 100%;
  }
  .copyright {
    margin-bottom: 1.5rem;
  }
  .types-article p {
    padding: 0 5px;
  }
  
  
  .d-buttons{
    flex-direction: column;
  }
}

/**************************/
/* BELOW 400px (Smaller desktops) */
/**************************/

@media (max-width: 25em) {
  .types-article h2 {
    font-size: 3.2rem;
    margin-bottom: 1.6rem;
  }
  .types-article p {
    font-size: 1.3rem;
  }
  #resume-img {
    max-width: 40rem;
  }
}

/**************************/
/* BELOW 304px (Smaller desktops) */
/**************************/

@media (max-width: 19em) {
  footer {
    grid-template-columns: 1fr;
  }
  #resume-img {
    max-width: 35rem;
  }
}