html{background-image:url(https://img.magnific.com/foto-gratis/fondo-textura-pared-blanca-hormigon-blanco_1017-15560.jpg?semt=ais_hybrid&w=740&q=80);
    background-size:1700px;
}
.music-window{
    width:500px;
    background:#c0c0c0;
    border:3px outset white;
    box-shadow:5px 5px black;
    font-family:"Fira Code";
}

.titlebar{

    height:30px;

    background:linear-gradient(to right,#0a246a,#3a6ea5);

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8px;

    font-weight:bold;

}

.buttons{
    display:flex;
    gap:4px;
}

.btn{

    width:20px;

    height:20px;

    background:#c0c0c0;

    color:black;

    border:2px outset white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:bold;

}

.window-content{

    padding:18px;

    text-align:center;

}

.window-content h1{

    margin:0;

    font-size:32px;

}

.window-content p{

    margin:8px 0;

}
.albums-title{
    text-align:center;
    margin-top:40px;
    font-size:25px;
    background-image:url(https://img.magnific.com/foto-gratis/fondo-textura-madera-marron-blanco_53876-108281.jpg?semt=ais_hybrid&w=740&q=80);     
    border-style: outset;      border-color:#845E4D;     border-radius: 5px;      font-family: "Geist Pixel", sans-serif;      color:white;   
    width:300px;     margin-left:470px;
}

.albums{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    background-image:url(https://cyber-phantom.neocities.org/images-removebg-preview.png);
    background-size:1262px;
    background-repeat:no-repeat;
    min-height:300px;
    padding-top:60px;
}

.album{
    position:relative;
}

.album-img{
    width:150px;
    border:3px solid black;
    cursor:pointer;
    transition:.2s;
    margin-top:30px;
    margin-left:10px;
}

.popup{
    top:-50px;
    display:none;
    position:absolute;
    top:10px;
    left:170px;
    width:220px;
    background:#c0c0c0;
    border:2px outset white;
    z-index:100;
    box-shadow:5px 5px black;

}
.album img:hover{
    transform:scale(1.05);
}
.last .popup{
    left:auto;
    right:170px;
}

.titlebar{

    background:linear-gradient(to right,#0a246a,#3a6ea5);

    color:white;

    padding:4px;

    font-family:"Fira Code";

    font-size:14px;

}

.content{

    padding:10px;

    color:black;

    font-family:"Fira Code";

    font-size:13px;

}

.album:hover .popup{
    display:block;
}

.album.open .popup{
    display:block;
}
.header{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin:30px auto;
}

.blink-column{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.blink-column img{
    width:150px;
    height:31px;
}
.bands-title{
    text-align:center;
    margin-top:80px;
    margin-bottom:20px;
    background-image:url(https://img.magnific.com/foto-gratis/fondo-textura-madera-marron-blanco_53876-108281.jpg?semt=ais_hybrid&w=740&q=80);     
    border-style: outset;      border-color:#845E4D;     border-radius: 5px;      font-family: "Geist Pixel", sans-serif;      color:white;   
    width:300px;     margin-left:470px;
}

.bands{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    background-image:url(https://cyber-phantom.neocities.org/images-removebg-preview.png);

    background-size:1262px;

    background-repeat:repeat-y;

    min-height:300px;

}

.band{
    position:relative;
    margin-top:90px;
}

.band img{

    width:150px;

    height:150px;

    object-fit:cover;

    border:3px solid black;

    cursor:pointer;

    transition:.2s;

}

.band img:hover{

    transform:scale(1.05);

}

.band:hover .popup{

    display:block;

}

.popup{

    display:none;

    position:absolute;

    top:0;

    left:170px;

    width:260px;

    background:#c0c0c0;

    border:2px outset white;

    box-shadow:5px 5px black;

    z-index:100;

}
.files{

    display:flex;

    flex-direction:column;

    padding:8px;

    gap:5px;

}

.files button{

    text-align:left;

    background:#c0c0c0;

    border:2px outset white;

    cursor:pointer;

    font-family:"Fira Code";

}

.tab{

    display:none;

    padding:10px;

    font-family:"Fira Code";

    font-size:13px;

}

.tab.active{

    display:block;

}






.footer{
    background:linear-gradient(to right,#0a246a,#3a6ea5);
    border:2px outset white;
    padding:8px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:"Fira Code";
    font-size:13px;
    color:white;
    margin-top:50px;
}






.music-shelf{

    display:flex;

    justify-content:space-around;

    align-items:center;

    background-image:url(https://cyber-phantom.neocities.org/images-removebg-preview.png);

    background-repeat:no-repeat;

    background-size:1262px;

    min-height:280px;

    margin-bottom:40px;

    padding-top:20px;

}

.record-player{

    position:relative;

    width:350px;

    cursor:pointer;

}

.turntable{

    width:400px;
    margin-top:-100px;
    transition:.2s;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
    
}

.turntable:hover{

    transform:scale(1.05);

}

.speech{

    position:absolute;

    left:230px;

    top:30px;

    width:220px;

    background:white;

    border:2px solid black;

    border-radius:15px;

    padding:10px;

    font-family:"Geist pixel";

    display:block;

}

.speech::after{

    content:"";

    position:absolute;

    left:-15px;

    top:25px;

    border-width:8px;

    border-style:solid;

    border-color:transparent white transparent transparent;

}

.cat{

    width:250px;
    margin-top:80px;

}

#player{

    width:0;

    height:0;

    overflow:hidden;

}




.middle-gif img{
    width:200px;      /* Cambia el tamaño */
    user-select:none;
    margin-left:-80px;
    margin-top:40px;
}
.middle-gif img{
    transition:.2s;
}

.middle-gif img:hover{
    transform:scale(1.1);
}