@media only screen and (min-width: 640px)  
{
    .hero-image, .headabout{
        float: right;
    }
    .hero{
        height: 30rem;
    }
    .hero-image{
        position: relative;
        margin-right: 4rem;
        bottom: 20rem;
    }
    .about{
        height: 24rem;
    }
    .holder{
        overflow: visible;
    }
    .dev{
        transform: translate(20%, 0);
    }
    .headabout{
        position: relative;
        font-size: 1.8rem;
        left: 24rem;
    }
    .intro{
        width: 60%;
    }
    .intro > h1, .intro > p{
        text-align: left;
        font-size: xx-large;
    }
    .intro > h1 {
        font-size: 4rem;
    }
    .deck{
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px;
    }
    .ccontainer{
        float: left;
        left: 30%;
        transform: translate(0%, -50%);
    }
    .contact{
        position: relative;
        left: 50rem;
        transform: scale(1.5, 1.5);
    }
    .projects{
        height: 29rem;
    }
    .projects > h2{
        float: left;
        font-size: 2rem;
        width: 20%;
    }
    .companies{
        height: 24rem;
    }
    .ccontainer{
        transform: scale(2, 2);
    }
    .companiestxt{
        float: right;
        width: 50%;
        font-size: 3rem;
    }
    #contact{
        overflow: hidden;
        width: fit-content;
    }
}