@charset "utf-8";

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

/* desktop media query */
@media (min-width: 1200px) {
    body {
        row-gap: 2%;
    }

    article {
        margin: 2% 0 2% 0;
    }

    /* grid area template */
    .step6 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "h3 h3"
        "div1 div2";
    }

    .step6 h3 {
        grid-area: h3;
    }

    .div1 {
        grid-area: div1;
    }

    .div2 {
        grid-area: div2;
    }

    /* table formatting */
    table {
        border: 10px outset rgb(223, 112, 131);
        width: 100%;
    }

    th,
    td {
        border: 2px solid rgb(244, 152, 168);
        font-size: 1.5em;
        text-align: center;
        height: 80px;
    }

    .bottom-p {
        text-align: center;
        padding-top: 2%;
        font-style: italic;
    }
}

/* tablet media query */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* table formatting */
    table {
        border: 5px outset rgb(223, 112, 131);
        width: 100%;
    }

    th,
    td {
        border: 1px solid rgb(244, 152, 168);
        font-size: 1em;
        text-align: center;
        height: 40px;
    }
    
}

/* mobile media query */
@media (max-width: 1023px) {
    table {
        border: 5px outset rgb(223, 112, 131);
        width: 100%;
        margin: 1% 0 1% 0;
    }

    th,
    td {
        border: 1px solid rgb(244, 152, 168);
        font-size: 1em;
        text-align: center;
        height: 40px;
    }

    main {
        text-align: justify;
    }

    main article, main div {
        margin: 2% 0;
    }
}