@media screen and (min-width: 1440px) {
  #profile {
    height: 80vh;
  }
  #about {
    height: 50vh;
  }

  .about-details-container {
    padding-top: 3rem;
    height: 35vh;
  }
  .details-container{
    height: 25vh;
  }

  .project-grid{
    display: grid;
    justify-content: center;
    gap: 3rem;
    padding: 3rem;
    max-width: 100%;
  }

  #experience{
    height: fit-content;
  }
  #coding-platforms{
    height: fit-content;
  }
  #contact,
  #projects {
    height: fit-content;
  }
}
@media screen and (max-width: 1440px) {
    #profile {
      height: 80vh;
    }
    #about {
      height: 50vh;
    }
    .about-details-container {
      padding-top: 3rem;
      height: 35vh;
    }

    .project-grid{
      display: grid;
      justify-content: center;
      gap: 3rem;
      padding: 3rem;
      max-width: 100%;
    }

    
    .details-container{
      height: 25vh;
    }
    
    #coding-platforms{
      height: fit-content;
    }
    #experience{
      height: fit-content;
    }
    #contact,
    #projects {
      height: fit-content;
    }

  }
  
  @media screen and (max-width: 1200px) {
    #desktop-nav {
      display: none;
    }
    #hamburger-nav {
      display: flex;
    }
    
    .toggle-container {
      display: flex;
      position: absolute;
      top: 4%;
      right: 2%;
    }
   

    #coding-platforms{
      height: fit-content;
    }
    .project-grid{
      display: grid;
      
      gap: 3rem;
      justify-content: center;
    }
    .project-card {
      
      align-content: center;
    }

    #experience,
    .experience-details-container {
      margin-top: 2rem;
    }
    #profile,
    .section-container {
      display: block;
    }
    #profile{
      margin-bottom: 0;
      height:fit-content;
      padding-top: 1rem;
    }

    .about-details-container{
      height: 35vh;
    }
    .details-container{
      height: 28vh;
    }
    
    .arrow {
      display: none;
    }
    section,
    .section-container {
      height: fit-content;
    }

    section {
      margin: 0 5%;
      padding-top: 4vh;
    }

    
    .section__pic-container {
      width: 375px;
      height: 375px;
      margin: 0 auto 2rem;
    }
    
    .section__pic-container img{
      width: 375px;
      height: auto;
      justify-content: center;
      
    }
    .section__pic-container img {
      border-radius: 50% 20% / 10% 40%;
      filter: drop-shadow(20px 10px 4px hsl(206, 7%, 19%));
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .section__pic-container img {  
      animation-name: floating;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      
    }
    
    
    @keyframes floating {
      0% { transform: translate(0,  0px); 
      }
      50%  { transform: translate(0, 15px); }
      100%   { transform: translate(0, -0px); }    
    }

  }

  form {
    
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  
  @media screen and (max-width: 600px) {
    
    #contact,
    footer {
      height: fit-content;
    }
    #profile {
      
      margin-bottom: 0;
      padding-top: 1rem;
      height: fit-content;
    }

    .details-container{
      height: 25vh;
    }

    article {
      font-size: 1rem;
    }
    footer nav {
      height: fit-content;
      margin-bottom: 2rem;
    }

    .about-containers,
    .contact-info-upper-container,
    .btn-container {
      flex-wrap: wrap;
    }
    .contact-info-container {
      margin: 0;
    }
    .contact-info-container p,
    .nav-links li a {
      font-size: 1rem;
    }
    .experience-sub-title {
      font-size: 1.25rem;
    }
    .logo {
      font-size: 1.5rem;
    }
    .nav-links {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      gap: 0.5rem;
    }

    #about{
      padding-top: 1vh;
      height: fit-content;

    }

    .about-details-container {
      padding-top: 1rem;
      display: flex;
      gap: 1rem;
      flex-direction: column;
      height: inherit;
    }

    .details-container p{
      text-align: center;
      height: fit-content;
    }


    #coding-platforms{
      display: block;
      height: fit-content
    }

    .project-grid{
      display: grid;
      
      gap:2rem;
      padding: 2rem;
      justify-content: center;
      padding: 1rem;
    }

    .section{
      margin: 0 0;
    }
    .section{
      margin: 0 0;
    }
    .section__pic-container {
      display: flex;
      width: 250px;
      height: auto;
      justify-content: center;
      margin: 2rem auto 2rem;

    }
    .section__pic-container img{
      width: 250px;
      height: auto;
      justify-content: center;
      
    }
    .section__pic-container img {  
      animation-name: floating;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      
    }
    
    @keyframes floating {
      0% { transform: translate(0,  0px); 
      }
      50%  { transform: translate(0, 5px); }
      100%   { transform: translate(0, -0px); }    
    }
    

    .section__text__p2 {
      font-size: 1.25rem;
    }
    .title {
      font-size: 2rem;
    }
    .text-container {
      text-align: justify;
    }
  }

  #projects{
    margin: 0 5%;
  }
 

  @media screen and (max-width: 320px) {
    #contact,
    footer {
      height: fit-content;

    }

    .switch {
      position: relative;
      display: inline-block;
      width: 2.75rem;
      height: 1.725rem;
    }
    
    .toggle-container {
      display: flex;
      position: fixed;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      right: 2%;
      top: 4%;
    }

    #profile {
      height: 75vh;
      margin-bottom: 0;
      padding-top: 1rem;
    }

    article {
      font-size: 1rem;
    }
    footer nav {
      height: fit-content;
      margin-bottom: 2rem;
    }


    .about-containers,
    .contact-info-upper-container,
    .btn-container {
      flex-wrap: wrap;
    }

    .about-details-container {
      display: flex;
      flex-direction: column;
    }

    .details-container{
      padding: 1rem;
      
    }

    .project-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap:2rem;
      padding: 2rem;
      justify-content: center;
      padding: 1rem;
    }

    .contact-info-container {
      margin: 0;
    }
    .contact-info-container p,
    .nav-links li a {
      font-size: 1rem;
    }
    .experience-sub-title {
      font-size: 1.25rem;
    }
    .logo {
      font-size: 1.5rem;
    }
    .nav-links {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
    }

    #about,#coding-platforms{
      padding-top: 20vh;

    }
    #coding-platforms{
      display: block;
      height: fit-content;
    }

    .section{
      margin: 0 0;
    }
    .section__pic-container {
      display: flex;
      width: 250px;
      height: auto;
      justify-content: center;
      margin: 2rem auto 2rem;

    }
    .section__pic-container img{
      width: 250px;
      height: auto;
      justify-content: center;
      
    }
    .section__pic-container img {  
      animation-name: floating;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      
    }
    
    @keyframes floating {
      0% { transform: translate(0,  0px); 
      }
      50%  { transform: translate(0, 5px); }
      100%   { transform: translate(0, -0px); }    
    }
    

    .section__text__p2 {
      font-size: 1.25rem;
    }
    .title {
      font-size: 2rem;
    }
    .text-container {
      text-align: justify;
    }
  }
  .carousel .list .item .buttons{
    display: block;
    size: 1rem;
    gap: 0.5rem;
    margin-top: 2rem;
  }
 
  form {
    padding-left: 3rem;
    align-content: center;
    justify-content: center;
    align-items: center;
  }