/* GOOGLE FONTS */

/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 100 to 1000 */
.roboto-flex-regular {
  font-family: "Roboto Flex", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 100 to 900 */
.roboto-serif-regular {
  font-family: "Roboto Serif", serif;
  /* font-optical-sizing: auto; */
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "GRAD" 0;
}


/* COMMON SENSE RESETS */

/* You *might* want to convert all elements to box-sizing: border box */
* {
    box-sizing: border-box;
}

/* this removes default margin/padding from these elements. You might want to add a few others in here.*/
h1, h2, h3, p, nav ul {
    margin: 0;
    padding: 0;
}

/* this sets images as block elements and makes sure they don't bust out of their containers, and that they maintain their aspect ratio. */
img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    border: 1px solid #000;
}


/* MOBILE LAYOUT */

nav ul {
    list-style-type: none;
}

a {
    display: grid;
    place-content: center;
    height: 3em;
    border-bottom: 1px solid gray;
    text-decoration: none;
    background-color: black;
    color: white;
}

nav ul li:last-of-type a {
    border-bottom: none;
}

main {
    margin: 0 1em 0 1em;
}

header, article {
    margin: 80px auto 80px auto; ;
    padding: 1em;
    border-top: 1px solid #000;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #000;
    box-shadow: 8px 8px 0px 0px #000;
}

h1, h2, h2 a {
    font-family: "Roboto Flex";
    font-weight: 500;
}

h1 {
    font-size: 40px;
}

article p {
    line-height: 150%;
}

h2 {
    margin-top: 1.5em;
    font-size: 24px;
}

p, a, time {
    font-family: "Roboto Serif";
    font-weight: 300;
}

p, time {
    margin: 1em 0 1em 0;
    line-height: 200%;
    font-size: 16px;
}

time {
    display: block;
    color: gray;
}

article time {
    margin: 0.5em 0 0.5em 0;
}

p a, h2 a {
    display: inline;
    text-decoration: underline;
    background: none;
    color: gray;
}

footer {
    display: grid;
    place-content: center;
    margin-top: 80px;
    border-top: 1px solid lightgray;
    color: gray;
}

figure {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    padding: 0;
    margin: 0;
}

figure img {
    flex: 1;
    width: 45vw;
    max-width: 375px;
}


/* DESKTOP LAYOUT */

@media only screen and (min-width: 600px) {
    nav {
        background-color: #000;
    }

    nav ul {
        display: flex;
        gap: 2em;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    header img {
        max-width: 800px;
    }

    a {
        border-bottom: none;
    }

    main {
        max-width: 1000px;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        justify-content: center;
        margin: auto;
        padding: 0 1em;
    }

    article {
        margin: 0;
        width: 400px;
    }

    section {
        max-width: 800px;
    }
}