.header {
    background: #ffffdd;
    padding: 0.5em 1em;
    display: grid;
}

@media (max-width: 399px) {
    .header {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 400px) and (max-width: 549px) {
    .header {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 550px) and (max-width: 749px) {
    .header {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (min-width: 750px) {
    .header {
        grid-template-columns: repeat(7, 1fr);
    }
}

.header .headlink {
    grid-column: auto;
    text-align: center;
}

.content {
    padding: 0 1em 1em;
}

a:hover {
    text-decoration: underline;
}

a {
    text-decoration: none;
}

.header a {
    font-size: larger;
}

ul, ol {
    padding-left: 1em;
}

h2, h3 {
    margin-bottom: 0px;
}

#favoriteButton {
    text-decoration: none;
}

#favoriteButton.favorite .favoriteIcon::after {
    content: "\1F60B";
}
#favoriteButton.nonfavorite .favoriteIcon::after {
    content: "\1F636";
}

@media (min-width: 600px) {
    #recipe_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "subhead0 subhead0"
            "ingredients0head instructions0head"
            "ingredients0 instructions0"
            "sectionnotes0head sectionnotes0head"
            "sectionnotes0 sectionnotes0"
            "subhead1 subhead1"
            "ingredients1head instructions1head"
            "ingredients1 instructions1"
            "sectionnotes1head sectionnotes1head"
            "sectionnotes1 sectionnotes1"
            "subhead2 subhead2"
            "ingredients2head instructions2head"
            "ingredients2 instructions2"
            "sectionnotes2head sectionnotes2head"
            "sectionnotes2 sectionnotes2"
            "noteshead noteshead"
            "notesbody notesbody";
    }

    h2:nth-of-type(1) { grid-area: subhead0; }
    h2:nth-of-type(2) { grid-area: subhead1; }
    h2:nth-of-type(3) { grid-area: subhead2; }

    #ingredients { grid-area: ingredients0head; }
    #ingredients + ul { grid-area: ingredients0; }
    #instructions { grid-area: instructions0head; }
    #instructions + ol { grid-area: instructions0; }
    #section-notes { grid-area: sectionnotes0head; }
    #section-notes + ul { grid-area: sectionnotes0; }

    #ingredients-1 { grid-area: ingredients1head; }
    #ingredients-1 + ul { grid-area: ingredients1; }
    #instructions-1 { grid-area: instructions1head; }
    #instructions-1 + ol { grid-area: instructions1; }
    #section-notes-1 { grid-area: sectionnotes1head; }
    #section-notes-1 + ul { grid-area: sectionnotes1; }

    #ingredients-2 { grid-area: ingredients2head; }
    #ingredients-2 + ul { grid-area: ingredients2; }
    #instructions-2 { grid-area: instructions2head; }
    #instructions-2 + ol { grid-area: instructions2; }
    #section-notes-2 { grid-area: sectionnotes2head; }
    #section-notes-2 + ul { grid-area: sectionnotes2; }

    #notes { grid-area: noteshead; }
    #notes + ul { grid-area: notesbody; }

    ul.recipeList { column-count: 2; }

    #indexLinks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "favoriteHead recentHead"
            "favoriteBody recentBody";
   }

    #favoriteListHeader { grid-area: favoriteHead; }
    #favoritesList { grid-area: favoriteBody; }
    #recentListHeader { grid-area: recentHead; }
    #recentList { grid-area: recentBody; }
}