/* Main container spacing */
main {
    margin: 70px 10px;
}

/* Top section: profile picture + name + description */
.grid_container,
.top {
    display: grid;
    grid-template-columns: 250px 1fr; /* image left, text right */
    grid-template-rows: auto auto auto auto; /* name + description */
    column-gap: 20px;
    margin-bottom: 40px;
}

input[type="text"],
input[type="file"],
textarea,
button {
    background-color: #1b1f36;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 8px 8px 15px black;
} 

/* Profile picture styling */
.profile_picture img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;
}

/* Position profile image in the first column, spanning two rows */
.profile_picture {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 10px;
}

@media screen and (max-width: 768px) {
    .profile_picture {
        grid-column: 1 / span 2;
        grid-row: 1;
        justify-self: center;
        margin: 5px;
    }

    .file {
        grid-column: 1 / span 2;
        grid-row: 2;
        justify-self: center;
        margin: 5px;
    }
}

/* Profile name positioning */
input[type="text"],
.name {
    grid-column: 2;
    grid-row: 1;
    margin: 5px;
}

@media screen and (max-width: 768px) {
    input[type="text"],
    .name {
        grid-column: 1 / span 2;
        grid-row: 3;
        justify-self: center;
        margin: 5px;
    }
}

/* Profile description positioning */
textarea,
.description {
    grid-column: 2;
    grid-row: 2 / span 3;
    margin: 5px;
}

@media screen and (max-width: 768px) {
    textarea,
    .description {
        grid-column: 1 / span 2;
        grid-row: 4;
        justify-self: center;
        margin: 5px;
    }
}

/* Bottom section */

/* Section header styling */
.section_header {
    display: grid;
    grid-template-columns: 1fr auto; /* title left, button right */
    align-items: center;
}

    /* Artist Layout */
    body.artist .bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        gap: 20px;  
    }

    @media screen and (max-width: 768px) {
        body.artist .bottom {
            grid-template-columns: 1fr;
        }
    }

    body.artist .songs,
    body.artist .albums,
    body.artist .playlists {
        padding: 0 10px;
        border-radius: 10px;
        background-color: #1b1f36;
        box-shadow: 8px 8px 15px black;
    }

    /* User Layout */
    body.user .bottom,
    body.admin .bottom {
        display: block; 
    }

    body.user .songs,
    body.user .albums,
    body.admin .songs,
    body.admin .albums {
        display: none;
    }

    body.user .playlists,
    body.admin .playlists {
        width: 100%;
        padding: 0 10px;
        border-radius: 10px;
        box-shadow: 8px 8px 15px black, 10px 10px 15px #051121 inset;
    }

/* Grid in grid */

    /* List item layout: picture + text */
    .list {
        display: grid;
        grid-template-columns: auto 1fr; /* image left, text right */
        column-gap: 15px;
        align-items: center;
        margin-bottom: 10px;
    }

    /* Small preview images (songs, albums, playlists) */
    .list .picture img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #ffffff;
    }

/* Link styling */
a {
    color: #ffffff;
    text-decoration: none;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: #fa8128;
    font-style: italic;
}