/* ----- THEMES -----*/
/* ----- Asignacion Variables de colores -----*/
@import url('/styles/themes.css'); /* No se si es necesario */

/* ----- MEDIA QUERIES -----*/

@media screen and (max-width: 919px) {
    main {
        display: grid;
        grid-template-columns: 0;
        grid-template-rows: 1fr;
        grid-template-areas: "song-list";
        gap: 5px;
        margin: 5px 10px 0px 6px;
    }

    .item:nth-child(1) {
        grid-area: song-list;
    }

    .item:nth-child(2) {
        grid-area: song-info;
        width: 100%;
    }

    .item:nth-child(3) {
        grid-area: control-panel;
    }

    .item:nth-child(4) {
        grid-area: account-info;
    }

    #song-info {
      display: none;
    }

    #account-info {
        width: 96dvw;
    }
    #song-list {
      width: 96dvw;
  
  }

    #lyrics-container {
      display: none;
    }

    #control-panel {
        height: 120px;
        width: 96dvw;
    }

    .btn-nav-settings {
        display: block;
        margin-left: 20px;
    }

    #logo {
        display: none;
    }
}

@media screen and (max-width: 800px) {

    main{
        margin: 5px 0px 0px 6px;
        gap: 0px;
        row-gap: 5px;
    }

    .song-releaseYear{
        display: none;
    }
    .song-duration{
        right: 5%;
    }

    #span-year{
        display: none;
    }

    #album-header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    #albums-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        justify-content: center;
    }
    #search input {
        min-width: 275px;
    }
    .song{
        overflow: hidden;
    }
    #settings-section {
        overflow-x: hidden;
    }

}

@media screen and (max-width: 600px) {
    .song-duration{
        display: none;
    }
    #span-duration{
        display: none;
    }

    #settings-section {
        overflow-x: hidden;
    }

}