* {
    margin: 0%;
    padding: 0%;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

/* --------------------------ENCABEZADO-----------------------------*/
header {
    background-color: #222;
    height: 10%;
    display: flex;
    justify-content: center;
    padding-top: 1%;
    padding-bottom: 0.5%;
}

#logo {
    width: 4em;
}

/*----------------------CAJAS CON IMAGENES-------------------------*/
section,
nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section {
    margin: 5% 0;
}

#genres {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2%;
    color: white;
}

.genre {
    position: relative;
}

.img_rock,
.img_hiphop,
.img_indie,
.img_jazz,
.img_reggae {
    width: 100%;
    border-radius: 50%;
    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px,
        rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}
/*filtros*/
.img_rock {
    filter: sepia(100%);
}
.img_hiphop {
    filter: contrast(180%);
}
.img_indie {
    filter: grayscale(50%);
}
.img_jazz {
    filter: hue-rotate(180deg);
}
.img_reggae {
    filter: saturate(50%);
}

h3:hover {
    color: #f2f2f2;
    text-decoration: underline;
}

.img_rock:hover,
.img_hiphop:hover,
.img_indie:hover,
.img_jazz:hover,
.img_reggae:hover {
    filter: grayscale(1) brightness(30%);
}

div h3 {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*----------------------------LISTA OPCIONES-----------------------*/
#options {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3%;

}

#btn-overview,
#btn-top10,
#btn-biggest {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 80%;
    border-style: none;
    background-color: #fff;
    color: #222;
    text-align: center;
    padding: 2%;
    margin-top: 10%;
}

#btn-overview:hover,
#btn-top10:hover,
#btn-biggest:hover {
    color: #f40aa6;
}

/*------------------------TRACK DE CANCIONES----------------------*/

.list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 3%;
}

h1 {
    padding: 2%;
}

table {
    width: 95%;
}
tr:nth-child(odd) {
    background-color: #d3e2bd67;
}

tr {
    font-size: 0.85em;
}

td {
    width: auto;
    padding: 0 1em;
    text-align: start;
}

#icon {
    height: 2em;
}

a:link {
    color: #222;
}