@media screen and (max-width: 400px) {
    body {
        font-size: 1.4rem;
    }

    h1 {
        font-size: 2rem;
    }
}
@media screen and (min-width: 450px) {
    .callout img {
        height: 220px;
    }
}

@media screen and (min-width: 555px) {
    header .image img {
        max-width: 500px;
    }
    .callout img {
        
        width: 96%;

    }

    .projects .image img {
        max-width: 450px;
    }

    .projects .text {
        /* width: 80%; */
    }

    .project {
        width: 80%;
        margin:  0 auto 8rem;
    }
}

@media screen and (min-width: 570px) {
    .callout img {
        height: 200px;
        max-width: 580px;
    }

    header .my_summary {
        max-width: 557px;
    }
}

@media screen and (min-width: 950px) {
    body p {
        font-size: 1.8rem;
    }

    .my_summary p {
        font-size: 2.2rem;
        letter-spacing: 1px;
    }
    .hero .container {
        flex-direction: row;
    }

    .hero .text {
        width: 50%;
        /* border: 2px solid green; */
        background-image: url(../images/callout.png);
        background-size: cover;
        height: 400px;
        top: 55rem;
    }

    .callout {
        transform: translateX(0);
        top: 140px;
        width: 50%;
        margin-left: 1rem;
        /* border: 2px solid red; */
    }
   
    .callout img {
        height: 350px;
        width: 90%;
        
        /* max-width: 580px; */
    }

    .text_animate {
        position: relative;
        top: 3rem;
    }
    .no_display_small {
        display: block;
      }

      .no_display_med {
        display: none;
      }

      .project {
        display: flex;
        width: 100%;
        margin-bottom: 4rem;
        align-items: center;
        justify-content: center;
        /* border: 2px solid red; */
      }

      .projects .no_display_med {
        display: none;
      }

      .projects .no_display_small {
        display: inline-block;
      }

      .text {
        width: 70%;
      }

      .about p,
      #contact p {
        max-width: 800px;
        margin: 1rem auto;
      }
}

@media screen and (min-width: 1050px) {    
   
    .callout img {
        height: 370px;
       
    }
    
}

@media screen and (min-width: 1100px) {    
   
    .callout {
        
        top: 150px;
        
    }
    
}

@media screen and (min-width: 1100px) {
    .hero .container {
        max-width: 1120px;
        margin: auto;
    }

    .hero .text {
        max-width: 507px;
        /* border: 2px solid red; */
        background-image: url(../images/callout.png);
        background-size: cover;
        height: 400px;
        top: -25rem;
    }

    .no_display_small {
        display: none;
    }

    .form .no_display_small {
        display: block;
    }
   
    .callout {
        width: 45%;
        top: 150px;
        max-width: 563px;
        /* border: 2px solid green; */
        
    }
    .callout img {
        height: 380px;
       max-width: 505px;
       width: 100%;
    }

    header .my_summary {
        max-width: 501px;
        margin-top: 3rem;
    }

    .text_animate {
        /* padding-top: 20rem; */
        position: relative;
        top: 5rem;
    }

    .form {
        width: 90%;
        max-width:1000px;
    }
    
    .project {
        width: 90%;
    }
    .projects .image {
        width: 80%;
        
    }
}