/*-------DESKTOP-------*/
/*-----GENERAL-----*/

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background-image: url("./assets/Piano-Wallpaper.jpg");
    background-repeat: repeat;
    background-size: cover;
  }
  

h1 {
    font-size: 15px;
    text-align: center;
    color: white;
}

p {
    font-size: 10px;
    color: white;
}

img {
    width: 100%;
}

/*-----GRID-----*/
.grid {
    display: grid;
    height: 100vh;
    width: 80%;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.3fr 1fr 1.7fr 0.7fr 0.3fr;
    grid-template-areas:
      "nav nav nav"
      "mimusica textouno inspiraciones"
      "obras obras obras"
      "transcripciones translista translista"
      "footer footer footer";
  
    gap: 10px;
  }

.nav {
    grid-area: nav;
    background-color: rgb(0, 0, 0);
}

.mi-musica {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.mi-musica {
    grid-area: mimusica;
    background-color: rgb(0, 0, 0);
}

.texto-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.texto-1 {
    grid-area: textouno;
    background-color: rgb(0, 0, 0);
}

.inspiraciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.inspiraciones {
    grid-area: inspiraciones;
    background-color: rgb(0, 0, 0);
}

.obras {
    grid-area: obras;
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 5px;
    justify-content: center;
}

.transcripciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.transcripciones {
    grid-area: transcripciones;
    background-color: rgb(0, 0, 0);
}

.transcript-list-container {
    grid-area: translista;
    background-color: rgb(0, 0, 0);
}

.footer {
    grid-area: footer;
    background-color: rgb(0, 0, 0);
}

/*------HEADER------*/

.logo-container {
    display: flex;
    flex-direction: row;
    margin: 0;
    width: 55px;
}

.list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding-left: 0;
    background-color: rgb(0, 0, 0);
    font-size: 10px;
}

li a {
    display: flex;
    text-decoration: none;
    color: white;
    border: 1px solid rgb(85, 85, 85);
    padding: 5px;    
    background-color: rgb(0, 0, 0);
}

li a:hover {
    color: green;
    background-color: yellow;
}

/*------2 3 4 6 ------*/

.mi-musica div {
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mi-musica h1 a {
    display: flex;
    text-decoration: none;
    color: white;
    border: 1px solid rgb(85, 85, 85);
    padding: 5px;    
    background-color: rgb(0, 0, 0);
}

.mi-musica h1 a:hover {
    color: green;
    background-color: yellow;
}

.texto-1 div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.inspiraciones div {
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.inspiraciones h1 a {
    display: flex;
    text-decoration: none;
    color: white;
    border: 1px solid rgb(85, 85, 85);
    padding: 5px;    
    background-color: rgb(0, 0, 0);
}

.inspiraciones h1 a:hover {
    color: green;
    background-color: yellow;
}

.transcripciones div {
    width: 140px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*------ 5 [obras] ------*/

.obras {
    display: flex;
}

.obra-container {
    width: 200px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;   
    margin: 5px; 
}

.obras ul {
    list-style: none;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;   
    margin: 5px; 
}

.obras ul li a {
    font-size: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 5px; 
}

/*------ 7 [Transcripciones Ofertas] ------*/

.transcript-list-container {
    display: flex;
}

.transcript-list-container ul {
    font-size: 15px;
    color: white;
}

.instruments-list {
    list-style: none;
}

/*------ FOOTER ------*/

.footer-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding-left: 0;
    background-color: rgb(0, 0, 0);
    font-size: 10px;
}

/*------ TABLET ------*/

@media only screen and (max-width: 768px) {
    .grid {
        display: grid;
        height: 100vh;
        width: 80%;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.15fr 0.45fr 0.45fr 0.80fr 0.15fr;
        grid-template-areas:
          "nav nav"
          "mimusica textouno"
          "inspiraciones inspiraciones"
          "obras obras"
          "footer footer";
        gap: 10px;
      }

    .transcripciones {
        display: none;
    }

    .transcript-list-container {
        display: none;
    }
}

/*------ MOBILE ------*/

@media only screen and (max-width: 576px) {
    .grid {
        display: grid;
        height: 100vh;
        width: 80%;
        margin: 0 auto;
        grid-template-columns: 1fr;
        grid-template-rows: 0.15fr 0.45fr 0.45fr 0.80fr 0.15fr;
        grid-template-areas:
          "nav"
          "mimusica"
          "textouno"
          "obras"
          "footer";
        gap: 10px;
    }

    .inspiraciones {
        display: none;
    }

    .transcripciones {
        display: none;
    }

    .transcript-list-container {
        display: none;
    }
}