body {
    background-color: #333;
}

.showcase {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}

.section-header {
    font-family: goudy;
    font-size: 36pt;
}

.featured {
    margin-bottom: 5%;
    padding-bottom: 5%;
    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    background-color: aliceblue;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.socials {
    margin: 5% 0;
    padding: 5% 0;
    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    background-color: aliceblue;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.socials-buffer {
    padding: 20px 0;
}

.socials-buffer a {
    display: grid;
}

.socials-buffer a img {
    
    align-self: center;
    justify-self: center;
}

.all-posts {
    padding:30px;
}

.list {
    margin-bottom: 5%;
    padding-bottom: 5%;
    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    background-color: aliceblue;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.post-thumbnail {
    font-family: goudy;
    width:90%;
    height: 250pt;
    background-color: white;
    display:grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: .3fr .3fr .3fr 2fr;
    grid-template-areas:
    "thumbnail blank"
    "thumbnail published"
    "thumbnail title"
    "thumbnail blurb";
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid lightgray;
    transition: .5s all;
}

.post-thumbnail:hover {
    transform: scale(1.05);
    color:black;
}

.first-post {
    border-top: 1px solid lightgray;
}

#thumbnail {
    grid-area: thumbnail;
    height:300px;
    width:300px;
    justify-self: center;
    justify-self: center;
}

#published {
    grid-area: published;
}

#title {
    grid-area: title;
}

#blurb {
    grid-area: blurb;
    position: relative;
    top: -75px;
    padding-right: 5%;
}



@media screen and (max-width: 750px) {
    .featured, .list, .socials {
        width: 95%;
    }
    .post-thumbnail {
        width:85%;
        height:150px;
        display:grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
        "thumbnail title"
        "thumbnail blurb";
    }

    #thumbnail {
        height:150px;
        width:150px;
    }
    #blurb {
        top: -15px;
        padding-left: 5%;
        text-align: justify;
        text-justify: justify;
    }
    #title {
        position: relative;
        top: 15px;
        padding-left: 5%;
    }
}