/* 
 Module 14 Assignment
 Taylor Jones
 4/28/2025
*/

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Major+Mono+Display&family=Quicksand:wght@300..700&display=swap');

* {
    box-sizing: border-box;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default ruleset in a "mobile first" approach */

body {
    background: rgb(34, 33, 38);
    width: 95vw;
    margin: auto;
    max-width: 1200px;
}

header,
footer,
.followme,
main {
    border: 0.2em solid white;
    border-radius: 3em;
    background: #635a68;
    color: white;
    max-width: 100%;
    margin: 1em 0 1em 0;
}

h1 {
    font-size: 2em;
    color: white;
    margin: 0;
}

h2 {
    text-decoration: underline;
    font-style: italic;
    font-weight: bolder;
    text-align: center;
}

article p {
    text-align: left;
    line-height: 2em;
    padding: 0 2em 0 2em;
}

.followme img {
    max-width: 50%;
}

figure div img {
    max-width: 100%;
    padding: 0.5em 0 0.5em 0;
}

nav .followme div,
aside .followme div {
    display: grid;
}

.followme img,
.followme h3,
.followme div a {
    margin: 0.5em 1.5em 0.5em 1.5em;
    padding: 0.5em;
    text-decoration: none;
}

img {
    max-width: 100%;
}

figcaption {
    text-align: center;
    padding-top: 1em;
}

header {
    text-align: center;
    font-family: "Major Mono Display", monospace;
}

main {
    background: #ebe3eb;
    color: black;
}

.navbutton,
h3 {
    border: 0.2em solid white;
    background: black;
    border-radius: 1em;

}

nav div,
aside div {
    text-align: center;
    border-radius: 2em;
    font-family: "Major Mono Display", monospace;
    font-weight: 1000;
}

p {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-style: normal;
}

footer {
    text-align: center;
    background: #635a68;
    color: white;
}

a:link {
    color: white
}

a:visited {
    color: white
}

table {
    empty-cells: show;
    margin: auto auto 1em auto;
    caption-side: bottom;
    border-collapse: collapse;
    overflow-y: scroll;
    max-width: 100%;
}

table,
th,
td {
    border: 0.2em solid black;
}

td {
    padding: 0.5em;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-style: normal;
}

th {
    background-color: rgb(198, 188, 223);
}

tr:nth-child(even) {
    background-color: rgb(198, 188, 223);
}

tfoot {
    background-color: #635a68;
}

/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {

    h1 {
        font-size: 3em;
    }

    .twogrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
    }

    .twoflex {
        display: flex;
    }

    nav .followme div,
    aside .followme div {
        grid-template-columns: 1fr 1fr;
    }

    article>div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .maincont {
        display: grid;
        grid-template-columns: 12em minmax(0, 1fr) 12em;
        grid-template-areas:
            'left top top'
            'left middle right'
            'left bottom bottom';
        grid-gap: 1em;
        padding: 1.5em;
    }

    header {
        grid-area: top;
    }

    nav {
        grid-area: left;
    }

    aside {
        grid-area: right;
    }

    main {
        grid-area: middle;
    }

    footer {
        grid-area: bottom;
    }

    nav .followme div,
    aside .followme div {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }

    .followme {
        position: sticky;
        top: 0;

    }

    .followme div a {
        margin: 0.5em 1.5em 0.5em 1.5em;
        padding: 1.5em 0.5em 1.5em 0.5em;
    }

    .followme img {
        max-width: 100%;
        margin: 0;
    }

    .followme h3 {
        padding: 1em 1em 1em 0.1em;
        border: 0.1em solid white;
        border-radius: 10em;
        font-size: 3em;
        margin: 1em 0.2em 1em 0.2em;
        text-align: left;
    }
}