html,
body {
    margin: 0;
    padding: 0;
}

body {
    /*    background-color: #fafafa;*/
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#546e7a+0,cfd8dc+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    background-repeat: no-repeat;
    background-attachment: fixed;
}
img {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
.container {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
}

h1 {
    font-family: 'Special Elite', cursive;
}

p {
    font-family: 'Source Serif Pro', serif;
}

.title {
    font-size: 2.5rem;
    text-align: center;
    grid-column: 1 / 13;
    text-align: center;
}
.title h1 {
    margin-bottom: 2rem;
    padding: 0;
}

.pixel-art {
    grid-column: 1 / 13;
}

.spotify-embed {
    grid-column-start: 1;
    align-self: center;
}

.bio {
    grid-column: 2 / 13;
}

footer {
    grid-column: 1 / 13;
    text-align: center;

}

footer p {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
}

@media(max-width: 600px) {
    .title {
        font-size: 1.5rem;
    }

    .container {
        width: 80vw;
        margin: 0 auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 1rem;
    }
    
    .spotify-embed,
    .bio, img {
        grid-column: 1 / 13;
        grid-row: auto;
        margin:  0 auto;
    }
}