/*CSS Stylesheet*/

/*
* {
border: 1px solid black;
}
*/
body {
    margin: 0;
    box-sizing: border-box;
    background: RGBA(255, 191, 191, 0.7);
}

img {
    max-width: 100%;
}

.clearfix {
    clear: both;
}

p {
    font-family: 'Muli', sans-serif;
}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover {
    color: black;
    text-decoration: underline;
}

a:active {
    color: black;
    text-decoration: underline;
}

#wrapper {
    background: RGBA(161, 218, 199, 0.7);
    max-width: 1180px;
    margin: 0 auto;

    border-left: 4px solid RGBA(119, 158, 203, 0.7);
    border-right: 4px solid RGBA(119, 158, 203, 0.7);
    display: flex;
    flex-direction: row;

}

#leftside {
    margin-top: 49px;
    flex: 0 0 300px;

    margin-left: 10px;



}

aside {

    display: flex;
    flex-direction: column;
    background: whitesmoke;
    border-top: 4px solid RGBA(119, 158, 203, 0.7);
    border-bottom: 4px solid RGBA(119, 158, 203, 0.7);
    border-left: 4px solid RGBA(119, 158, 203, 0.7);
    text-align: center;
    align-items: center;
    padding-bottom: 20px;
    width: 296px;

}

#leftside p {
    margin: 0;
}

#leftside h3 {
    font-family: 'Philosopher', sans-serif;
}

#myresume {
    margin: 0;
}



#profilepicture {

    max-width: 100%;
    display: block;
    border-radius: 50%;
    border: 4px solid RGBA(119, 158, 203, 0.7);
    margin-top: 30px;

}

#name {

    margin-top: 20px;

    font-family: 'Philosopher', sans-serif;
    font-size: 2.5rem;
    text-align: center;


}

#Matt {

    margin: 0;

}

#socialnav {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;


}


#socialnav li {


    display: flex;
    flex-direction: row;
    align-self: center;
    padding-left: 5px;
    padding-right: 5px;
}




#resume {
    flex: 0 850px;
    display: flex;
    flex-direction: column;
    background: whitesmoke;
    margin-top: 49px;
    margin-bottom: 49px;
    border: 4px solid RGBA(119, 158, 203, 0.7);
    align-items: center;



}

#educationheader {

    font-family: 'Philosopher', sans-serif;
    font-size: 1.5625rem;



}

#educationheader h1 {
    margin-top: 10px;
    margin-bottom: 20px;


}

#education {
    max-width: 800px;

    display: flex;
    flex-direction: row;
    justify-content: center;

    border-bottom: 4px dotted black;
    padding-bottom: 20px;


}





#Elon {
    max-width: 350px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-family: 'Muli:700', sans-serif;

    margin: 0;
    border-right: 4px dotted black;
    padding-right: 20px;


}


#elonpicture {
    max-width: 50%;
    border-radius: 50%;


}

#Elon h3 {
    margin: 0;
    font-size: 24px;
    
}

#Elon h4 {
    margin: 0;
    font-size: 20px;
   
}

#ElonDetails {

    padding-top: 20px;



}



#details {
    padding-top: 20px;


}

#ElonDetails h4 {
    font-family: 'Muli:700', sans-serif;
    margin: 0;

}

#ElonDetails p {
    margin: 0;

}





#UNC {



    max-width: 350px;

    font-family: 'Muli:700', sans-serif;

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 20px;


}

#uncPicture {
    max-width: 50%;
    border-radius: 50%;

}

#UNC h3 {
    margin: 0;
    font-size: 24px;
}

#UNC h4 {
    margin: 0;
    font-size: 20px;

}

#uncdetails {

    margin: 0;

    padding-top: 20px;

}

#details2 {

    margin: 0;
    padding-top: 20px;

}

#uncdetails h4 {
    font-family: 'Muli:700', sans-serif;
    margin: 0;


}

#uncdetails p {
    margin: 0;

}

#experienceheader {

    font-family: 'Philosopher', sans-serif;
    font-size: 1.5625rem;



}

#experienceheader h1 {

    margin-top: 10px;
    margin-bottom: 20px;

}


#experience {

    max-width: 800px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 4px dotted black;
    padding-bottom: 20px;


}

#CNN {



    max-width: 260px;

    font-family: 'Muli:700', sans-serif;

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    border-right: 4px dotted black;
    padding-right: 20px;


}

#cnnpicture {
    max-width: 50%;


}

#CNN h3 {
    margin: 0;
    font-size: 24px;
}

#CNN h4 {
    margin: 0;
    font-size: 20px;

}

#CNNdetails {

    margin: 0;

    padding-top: 20px;

}

#CNNspecifics {

    margin: 0;
    padding-top: 20px;

}

#CNNdetails h4 {
    font-family: 'Muli:700', sans-serif;
    margin: 0;


}

#CNNdetails p {
    margin: 0;

}

#Cox {



    max-width: 260px;

    font-family: 'Muli:700', sans-serif;

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-right: 4px dotted black;
    padding-right: 20px;
    padding-left: 20px;

}

#coxpicture {
    max-width: 100%;
    padding-bottom: 25px;



}

#Cox h3 {
    margin: 0;
    font-size: 24px;
}

#Cox h4 {
    margin: 0;
    font-size: 20px;

}

#Coxdetails {

    margin: 0;

    padding-top: 20px;

}

#Coxspecifics {

    margin: 0;
    padding-top: 20px;

}

#Coxdetails h4 {
    font-family: 'Muli:700', sans-serif;
    margin: 0;


}

#Coxdetails p {
    margin: 0;

}

#SOP {

    max-width: 260px;

    font-family: 'Muli:700', sans-serif;

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding-left: 20px;


}

#SOPpicture1 {
    max-width: 60%;



}

#SOPpicture2 {
    max-width: 70%;
    padding-bottom: 5px;


}

#SOP h3 {
    margin: 0;
    font-size: 24px;
}

#SOP h4 {
    margin: 0;
    font-size: 20px;

}

#SOPdetails {

    margin: 0;

    padding-top: 20px;

}

#SOPspecifics {

    margin: 0;
    padding-top: 20px;

}

#SOPdetails h4 {
    font-family: 'Muli:700', sans-serif;
    margin: 0;


}

#SOPdetails p {
    margin: 0;

}

#skillsheader {

    font-family: 'Philosopher', sans-serif;
    font-size: 1.5625rem;

    margin: 0;






}

#skillsheader h1 {


    margin: 0;




}


#skills {

    width: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0;




}

#skills p {

    font-style: italic;

}

img {
    max-width: 48px;
    margin: 0;

}

figure {
    margin: 0;



}

#expert {

    width: 100px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;




}



#advanced {
    width: 150px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 20px;


}

#intermediate {

    width: 150px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 20px;


}

#beginner {

    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;

}

.icons {
    width: 100px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


}

@media all and (max-width: 1179px) {

    body {
        background: RGBA(161, 218, 199, 0.7);

    }

    #wrapper {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        border: none;
        background: none;




    }



    #leftside {
        margin-top: 32px;
        align-self: center;





    }

    aside {


        border: 4px solid RGBA(119, 158, 203, 0.7);

    }

    #leftside p {
        margin: 0;
    }

    #leftside h3 {
        font-family: 'Philosopher', sans-serif;
    }

    #myresume {
        margin: 0;
    }

    #logo {
        padding-bottom: 20px;
    }


    #resume {

        display: flex;
        flex-direction: column;
        background: whitesmoke;
        margin-top: 10px;
        margin-bottom: 10px;
        border: 4px solid RGBA(119, 158, 203, 0.7);
        min-height: 2350px;


    }







    #education {


        display: flex;
        flex-direction: row;

        align-items: center;

     






    }






    #Elon {
        border-right: 4px dotted black;
        padding-right: 0;
        align-items: center;

        min-height: 450px;
        justify-content: flex-start;

    }

    #details {
        padding-left: 5px;
        padding-right: 5px;
    }

    #Elon h3 {
        font-size: 20px;
        margin: 0;
    }



    #UNC {
        align-items: center;

        padding-left: 0;
        min-height: 450px;
        justify-content: flex-start;
    }


    #UNC h3 {
        font-size: 20px;
        margin: 0;
    }

    #UNC h4 {
        font-size: 20px;
    }

    #details2 {
        padding-left: 5px;
        padding-right: 5px;
    }









    #experienceheader {

        font-family: 'Philosopher', sans-serif;
        font-size: 1.5625rem;



    }

    #experienceheader h1 {

        margin-top: 10px;
        margin-bottom: 20px;

    }


    #experience {

      
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 4px dotted black;
        padding-bottom: 20px;


    }

    #CNN {

 
        justify-content: center;
        border-right: none;
        padding-right: 0px;
        min-width: 100%;
        border-bottom: 2px dotted black;
        padding-bottom: 10px;

    }


    #CNN h3 {
        font-size: 28px;
    }











    #Cox {


       
        max-width: 100%;
        border-right: none;
        padding-top: 10px;
        padding-bottom: 10px;
        justify-content: center;
        border-bottom: 2px dotted black;
        

    }



    #Cox h3 {
        margin: 0;
        font-size: 30px;
    }





    #SOP {
     
        max-width: 100%;
        text-align: center;
        padding-left: 0px;
        padding-top: 10px;

    }




    #SOP h3 {
        margin: 0;
        font-size: 28px;
    }

    #SOP h4 {
        margin: 0;
        font-size: 20px;

    }

    #SOPdetails {

        margin: 0;

        padding-top: 20px;

    }

    #SOPspecifics {

        margin: 0;
        padding-top: 20px;

    }

    #SOPdetails h4 {
        font-family: 'Muli:700', sans-serif;
        margin: 0;


    }

    #SOPdetails p {
        margin: 0;

    }

    #skillsheader {

        font-family: 'Philosopher', sans-serif;
        font-size: 1.5625rem;








    }

    #skillsheader h1 {


        margin: 0;

        margin-top: 10px;
        margin-bottom: 20px;


    }



    #skills {

        width: 100%;
        display: flex;
        flex-direction: column;
      
        





    }

    #skills p {

        font-style: italic;

    }

    img {
        max-width: 48px;
        margin: 0;

    }

    figure {
        margin: 0;



    }

    #expert {

        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 2px dotted black;
        border-bottom: 2px dotted black;


    }



    #advanced {
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 2px dotted black;

    }

    #intermediate {

        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 2px dotted black;


    }

    #beginner {

        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 10px;
        padding-bottom: 10px;

    }

    .icons {
        width: 100px;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;


    }



}