@media only screen and (max-width: 340px)
{
.body
{
    padding: 2%;
    margin: 0%;
}
#primary{
    background:#C1EFFF;
    position: fixed;
    
}
#primary li{
    float:left;
    width: 25%;
    text-align:center;
}
#primary a{
    font-size: 10px;
}
#primary img{
    padding: 5px 2px 0 0;
}

.seattle{
    max-width: 100%;
    height: auto;
}
iframe, .project-one-img, .project-two-img{
    width: 50%;
    height: auto;
}

.bottom-cloud{
    max-width: 10%;
    left: 5%;
    top: 500px;
}
.top-cloud{
    max-width: 10%;
    left: 75%;
    top: 430px;
}
.bird{
    max-width: 10%;
    left: 45%;
    top: 450px;
}
.intro {
    width: 70%;
    margin: auto;
    padding: 20px 0 50px;
}
.project-one-img {
    width: 10rem;
    float: left;
    margin:0 20px 10px 0;
}
.project-two-img {
    width: 10rem;
    float: right;
    margin:0 20px 10px 0;
}
.project-link{
    padding: 2px;
}
.contact-text{
    width: 70%;

}
}
@media only screen and (max-width: 912px){
.body
{
    padding: 2%;
    margin: 0%;
}
#primary{
    background:#C1EFFF;
    position: fixed;
    
}
#primary li{
    float:left;
    width: 25%;
    text-align:center;
}
#primary a{
    font-size: 10px;
}
#primary img{
    padding: 8px 6px 0 0;
}

.seattle{
    max-width: 100%;
    height: auto;
}
iframe, .project-one-img, .project-two-img{
    width: 100%;
    height: auto;
}

.bottom-cloud{
    max-width: 10%;
    left: 5%;
    top: 500px;
}
.top-cloud{
    max-width: 10%;
    left: 75%;
    top: 430px;
}
.bird{
    max-width: 10%;
    left: 45%;
    top: 450px;
}
.intro {
    width: 50%;
    margin: auto;
    padding: 20px 0 50px;
}
.project-one-img {
    float: left;
    margin:0 20px 10px 0;
}
.project-two-img {
    float: right;
    margin:0 20px 10px 0;
}
.projects .btn {
    padding: 10px;
    font-size: 15px;
}
.contact-text{
    width: 80%;

}
}