/* rem and em do NOT depend on html font-size in media queries!
instead, 1rem = 1em = 16px */

/* 1350 screensize/16 = 84 */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/
@media (max-width: 84em) {
  /*Section into*/

  .trophy-icon {
    width: 3rem;
    height: 3rem;
    margin-right: 2.6rem;
  }

  .primary {
    letter-spacing: 0.2rem;
    font-size: 3rem;
  }

  .secondary {
    font-size: 2rem;
  }

  .nav-list {
    display: flex;
    gap: 4rem;
    list-style-type: none;
  }

  .image-diploma {
    height: 35rem;
    width: 25rem;
    border: 1px solid #777;

    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }

  .form-text {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.1rem;
  }

  /*Section form*/
  .how-to-circles {
    margin-bottom: 0rem;
  }

  .how-to-circle {
    row-gap: 1.3rem;
    padding: 1.3rem;
    border-radius: 15px;
    text-align: center;
    font-size: 1.6rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .numbers {
    font-size: 1.5rem;
  }

  .send-btn {
    height: 3.6rem;
    font-size: 1.8rem;
  }

  /*Section about, contact*/
  .about-section,
  .contact-section {
    padding: 3rem 0;
  }

  .about-paragraph,
  .contact-paragraph {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}

/**************************/
/* BELOW 1200px (Landscape tablets) */
/**************************/
@media (max-width: 75em) {
  html {
    /* 9px/16px = 56.2% */
    font-size: 56, 25%;
  }

  /*Section into*/
  .trophy-icon {
    width: 2rem;
    height: 2rem;
    margin-right: 2rem;
  }

  .primary {
    letter-spacing: 0.2rem;
    font-size: 2rem;
  }

  .secondary {
    font-size: 1.6rem;
  }

  .nav-list {
    gap: 3rem;
  }

  .nav-links {
    letter-spacing: 0.1rem;
  }

  .image-diploma {
    height: 30rem;
    width: 21rem;
  }

  /*Section about, contact*/
  .about-section,
  .contact-section {
    padding: 3rem 0;
  }

  .about-paragraph,
  .contact-paragraph {
    font-size: 1.4rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/
@media (max-width: 59em) {
  /* 8px / 16px = 50% */

  html {
    font-size: 50%;
  }

  /*Section form*/
  .how-to-circles {
    display: flex;
    gap: 2.1rem;
  }

  .how-to-circle {
    row-gap: 1.2rem;

    padding: 1.2rem;
    border-radius: 15px;
    text-align: center;
    font-size: 1.6rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .numbers {
    font-size: 2rem;
  }
  .form {
    row-gap: 2.5rem;
    padding: 2rem 6rem;
    border: 7px solid #fff;
  }
  .form {
    display: flex;
    flex-direction: column;
    row-gap: 2.7rem;
    margin-bottom: 4rem;
    padding: 2rem 6rem;
    border: 9px solid #fff;
  }

  .form-div {
    margin: 2rem 0;
  }

  .form-fields {
    column-gap: 3rem;
  }

  .form-labels {
    font-size: 1.6rem;
  }

  .input-fields,
  .select-field {
    padding: 0.7rem;
    font-size: 1.5rem;
  }

  .choose-color {
    width: 18rem;
  }

  .send-btn {
    height: 4rem;
    border-radius: 8px;
    background-color: rgb(89, 192, 89);
    border: 1.5px solid #777;
    box-shadow: 5px 5px 10px #999;
    font-family: "Permanent marker", sans-serif;

    font-size: 1.6rem;
    letter-spacing: 0.2rem;
  }

  /*Section about, contact*/
  .about-section,
  .contact-section {
    padding: 2.5rem 0;
  }

  /**************************/
  /* MOBILE NAVIGATION */
  /**************************/
  .btn-mobile-nav {
    display: block;
    z-index: 100;
  }

  .nav {
    background-color: rgba(255, 255, 255, 0.973);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .nav-open .nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .nav-list {
    flex-direction: column;
    gap: 8rem;
  }

  .nav-links {
    font-size: 3rem;
  }

  a:link,
  a:visited {
    padding: 3.2rem;
  }

  a:hover,
  a:active {
    padding: 3.2rem;
  }
  .fish-species-available {
    font-size: 1.5rem;
    padding: 0 5rem;
  }
}

/**************************/
/* SMALLER TABLETS */
/**************************/
/* 700/16= 43.75 = 44 */
@media (max-width: 44em) {
  /*Section into*/

  .images-diploma {
    flex-direction: column;
    gap: 5rem;
  }

  /*Section form */
  .form-text {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .how-to-circles {
    gap: 2.1rem;
  }

  .how-to-circle {
    row-gap: 0.9rem;

    padding: 1rem;
    border-radius: 15px;
    text-align: center;
    font-size: 1.1rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .numbers {
    font-size: 1.3rem;
  }
  .form {
    row-gap: 2.2rem;
    padding: 2rem 4rem;
    border: 5px solid #fff;
  }

  .form-labels {
    font-size: 1.4rem;
  }

  .input-fields,
  .select-field {
    padding: 0.5rem;
    font-size: 1.2rem;
  }

  .choose-color {
    width: 18rem;
  }

  .send-btn {
    height: 3.5rem;
    border-radius: 8px;
    background-color: rgb(89, 192, 89);
    border: 1.5px solid #777;
    box-shadow: 5px 5px 10px #999;
    font-family: "Permanent marker", sans-serif;

    font-size: 1.4rem;
    letter-spacing: 0.2rem;
  }

  /*Section about, contact*/
  .about-section,
  .contact-section {
    padding: 3rem 0;
  }

  .about-paragraph,
  .contact-paragraph {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
/**************************/
/* Below 600px for Phones */
/*600/16= 38em*/
/**************************/

/*Section into*/
@media (max-width: 38em) {
  .trophy-icon {
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 1.6rem;
  }

  .header {
    width: 100%;
    background-color: #fae5d3;
    text-align: center;
    display: flex;
    padding: 2rem 4rem;
    justify-content: space-between;
    align-items: center;
  }

  .primary {
    letter-spacing: 0.3rem;
    font-size: 1.7rem;
  }

  .secondary {
    font-size: 1.4rem;
  }

  .nav-links {
    font-size: 3rem;
  }

  .intro-section {
    padding: 6rem 0;
  }

  .recordfish-text {
    row-gap: 2rem;
  }
  .link-underline {
    padding-bottom: 0.2rem;
    border-bottom: 1.7px solid #444;
  }

  /*Section form*/
  .form-text {
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
  }

  .form {
    row-gap: 2rem;
    padding: 2rem 4rem;
    border: 5px solid #fff;
  }

  .form-labels {
    font-size: 1.2rem;
  }

  .input-fields,
  .select-field {
    padding: 0.3rem;
    font-size: 1rem;
  }

  .send-btn {
    height: 3.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
  }

  /*Section about, contact*/
  .about-section,
  .contact-section {
    padding: 2.2rem 0;
  }

  .about-paragraph,
  .contact-paragraph {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}