@media screen and (max-width:500px){
#mainHead, #intro, #mainContent, #socMed{
width:95%;
position: relative;
display: block;
padding:2%;
}

#mainHead article, #intro article, #mainContent article{
width: 100%;
margin: 0 0 2% 0;
padding:1.5%;
}

#socMed{
margin:0 auto 0 auto;
}

#socMed ul{
display:flex;
justify-content:space-around;
}
}

@media screen and (min-width:501px) and (max-width:800px){
#mainHead, #intro, #mainContent, #socMed{
width:95%;
position: relative;
padding:2%;
}

#mainContent article:first-child{
width:100%;
}

#mainContent article{
width:48%;
}

}