:root {
    /*Page Wide Variables*/
    --mainFont: 'Times New Roman', Times, serif; 
    
    /*Header Variables*/
    --headerBackgroundColor: black; 
    --bannerTextColor: white;
}


@media screen and (min-width: 1201px) {


    #navigationBarResponsive {
        display: none;
    }

    #aboutMeContainerResponsive {
        display: none;
    }

    #workSectionContainerResponsive {
        display: none;
    }

    #contactMeResponsiveContainer {
        display: none;
    }

}

/*Anything smaller than 1200 will get the following properties
applied to them.*/
@media screen and (max-width: 1200px) {

    #navigationBar {
        display: none;
    }

    /*
    About Me Section
    */
    #aboutMeContainer {
        display: none;
    }

    .sectionTitleContainer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #profileImageResponsive {
        height: 250px;
    }

    /*
    About Me Section
    */

    /*
    Work Section
    */
    #workSectionContainer {
        display: none;
    }

    .mainProjectImageContainerTextResponsive {
        left: 60%;
    }

    .otherProjectImageContainerText {
        right: 10%;
    }

    /*
    Work Section
    */

    /*
        Contact Me Section
    */
    #contactMeContainer {
        display: none;
    }
    /*
        Contact Me Section
    */
}

/*Anything smaller than 768px will get the following properties
applied to them.*/
@media screen and (max-width: 768px) {

    #aboutMeContainerResponsive {
        height: 800px;
    }

    #profileImageResponsive {
        height: 250px;
    }

    .mainProjectImageContainerTextResponsive {
        left: 55%;
    }

    .otherProjectImageContainerText {
        right: 40px;
    }

    .contactInformationResponsive {
        display: block;
    }
}