/******** Imports *******/
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "templateStyles.css";
@import "nav.css";
@import "about.css";
@import "cv.css";
@import "projects.css";
@import "contact.css";
@import "footer.css";

/**** Media Queries *****/

@media screen and (max-width: 90em) {

    /****** CV Styles *******/

    section#curriculumVitae .cvGrid {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    section#curriculumVitae .cvGrid > div {
        width: 100%;
    }

    section#curriculumVitae .cvGrid > div:first-child {
        padding-bottom: 2.5em;
        margin-bottom: 2.5em;
        border-bottom: 5px #FFFFFF solid;
    }

    section#curriculumVitae .cvGrid h2 {
        margin-left: 5em;
    }

    section#curriculumVitae .cvGrid .timeline {
        margin: 0 auto;
    }

}

@media screen and (max-width: 75em) {

    /*** Template Styles ****/

    section#about, section#curriculumVitae h1  {
        padding: 0 1em;
    }

    /***** About Styles *****/

    section#about div {
        padding: 0.1em 2.5em;
    }

    /****** CV Styles *******/

    section#curriculumVitae .cvGrid {
        padding: 0;
    }

    /**** Projects Styles ***/

    section#projects {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    section#projects .mainProj {
        border-right: 0;
        padding: 0;
        width: 100%;
        margin: 0 5em;
    }

    section#projects .mainProj img {
        padding: 0 1em;
    }

    section#projects .mainProj .flexRow {
        flex-direction: column;
        margin: 0 2.5em;
    }

    section#projects .mainProj .flexCol {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    section#projects .otherProj {
        width: 100%;
    }

    section#projects .otherProj .btn{
        width: 10em;
        text-align: center;
    }

    section#projects .otherProj > div .oProjItem, section#projects .otherProj > div .oProjItem:nth-child(2) {
        flex-direction: column;
    }

    section#projects .oProjItem .flexCol div:nth-child(2) {
        justify-content: center;
        margin-left: 0;
        margin-bottom: 1em;
    }

    section#projects .otherProj > a {
        margin-left: 3em;
        margin-right: 3em;
        text-align: center;

    }

    section#allProjects #otherProj .oProjItem {
        width: 45%;
    }

    /****** Contact Styles ******/
    
    section#contact {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    div#findMe, div#sayHello {
      width: 100%;
      
    }
    
    div#findMe .findMeContainer {
      flex-direction: column;
      justify-content: center;
    }
    
    div#findMe .socialIcons {
      flex-direction: row;
    }
    
    div#findMe .socialIcons div {
      flex-direction: row;
    }
}

@media screen and (max-width: 55em) {

    /****** CV Styles *******/

    section#curriculumVitae .cvGrid .timeline, section#curriculumVitae .cvGrid .timeline#work {
        margin: 0 auto;
        width: 100%;
    }

    section#curriculumVitae .timeline:before {
        border: none;
    }

    section#curriculumVitae .timelineItem, section#curriculumVitae .timelineItem:nth-child(2n) {
        width: 95%;
        padding: 0;
        margin: 0 auto;
    }

    section#curriculumVitae .timelineItem:before {
        right: unset;
        left: unset;
        border: none;
    }

    section#allProjects #mainProj {
        width: auto;
    }

    section#allProjects #otherProj {
        flex-direction: column;
        align-items: center;
    }

    section#allProjects #otherProj .oProjItem {
        width: auto;
    }

    /****** Contact Styles ******/

    div#findMe .socialIcons {
      flex-direction: column;
    }
    
    #contactForm .flName {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
}

@media screen and (max-width: 31em) {

    /*** Template Styles ****/

    section#about, section#curriculumVitae h1 {
        padding: 0 1em;
    }

    /*** Navigation Styles **/

    header div h1 {
        text-align: center;
        height: 5.125rem;
    }

    /***** About Styles *****/

    section#about div {
        padding: 0.1em 1em;
    }

    /**** Projects Styles ***/

    section#projects .mainProj .flexCol {
        flex-direction: column;
    }

    section#projects .oProjItem .flexCol div:nth-child(2) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
}