/* if screen size > 1200px : size for desktops*/
@media screen and (min-width: 1200px) {
  #desktop-navbar {
      display: flex;
  }
  #hamburger-navbar {
      display: none;
  }
}

/* if screen size < 1201px : size for tablets */
@media screen and (max-width: 1201px){

  nav {
    height: 3rem; /* distance from top*/
  }

  #desktop-navbar {
      display: none;
  }
  #hamburger-navbar {
      display: block;
  }

  #profile {
    margin-bottom: 0rem;
    padding-top: 0rem;
    padding-bottom: 5rem;
  }
  
  #profile, 
  .section-container {
    display: block;
  }

  #about {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #project {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #certificates {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #contact {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  section, 
  .section-container {
    height: fit-content;
  }

  section {
    margin: 0 5%;
  }

  .section__pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }

  .about-containers {
    margin-top: 0;
  }
}

/* if screen size < 700px : size for mobile phones */ 
@media screen and (max-width: 700px){

  nav {
    height: 3rem; /* distance from top*/
  }

  section {
    top: 1rem; 
    /*space between each sections*/
  }

  #profile {
    margin-bottom: 0rem;
    padding-top: 0rem;
    padding-bottom: 5rem;
  }

  #about {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #project {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #certificates {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  #contact {
    display: block;
    padding: 0;
    padding-bottom: 5rem;
  }

  .details-container {
        border-radius: 15px;
  }

  article {
    font-size: 2rem;
  }

  /* section: projects */
  .about-containers, .btn-container {
    flex-wrap: wrap;
  }

  .project-img {
    border-radius: 10px;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 90%;
    height: 90%;
  }

  .contact-info-container {
    display: flex;
  }


  /* section: contact me*/
  .connect-text {
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
  }

}