/* Media queries are a tool in CSS that enable you to adjust the styling of a website based on different conditions, such as screen size or device characteristics. 
They allow you to create responsive designs by applying specific styles when certain conditions are met, ensuring that your website looks and works well 
across various devices and screen resolutions. Essentially, media queries help tailor the appearance of your site to different contexts, enhancing the 
overall user experience. */



/* when screen width is 1400 pixels or less */
@media screen and (max-width: 1400px) {
  #profile {
    height: 83vh;
    margin-bottom: 6rem;
  }
  .about-containers {
    flex-wrap: wrap;
  }
  #contact,
  #projects {
    height: fit-content;
  }
}

/* when screen width is 1200 px or less 
Designs for Tablets*/
@media screen and (max-width: 1200px) {
  /* Removing the desktop nav */
  #desktop-nav {
    display: none;
  }
  /* Having the Hamburger nav to display flex. */
  #hamburger-nav {
    display: flex;
  }
  #experience,
  .experience-details-container {
    margin-top: 2rem;
  }
  /* Having the Profile take up the row */
  #profile,
  .section-container {
    display: block;
  }
  /* Removing the arrow  */
  .arrow {
    display: none;
  }
  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;
  }
}

/* when screen width is 600 px or less
Changing desgins for smaller screens (Phones)*/
@media screen and (max-width: 600px) {
  #contact,
  footer {
    height: 40vh;
  }
  #profile {
    height: 83vh;
    margin-bottom: 0;
  }
  article {
    font-size: 1rem;
  }
  footer nav {
    height: fit-content;
    margin-bottom: 2rem;
  }
  /* Having the about,contact-info containers, and button containers all warp vertically instead of being side by side */
  .about-containers,
  .contact-info-upper-container,
  .btn-container {
    flex-wrap: wrap;
  }
  /* Remove margins between containers  */
  .contact-info-container {
    margin: 0;
  }
  /* Shrink the font sizes  */
  .contact-info-container p,
  .nav-links li a {
    font-size: 1rem;
  }
  .experience-sub-title {
    font-size: 1.25rem;
  }
  .logo {
    font-size: 1.5rem;
  }
    /*Setting a new  direction for the nav links to a  column (Vertically) 
    Center the text */
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  /* Centering the items within the section-pic container  */
  .section__pic-container {
    width: auto;
    height: 46vw;
    justify-content: center;
  }
  .section__text__p2 {
    font-size: 1.25rem;
  }
  .title {
    font-size: 2rem;
  }
  /* Center the text */
  .text-container {
    text-align: justify;
  }
}