@charset "utf-8";

/* style.css for Lab 13 in C6P2 Web Development Internship - Brittany Thompson, December 9, 2025 */

.rubik-distressed-regular {
    font-family: "Rubik Distressed", system-ui;
    font-weight: 400;
    font-style: normal;
}

.road-rage-regular {
    font-family: "Road Rage", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
}


body {
    /* width: 90%; */
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    background-color: black;
    color: pink;
}

a {
    color: rgb(244, 152, 168);
}

header {
    text-align: center;
}

header nav ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

ul li,
ol li {
    list-style-position: inside;
}

h2,
h3,
h4 {
    font-family: "Road Rage", sans-serif;
}

main p,
footer p,
main ul li,
footer ul li,
main ol li,
footer ol li {
    font-family: "Special Elite", system-ui;
}

span {
    font-style: italic;
}

img {
    max-width: 100%;
    height: auto;
}

/* desktop media query */
@media (min-width: 1024px) {
    body {
        width: 100%;
    }

    main {
        width: 98%;
        margin: 0 auto;
    }

    img {
        width: 100%;
    }

    header {
        display: grid;
        grid-template-columns: 1fr;
        padding: 2%;
        row-gap: 10%;
        font-family: "Rubik Distressed", system-ui;
        background-image: url(../images-lab-13/banner.jpg);
    }

    header h1 {
        width: fit-content;
        margin: 0 auto;
        font-size: 4em;
        padding: 1%;
        background-color: black;

    }

    .small-nav {
        display: none;
    }

    header nav ul {
        column-gap: 5%;
    }

    header nav ul li {
        font-size: 2em;
        background-color: black;
        padding: 4% 0 2% 0;
    }

    header nav ul li a:hover {
        text-decoration: underline;
    }

    main h2 {
        font-size: 3.5em;
        width: 100%;
        margin-top: 0;
        text-align: center;
        padding-bottom: 4%;
    }

    main h3 {
        font-size: 2.5em;
    }

    h4 {
        font-size: 2.2em;
    }

    footer {
        column-gap: 2%;
        padding-bottom: 2%;
        width: 99%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    footer nav ul li {
        list-style-type: circle;
    }

    footer h2 {
        font-size: 2.5em;
    }

    footer h3 {
        font-size: 2.2em;
    }

    main p,
    main ul li,
    main ol li {
        font-size: 1.5em;
    }

    footer p,
    footer ul li,
    footer ol li {
        font-size: 1em;
    }
}

/* tablet media query */
@media (min-width: 786px) and (max-width: 1023px) {
    body {
        width: 90%
    }

    header {
        display: grid;
        grid-template-columns: 4fr 1fr;
        width: 100%;
        background-image: url(../images-lab-13/banner.jpg);
        height: 7em;
    }

    .full-nav {
        display: none;
    }

    header h1 {
        font-size: 2em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        margin: 5.5% auto;
    }

    footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "art1 art2"
            "art4 art3";
        gap: 2%;
        margin: 1%;
        padding-bottom: 2%;
    }

    .footer-sec1 {
        grid-area: art1;
    }

    .footer-sec2 {
        grid-area: art2;
    }

    .footer-sec3 {
        grid-area: art3;
    }

    .footer-sec4 {
        grid-area: art4;
    }

    main h2 {
        font-size: 2.5em;
        width: 100%;
        margin-top: 0;
        text-align: center;
        padding-bottom: 3%;
    }

    main h3 {
        font-size: 1.5em;
    }

    header nav ul {
        display: grid;
        grid-template-columns: 1fr;
    }

    header nav ul li {
        font-size: 1.2em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        margin: 2% auto;
    }
}

/* mobile media query */
@media (max-width: 786px) {
    body {
        width: 95%;
        margin: 0 auto;
    }

    header {
        background-image: url(../images-lab-13/banner.jpg);
        height: 28em;

    }

    header h1 {
        font-size: 4em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        margin: 5.5% auto;
    }

    header nav ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: space-between;
    }

    header nav ul li {
        font-size: 2.5em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        margin: 1% auto;

    }

    main h2 {
        font-size: 3.5em;
        width: 100%;
        margin: 1% 0 1% 0;
        text-align: center;
        padding-bottom: 3%;
    }

    footer {
        margin: 2% 0 2% 0;
        border-top: 10px outset rgb(223, 112, 131);
    }

    h4 {
        font-size: 1.8em;  
    }

    footer h2 {
        font-size: 3.5em;
    }

    main h3,
    footer h3 {
        font-size: 2.5em;
    }

    main p,
    main ul li,
    main ol li {
        font-size: 1.5em;
    }

    footer p,
    footer ul li,
    footer ul li {
        font-size: 1.2em;
    }
}

/* smaller mobile layouts */
@media (max-width: 480px) {
    header {
        background-image: url(../images-lab-13/banner.jpg);
        height: 25em;
    }

    header h1 {
        font-size: 4em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        margin: 5.5% auto;
    }

    header nav ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: space-between;
    }

    header nav ul li {
        font-size: 2em;
        font-family: "Rubik Distressed", system-ui;
        background-color: black;
        width: fit-content;
        padding: 0 2%;
        margin: 1% auto;
    }

    h4 {
        font-size: 1.8em;  
    }
}

/* footer {
    text-align: center;
    color: antiquewhite;
} */