/* For albums display */

.album-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.album {
    text-align: center;
    padding:5px;
}

.album img {
    width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: optimizeQuality;
}

#albumNumber
{
    min-height:0;
    font-weight: bolder;
}

.album p
{
    min-height: 65px;
    height:max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:0;
}

/* For dynamic resizing of elements */
@media (max-width: 900px) {
    .album-grid {
        display: flex;
        justify-content: center;
        flex-direction: row;
        display: flex;

        flex-wrap: wrap;
        
        flex-basis: 100%;  
        align-items: stretch;
    }

    .album
    {
        flex: 1 1 50%;
    }

    .album-grid :first-child
    {
        flex-basis: 100%;
    }
}

/*
.album-grid :nth-child(1) {
order: 1;
}
*/

/* For scrolling animations */
.scrolling-albums {
    position: absolute;
    left: 0;
    top: 50;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -1; 
  }

.album-cover {
    position: absolute;
    background-size: cover;
    background-position: center;
    opacity: 1;
    mix-blend-mode: multiply;
    animation: scroll-left linear infinite;
    mix-blend-mode: lighten;
    box-shadow: 0px 0px 80px #ffffff4e;
  }

@keyframes scroll-left 
{
    from {
        transform: translateX(120vw);
    }
    to {
        transform: translateX(-10vw);
    }
}

  .header-one-box, .header-two-box, .header-three-box
{
  color: #FFFFFF;
  background-image: linear-gradient(to right, #1a8000 , #10d03a);
}

/*
Album showcase
*/

.body-box .albumShowcaseContent
{
    display:flex;
    flex-direction: row;
}

#showcaseAlbumCover
{
    max-width: 30%;
    max-height:386px;
    object-fit: scale-down;
    image-rendering: optimizeQuality;
}

.albumShowcaseBody .newstitle p
{
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#albumShowcaseTopTitle p
{
    margin:0;
    padding-left: 4px;
    padding-right: 4px;
    font-weight:bolder;
    font-size: 1.2em;
}

#albumShowcaseBottomTitle p
{
    margin:0;
    padding-top:1px;
    padding-bottom:1px;
    padding-left: 4px;
    padding-right: 4px;
}

#showcaseAlbumTracklist {
    column-count: 2;
    column-width: 200px;
    column-gap: 40px;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

#showcaseAlbumTracklist li {
    break-inside: avoid; 
    white-space: nowrap; 
}

@media (max-width:500px)
{
    .albumShowcaseTopDisplay
    {
        max-height:none;
        min-height:fit-content;
        flex-direction:column;
    }

    #showcaseAlbumCover
    {
        max-width:100%;
        max-height:none;
    }

    .albumShowcaseContent li
    {
    }
}

/* For playlists and song lists */
.playlist-songitem
{
    width: 100%;
    height: 48px;

    display: flex;
    flex-direction: row;

    align-items: center;

    font-family: Arial, Helvetica, sans-serif;

    color:black;
}

.songitem-name
{
    width: 30%;

    font-size: 1.0em;
    font-weight:bold;
}

.songitem-descriptionbox
{
    width: 50%;

    display:flex;
    flex-direction: column;
}

.songitem-artistalbumbox
{
    display:flex;
    flex-direction: column;
}

.songitem-duration
{
    width:unset;
    flex-grow: 1;

    display: flex;
    justify-content: right;
}

.songitem-album
{
    font-size: 0.9em;
    font-style: italic;
}

.songitem-artist
{

}

.songitem-duration span
{
    padding-right:5px;
}

.playlist-songitem img
{
    max-height: 100%;
    max-width: 10%;

    min-width: 0;
    min-height:0;

    margin-right:10px;
}

@media (max-width: 500px)
{
    .songitem-name
    {
        font-size: 0.8em;
    }

    .songitem-artist
    {
        font-size:0.8em;
    }

    .songitem-album
    {
        font-size:0.7em;
    }

    .songitem-duration
    {
        font-size:0.8em;
    }
  
}

/* For playlists and album lists */
.playlist-albumitem
{
    width: 100%;
    height:auto;

    display: flex;
    flex-direction: column;

    align-items: left;

    padding: 4px;

    font-family: Arial, Helvetica, sans-serif;

    color:black;
}

.albumitem-name
{
    width: 100%;

    font-size: 1.5em;
    font-weight:bold;
    font-style: italic;
}

.albumitem-card
{
    display: flex; 
    flex-direction: row;
}

.albumitem-descriptionbox
{
    width: 70%;
    display:flex;
    flex-direction: column;

    margin-top: 0px;
    align-self: baseline;

    padding-left: 4px;
}

.albumitem-duration
{
    width:unset;
    flex-grow: 1;

    display: flex;
    align-self:flex-end;
    justify-content: right;
}

.albumitem-albumtitle
{
    display: flex;
    flex-direction: column;
    justify-content:left;

    padding-bottom: 4px;
}

.albumitem-duration span
{
    padding-right:5px;
}

.playlist-albumcover
{
    max-height: 100%;
    max-width: 30%;

    min-width: 32px;
    min-height: 32px;
}

@media(max-width:600px)
{
    .albumitem-card
    {
        flex-direction: column;
    }

    .albumitem-descriptionbox
    {
        width: 100%;
        margin-top: 10px;
    }

    .playlist-albumcover
    {
        max-height: 100%;
        max-width: 100%;
    }
}

@media (max-width: 400px)
{
    .albumitem-name
    {
        font-size: 0.8em;
    }

    .albumitem-artist
    {
        font-size:0.8em;
    }

    .albumitem-album
    {
        font-size:0.7em;
    }

    .albumitem-duration
    {
        font-size:0.8em;
    }
  
}