html,
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}
body {
    margin:             1em;
    font-family:        Arial, Helvetica, sans-serif;
    background:         #222; /* all other bkgrnd elements should inherit this */
    background:         -moz-radial-gradient(center 45deg, circle closest-corner, #333 50%, #111 50%);
    background:         -webkit-gradient(radial, center center, 10, center center, 700, from(#333), to(#111));
}

/* LINKS */

a {
    text-decoration:    none; /* removes hyperlink underline */
    color:              #a53570;
}
a:hover {
    color:              #cc2b5e;
}

/* NAVIGATION MENU */

.topnav {
    overflow:           hidden;
    position:           relative;
    margin-bottom:      .8em;
}
.topnav a,
button {
    float:              right;
    border:             none;
    padding:            0;
    margin-left:        1em;
    text-decoration:    none;
    background:         inherit;
    color:              #a53570;
    font-family:        'Montserrat', sans-serif;
    font-size:          1rem;
    cursor:             pointer;
    text-align:         center;
    transition:         background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance:    none;
}
.topnav a:hover,
.topnav a:focus {
    color:              #f2f2f2;
}
.topnav a:active {
    color:              #cc2b5e;
}

/* INTRO SECTION */

.introduction {
    padding:            1em;
    padding-bottom:     1.8em;
    font-family:        'Montserrat', sans-serif;
    font-size:          1.7rem;
    background:         #a53570;
    background:         -moz-radial-gradient(center 45deg, circle closest-corner, #cc2b5e 50%, #753a88 50%);
    background:         -webkit-gradient(radial, center center, 10, center center, 700, from(#cc2b5e), to(#753a88));
}
.whitetext {
    color:              #f2f2f2;
}
h1 {
    letter-spacing:     .03em;
    padding-right:      3em;
    color:              #222;
}
.intro_content_img img {
    min-width:          150px;
    max-height:         200px;
    height:             auto;
    float:              right;
    margin:             1em;
    margin-top:         0px;
    margin-bottom:      0px;
    border:             7px solid #222;
    border-radius:      500px;
    -webkit-border-radius:  500px;
    -moz-border-radius: 500px;  
}
.intro_content {
    margin-left:        1em;
}
.intro_sentence {
    font-size:          smaller;
}
p {
    color:              #222;
}

/* PROJECTS RESUME AND CONTACT SECTIONS */

.projects {
    background:         none;
    color:              #aaa;
}
.resume,
#contact {
    background:         #f2f2f2;
}
.projects, 
.resume,
#contact {
    padding-right:      1em;
    padding-bottom:     100px;
    padding-left:       2em;
    padding-top:        3em;
    font-family:        'Montserrat', sans-serif;
    font-size:          1rem;
    min-height:         300px;
}
.projects p, 
.projects small, 
.projects ul, 
.projects ol,
.resume p, 
.resume small, 
.resume ul, 
.resume ol,
#contact p,
#contact small,
#contact ul,
#contact ol {
    font-family:        Verdana, Geneva, Tahoma, sans-serif;
    line-height:        28px;
    list-style-type:    none;               /* REMOVES BULLETS FROM UNORDERED LISTS */
}
.projects p {
    color:              #aaa;
}
.resume ul li,
.resume ol li {
    line-height:        160%;
    margin-bottom:      1em;
}
strong {
    font-weight:        600;
}
.projects h2,
.resume h2
#contact h2 {
    font-size:          2em;
}
.projects h3,
.resume h3 {
    padding-top:        1em;
}
.design1_container img,
.design2_container img,
.design3_container img {
    width:              40%;
    height:             auto;
    border:             none;
}
.truth_img_container img {
    width:              auto;
    max-height:         220px;
    border:             none;
}
.portal2014 img {
    max-width:          300px;
    width:              30%;
}
#contact {
    min-height:         300px;
}
.logo2_container {
    display:            none; /* UNTIL I FIND THIS CONTENT I WILL HIDE THIS THEN CAN DELETE THIS CSS LINE */
}

/* FOOTER SECTION */

.foot {
    min-height:         100px;
    margin-top:         20%;
}
.foot_contact {
    color:              #aaa;
    text-align:         center;
}
.fa-envelope,
.fa-github,
.fa-linkedin {
    color:              #a53570;
    font-size:          25px;
    margin-bottom:      1em;
}
.fa-envelope:hover,
.fa-github:hover,
.fa-linkedin:hover {
    color:              #f2f2f2;
    cursor:             pointer;
}
.fa-envelope,
.fa-envelope:hover {
    margin-right:       .65em;
}
.fa-linkedin,
.fa-linkedin:hover {
    margin-left:        .65em;
}
.dl_cv{
    background:         #a53570;
    width:              7rem;
    height:             2rem;
    color:              #222;
    float:              unset;
    font-size:          .7rem;
    margin:             auto;
    border-radius:      2px;
    display:            none; /* REPLACE 'NONE' WITH 'BLOCK' IF YOU ADD A CV FILE LINK FOR DOWNLOAD */
}
.dl_cv:hover{
    background:         #f2f2f2;
    color:              #222;
}
.copy_date {
    font-size:          x-small;
    color:              #444;
    margin-top:         5em;
}

/* RESPONSIVE */

@media only screen and (max-width: 600px) {
    body {
        margin:         0em;}
        .intro_content_img img {
        float:          unset; 
        display:        block; 
        margin:         auto; 
        margin-top:     1em; 
        padding:        0px; 
        max-width:      150px; 
        height:         auto; 
        border:         5px solid #222;
    }
    .topnav {
        display:        none;}
    .intro_content {
        margin-left:    0px;}
    h1 {
        text-align:     center; 
        padding:        0px;}
    .truth_img_container img, 
    .design1_container img,
    .design2_container img,
    .design3_container img,
    .portal2014 img {
        width:          97%;
        max-width:      97%;
        height:         auto;
        max-height:     none;
    }
    .portal2014 img {
        max-width:      500px;
        margin:         auto;
    }
    .resume ul,
    .resume ol {
        padding-left:   0px;
    }
}
@media only screen and (max-width: 490px) {
    .intro_content_text {
        text-align:     center; }
    .intro_content_img img {
        float:          unset;
        display:        block;
        margin:         auto;
    }
}
@media only screen and (max-width: 300px) {
    .intro_content_text {
        font-size:      .5em;}
}