body{ /* make grid on the whole page */
    grid-template-columns: 1fr 1fr 0.2fr 1.5fr 0.5fr;
    grid-template-rows: 0.2fr 1fr 1fr 1fr 0.4fr;
    gap: 5px;
    height: 100vh;
    grid-template-areas: 
    '. . . . .'
    'picture picture . text .'
    'picture picture . text .'
    'picture picture . text .'
    '. . sample . .';
}
#song_info{ /* puts song info in this grid */
    grid-column: 3;
    grid-row: 4;
}
.song-picture{ /* puts the song picture in this grid and places it center */
    grid-area: picture;
    place-content: center;
    text-align: center;
}
.song-picture img{ /* make the image this size and makes sure it shrinks when the screen size shrinks */
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
}
.song-name,
.account-name,
.song-price,
.song-release{ /* puts these items in this grid */
    grid-area: text;
    place-content: center;
    text-align: center;
}
.song-name{
    margin-bottom: 300px;
}
.account-name{
    margin-bottom: 150px;
}
.song-release{
    margin-top: 150px;
}
.song-sample{ /* puts sample in this grid and makes it center and clickable */
    grid-area: sample;
    place-content: center;
    text-align: center;
    cursor: pointer;
}

.add-cart,
.download{ /* puts these buttons in this grid make it center adds background and clickable and stuff */
    grid-column: 4;
    grid-row: 4;
    display: inline-block;
    width: 20%;
    height: 12%;
    align-self: center;
    align-content: center;
    text-align: center;
    justify-self: center;
    margin-bottom: 100px;
    background-color: #fa8128 ;
    color: white;
    border-radius: 10px;
    cursor: pointer;
}
.play{ /* puts this button in these grid area and make it centered and clickable */
    grid-column: 1/ span 2;
    grid-row: 4;
    display: inline-block;
    align-content: center;
    align-self: end;
    text-align: center;
    justify-self: center;
    background-color: #fa8128;
    color: white;
    border-radius: 50px;
    height: 20%;
    width: 30%;
    cursor: pointer;
}
.fa-solid.fa-play{ /* play icon next to the sample */
    background-color: #fa8128;
    display: inline-block;
    align-content: center;
    height: 30%;
    width: 40%;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 8px;
}
.not-found{ /* puts the not found in the middle of the screen */
    grid-column: 2/ span 3;
    grid-row: 3;
}