@media only screen and (max-width: 600px) {
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        border: none;
        outline: none;
        font-family: 'Roboto Mono', sans-serif;
    }

    body {
        width: 100%;
        height: 100vh;
        background-color: #262424;
        color: #eee5da;
    }

    /*Grid Container*/
    .container {
        display: grid;
        justify-content: center;
        align-content: center;
        max-width: 600px;
        min-width: fit-content;
        margin: auto;
        row-gap: 50px;
        grid-template-rows: repeat(1, auto);
        grid-template-columns: repeat(1, auto);
        grid-template-areas:
            "header"
            "main"
            "spotify"
            "image"
            "about"
            "footer";
    }

    /*Grid Names*/
    header {
        grid-area: header;
    }

    .main {
        grid-area: main;
    }

    .spotify {
        grid-area: spotify;
    }

    .img-container {
        grid-area: image;
    }

    #about {
        grid-area: about;
    }

    footer {
        grid-area: footer;
    }

    header {
        max-width: 600px;
        min-width: fit-content;
    }

    .main {
        max-width: 600px;
        min-width: fit-content;
    }

    .spotify {
        max-width: 600px;
        min-width: fit-content;
    }

    .about {
        max-width: 600px;
        min-width: fit-content;
    }

    footer {
        max-width: 600px;
        min-width: fit-content;
    }
}