@media (max-width: 312px) {
    section {
        padding: 4em 1em;
    }
}

@media (max-width: 500px) {
    .portfolio__img {
        transition: opacity 0.1s ease-in-out;
        object-fit: cover;
        width: 100%;
        height: 100%;
        background-color: var(--clr-accent);
    }

    .portfolio-item-individual p {
        max-width: 1000px;
    }

    
}

@media (max-width: 800px) {
   .nav {
    display: block;
   }

   .hamburger {
       display: block;
   }
   .nav-wide {
       display: none;
   }

   .nav-toggle {
    display: block;
   }

   .logo {
       padding: 0px;
       
   }

   .decoration {
       height: 42px;
       width: 10px;
   }

   .logo:hover {
    box-shadow: none;
    border: none;
    border: 1px solid transparent;
   }

   .portfolio__item {
    filter: grayscale(0%);
    border: 1px solid transparent;
}

.about-me__img {
   
    margin-top: 2.5em;
}



}

@media (min-width: 600px) {
   .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
        /* box-shadow: 2px 2px 0px 0px rgb(7, 41, 73),
        4px 4px 0px  0px rgb(27, 104, 155),
        6px 6px 0px 0px rgb(49, 137, 196),
        8px 8px 0px 0px rgb(134, 174, 211); */
   }
   
   .intro__img-regular {
     box-shadow:5px 0px 0px  rgba(51, 51, 51, 0.274),
                1px 0px 10px 1px rgba(19, 94, 155, 0.801),
                 10px 0px 10px 1px rgba(5, 5, 5, 0.404),
                5px 0px 0px  rgb(36, 36, 36);
      grid-area: img;
      min-width: 250px;
      position: relative;
      z-index: 2;
      
   }

   .intro__img {
     box-shadow: 5px 0px 0px  rgba(51, 51, 51, 0.274),
     1px 0px 100px 0px rgb(3, 16, 27),
     10px 0px 10px 0px rgba(5, 5, 5, 0.404);
        grid-area: img;
        min-width: 230px;
        position: relative;
        z-index: 2;
   }

   .intro__img::before {
         box-shadow: 0px 10px 70px rgba(179, 219, 245, 0.37),
    100px -110px 0px rgba(179, 219, 245, 0.034);
   }

   .section__subtitle--intro {
    align-self: start;
    grid-template-columns: repeat(3, 200px);
    grid-column: -1 / 1;
    grid-row: 2;
    text-align: right;
    position: relative;
    left: -1em;
    width: calc(100%);
    animation: slide 0.7s cubic-bezier(0.6,-0.28, 0.55, 1.51) 0.1s;
    
    opacity: 1;
    
   }

   .about-me {
       display: grid;
       grid-template-columns: 1fr 150px;
       grid-template-areas: 
       "title img"
       "subtitle img"
       "text img";
       grid-column-gap: 2em;
   }
   
   
   .section__title--about {
       grid-area: title;
       
   }

   .section__subtitle--about {
       grid-column: 1 / -1;
       grid-row: 2;
       position: relative; 
       left: -2em;
       width: calc(100% + 2em);
       padding-left: 2em;
       padding-right: calc(100px + 2em);
       overflow-x: hidden;
      

   }

   

   .about-me__img {
      grid-area: img;
      position: relative;
      z-index: 2;
   }

   .social-list__link {
    padding: .5em;
}

.section__subtitle--intro {
    left: 30px;
}

}


@media (min-width: 800px) {
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
        --fs-body-project: 1.2rem;
    }

     .services {
        display: flex;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .service + .service {
        margin-left: 2em;
        
      
    }

    .section__subtitle--intro {
        left: 0px;
    }

    .section__title--about {
      
       left: -10px;
    }

    .nav {
        display: none;
    }

   

}

@media (min-width: 1400px) {
    .nav__list-wide a {
     margin-left: 80px;
     
    }

    .nav__list-wide {
        margin-right: 10px;
    }

 
}

@media (min-width: 2400px) {
    header {
        justify-content: space-between;
        position: relative;
        left: 50%;
        
        margin-left: -1190px;
        
        max-width: 2400px;
    }

   

    
}