* {
    box-sizing: border-box;
}
body {
   font-family: 'Space Mono'; 
   font-size: 16px;
   margin: 0;
   background-color: #3f4b55;
}


/* nav items <start> */

nav {
    width: 100%;
    background-color: #5cc3ec;
    position: fixed;
    padding-left: 1rem;
    color: #3f4b55;
    border-bottom: 1px solid #336d83;
    opacity: 0.945;
}

nav a {
    color: inherit;
}

nav li {    
    display: inline-block;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

nav #name {
    color: white;
}

nav #name:hover {
    color: #c1a1e3;
}

#right {    
    float: right;
    padding-right: 4rem;    
}

nav li:hover {
    color: #fcfcfc;
}


/* nav items <end> */





/* .selfie <start> */

.selfie {
    padding-top: 10rem;
}

.selfie img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    width: 300px;
    height: 325px;
}

/* .selfie <end> */






/* .aboutme <start> */

.aboutme {
    padding-top: 5rem;
    padding-left: 5rem;
    color: #c5c9cc;    
    text-align: left;
}

.aboutme #button {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    color: lightgray;
    background-color: #3f4b55;
    border: 1px solid #5cc3ec;
    -webkit-transition: color 0.7s;
    -moz-transition: color 0.7s;
    -ms-transition: color 0.7s;
    -o-transition: color 0.7s;
    transition: color 0.7s;
    transition: background-color 0.7s;
}

.aboutme #button:hover {
    background-color: #5cc3ec;
    color: #3f4b55;
}

.aboutme #button:focus {
    outline: none;
}

.aboutme #submitbutton {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    color: lightgray;
    background-color: #3f4b55;
    border: 1px solid #5cc3ec;
    -webkit-transition: color 0.7s;
    -moz-transition: color 0.7s;
    -ms-transition: color 0.7s;
    -o-transition: color 0.7s;
    transition: color 0.7s;
    transition: background-color 0.7s;
}

.aboutme #submitbutton:hover {
    background-color: #5cc3ec;
    color: #3f4b55;
}

.aboutme #submitbutton:focus {
    outline: none;
}

.aboutme #contactMeForm {
    opacity: 0;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
    padding-top: 2rem;
    margin: 0;    
}

.aboutme #contactMeForm.animate {
    opacity: 1;
}

.aboutme #contactMeForm label:hover i {
    transition: color 1s;
    color:#5cc3ec;
}

.aboutme #contactMeForm input[type=text]:focus + .i-color {    
    color: #5cc3ec;
}

.aboutme #contactMeForm input {
    font-size: 1rem;
    font-family: 'Space Mono';
    transition: color 1s;
}


.aboutme #contactMeForm input[type=text] {
    width: 300px;
    -webkit-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
}

.aboutme #contactMeForm input[type=text]:focus {    
    width: 307px;
}

.aboutme #contactMeForm input[type=text]:hover {    
    width: 307px;
}

.aboutme textarea {
    height: 2rem;
    width: 300px;
    transition: all ease-in-out .2s;
    appearance: none;
    -webkit-appearance: none;    
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding: .5em;
    font-size: 1em;
}

.aboutme textarea:hover {
    width: 40rem;
    height: 10rem;
}

.aboutme textarea:valid {
    height: 10rem;
    width: 40rem;
}


.aboutme #hello {
    padding-left: 1.6px;
    font-size: 0.85rem;
    color: #5cc3ec;
    margin: 0;
}

.aboutme #name {  
    font-size: 3rem;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.aboutme #slogan {
    font-size: 1.5rem;
    color: lightgray;
    margin: 0;
    padding-left: 1px;
}

.aboutme #paragraph {
    font-size: 1rem;
    padding-top: 3rem;
    width: 45%;
    margin: 0;
}

.aboutme #paragraph a {
    list-style-type: none;
    text-decoration: none;
    color: #5cc3ec;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.aboutme #paragraph a:hover {
    color: inherit;
}

.aboutme h1 {
    color: white;
    margin: 0;
}

.aboutme #name:hover {
    color: #c1a1e3;
}

/* .aboutme <end> */

/* .animateForm <start> */

.animateForm {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.animateForm:focus {
    width: 100%;
}

/* .animateForm <end> */

/* .mid <start> */

.mid {
    background-color: #5cc3ec;
    height: auto;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 1rem;
}

.mid h2, h3, h4, h5{
    padding-top: 1rem;
    padding-left: 5rem;
    color: #3f4b55;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
    margin: 0;
}

.mid li {
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.mid h2:hover {
    color: white;
}

.mid h3:hover {
    color: white;
}

.mid h4 #roush {
    text-decoration: none;
    color: black;
}

.mid h4 #ford {
    text-decoration: none;
    color:black;
}

.mid #rivian {
    color: #FFFF00;
}

.mid #mansfield {
    text-decoration: none;
    color: black;
}

.mid #goodyear {
    text-decoration: none;
    color: black;
}

.mid #mansfield:hover {
    text-decoration: none;
    color: white;
}

.mid #roush:hover {
    color: white;
}

.mid #ford:hover {
    color:white;
}

.mid li:hover {
    color: white;
}

.mid li #ford {
    color: white;
    text-decoration: none;
}

.mid li #ford:hover {
    color: #3f4b55;
}

.mid ul {
    padding-left: 8rem;
    color: #3f4b55;
    list-style-type: circle;

}

/* .mid <end> */


/* .education <start> */

.education {
    height: auto;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 1rem;
}

.education ul {
    padding-left: 8rem;
    list-style-type: circle;
    color: #c5c9cc;
}

.education li {
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.education li:hover {
    color: white;
}

.education h2{
    padding-top: 1rem;
    padding-left: 5rem;
    color: white;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
    margin: 0;
}

.education h4 {
    color: #c5c9cc;
}

.education h5 {
    color: #9fd48c;
}

/* .education <end> */


/* .certs <start> */

.certs {
    height: auto;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 1rem;
}

.certs ul {
    padding-left: 8rem;
    list-style-type: circle;
    color: #c5c9cc;
}

.certs li {
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.certs li:hover {
    color: white;
}

.certs h2{
    padding-top: 1rem;
    padding-left: 5rem;
    color: white;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
    margin: 0;
}

.certs h4 {
    color: #c5c9cc;
}

.certs h5 {
    color: #9fd48c;
}

/* .certs <end> */



/* .skills <start> */

.skills {
    display: block;
    padding-left: 5rem;
    padding-right: 5rem;
}

.skills h2 {
    padding-top: 1rem;
    color: white;
}

.skills #languages {
    padding-left: 0;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
    color: #9fd48c;
}

.skills #languages:hover {
    color: white;
}

.skills #languages.c:hover:after {  
    color: #9fd48c;
    content: " Intermediate";
}

.skills #languages.py:hover:after {
    color: #9fd48c;
    content: " Advanced";
}

.skills #languages.js:hover:after {
    color: #9fd48c;
    content: " Beginner";
}

.skills #languages.java:hover:after {
    color: #9fd48c;
    content: " Intermediate";
}

.skills #languages.php:hover:after {
    color: #9fd48c;
    content: " Intermediate";
}

.skills #languages.html:hover:after {
    color: #9fd48c;
    content: " Advanced";
}

.skills #languages.css:hover:after {
    color: #9fd48c;
    content: " Intermediate";
}

.skills #database {
    padding-left: 0;
    color: #cbd5d9;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.skills #database:hover {
    color: #e6b214;
}

.skills #database.mysql:hover:after {
    color: #cbd5d9;
    content: " Intermediate";
}

.skills #database.mssql:hover:after {
    color: #cbd5d9;
    content: " Intermediate";
}

.skills #tools {
    padding-left: 0;
    color: #ff7f7f;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

.skills #tools:hover {
    color: #ac00cc;
}

.skills #tools.vscode:hover:after {    
    color: #ff7f7f;
    content: " Advanced";
}

.skills #tools.git:hover:after {
    color: #ff7f7f;
    content: " Intermediate";
}

.skills li {
    text-decoration: none;
    list-style-type: circle;
    color: #c1c2c2;
}

/* .skills <end> */


/* .projects <start> */

.projects {
    display: block;
    padding-left: 5rem;
    padding-right: 5rem;
}

.projects h2 {    
    padding-top: 4%;
    color: white;
}

.projects h3 {
    padding-left: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #5cc3ec;
}

.projects li {
    list-style-type: circle;
    color: white;
}

.projects p {
    color: #c5c9cc;    
}

.projects a {
    text-decoration: none;
    color: white;
}

.projects #website-download:hover:after {
    color: #5cc3ec;
    content: " Download .zip file";
}

.projects #desktop-download.git:hover:after {
    color: #5cc3ec;
    content: " Git Repository";
}

/* .projects <end> */


/* .row && .column <start> */

.column {
    float: left;
    width: 33.33%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* .row && .column <end> */


/* footer <start> */

footer {
    display: block;
    width: 100%;
    min-height: 100%;
    height: auto;
    background-color: #5cc3ec;;
    border-top: 1px solid #336d83;
    margin-top: 11rem;
}

footer p {
    margin: 0;
    padding-left: 3.5rem;
}

/* footer <end> */




/* External Fonts */

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }