/* below are the media queries for responsive design. This would inlcude things like if a device has the hover feature. The media queries for responsive screen size located at the end of the generalStyles.css file */

@media (hover: none) {
    header nav ul a:active li{
        border: 1px dashed #181F1C;
        background-color: #E9D796;
    }

    p a {
        color: #274029;
        text-decoration: underline;
    }

    p a:active {
        color: #274029;
        text-decoration: none;
        background-color: #E9D796;
    }

    main ul li a {
        color: #274029;
        text-decoration: underline;
    }

    footer a {
        color: #181F1C;
        text-decoration: none;
    }

    img.project {
        width: 100%;
        margin-top: 10%;
        border: 2px dashed #181F1C;
    }

    figcaption a {
        background-color: #E9D796;
    }
}

/* media queries for responsive font size */

/* for a phone on portrait */
@media (max-width: 800px) {
    main {
        font-size: 1.25em;
    }

    header {
        font-size: 1.25em;
    }

    footer p {
        display: block;
        text-align: center;
    }

    footer img {
        margin: auto 47.5%;
    }
}

@media (orientation: portrait) {
    footer p {
        display: block;
        text-align: center;
    }
}

/* for a phone on landscape or possibly a small tablet */
@media (min-width: 801px) {
    main {
        font-size: 1.5em;
    }

    header {
        font-size: 1.5em;
    }

    footer {
        display: flex;
        justify-content: space-evenly;
    }

    footer p {
        font-size: 1.2em;
    }

    footer img {
        width: 5%;
        height: 5%;
        margin-top: 1%;
    }
}
/* for a desktop or really large tablet */

@media (min-width: 1201px) {
    main, header {
        font-size: 1.5em;
    }
}

/* media queries for the responsive hamburger menu */

@media (max-width: 1100px) {
    div.navMenu {
        display: none;
    }

    .hamMenuIcon {
        display: block;
    }

    #hamMenu:checked + label + div.navMenu {
        display: flex;
        position: absolute;
    }

    #hamMenu:checked + label + div.navMenu > ul {
        flex-direction: column;
        position: absolute;
        right: -40px;
        padding: 5%;
        background-color: #FFEED6;
        border: 2px dashed #181F1C;
    }
}