body{
    background-image: url(img/fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;

}

.container{
    display:flex;
    flex-direction: row;
   flex-wrap: nowrap;
    column-gap: 8px;
    justify-content: space-between;
    align-items: center;
    
    
}

.reproductor{
        background-color: rgb(226, 105, 125);
        border-color: white;
        border-radius: 50% 20% / 10% 40%;
        border-width: thick;
    }

.reproductor2{
    background-color: aqua;
    border-color: white;
        border-radius: 50% 20% / 10% 40%;
        border-width: thick;
}

.reproductor3{
    background-color: blueviolet;
    border-color: white;
        border-radius: 50% 20% / 10% 40%;
        border-width: thick;
}

.reproductor4{
    background-color: rgb(103, 8, 133);
    border-color: white;
        border-radius: 50% 20% / 10% 40%;
        border-width: thick;
}

.reproductor5{
    background-color: rgb(99, 63, 63);
    border-color: white;
        border-radius: 50% 20% / 10% 40%;
        border-width: thick;
}

.reproductor6{
    background-color: brown;
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor7{
    background-color: rgb(42, 157, 165);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor8{
    background-color: rgb(201, 115, 35);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor9{
    background-color: rgb(30, 167, 87);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor10{
    background-color: rgb(136, 28, 104);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor11{
    background-color: rgb(102, 173, 21);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor12{
background-color: rgb(187, 196, 72);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor13{
background-color: rgb(12, 95, 189);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor14{
background-color: rgba(19, 177, 40, 0.514);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor15{
background-color: rgb(5, 4, 4);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.ola{
    color: white;
}

.reproductor16{
    background-color:indigo;
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor17{
    background-color: rgb(81, 134, 196);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor18{
    background-color: rgb(240, 120, 7);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor19{
    background-color: rgb(180, 228, 200);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor20{
    background-color: rgb(214, 211, 39);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor21{
    background-color: rgb(192, 89, 106);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor22{
background-color: rgb(68, 141, 141);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor23{
background-color: rgb(59, 9, 105);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor24{
background-color: rgb(102, 80, 109);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.reproductor25{
background-color: rgb(182, 163, 77);
border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor26{
    background-color: rgb(189, 226, 121);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor27{
    background-color: rgb(116, 87, 7);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor28{
    background-color: rgb(8, 163, 34);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor29{
    background-color: rgb(1, 59, 124);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}
.reproductor30{
    background-color: rgb(255, 255, 255);
    border-color: white;
    border-radius: 50% 20% / 10% 40%;
    border-width: thick;
}

.oh{
    background-color: pink;
    transform-style:initial;
    border-color: blueviolet;
    
}

h1{
    font-family:monospace;
}

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