@import url(/Style-Framework.css);

body {
    justify-items: center;
}

#MainWindow > .content {
    display: grid;
    grid-template-areas: 
        'PfP TextBox Covers'
        '. Favs .';
    /*grid-template-columns: 25% 50% 25%;*/
    grid-template-columns: 20% 60% 20%;
    /*grid-template-rows: 50% 50%;*/
    
    gap: 0;
}

@media (max-width: 1250) {
    #MainWindow {
        grid-template-areas: 
        'PfP' 
        'TextBox'
        'Favs'
        'Covers';
    }
}

#PfPWindow {
    grid-area: PfP;
    grid-row: 1 / span 2;
}

#TextWindow {
    grid-area: TextBox;
}

/*-----------------Fixations css-----------------*/
#FavsWindow {
    grid-area: Favs;
    grid-row: 2 /span 4;
}

#FavsWindow > .content {
    /*display: flex;*/
    height: 64vh;
    overflow-y: scroll;
    scrollbar-width: none;
}

/* Kinda cool worth keeping unused
#FavsWindow > .content div[id] {
	display: none;
}

#FavsWindow > .content div[id]:target {
    display:block;
}*/

/*-----------------Album Covers css-----------------*/
#albumWindow {
    grid-area: Covers;
    grid-row: 1 / span 2;
}

.albumCoverComments img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.albumCoverComments span {
    padding-left: 8px;
}

#albumCovers {
    max-height: 32vh;
    overflow-y: scroll;
    scrollbar-width: none;
    padding: 0;
}