.round{
    animation: round 10s linear infinite;
}

@keyframes round{

    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}


.diseno{
    animation: diseno 4s linear infinite;
}

@keyframes diseno{

    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}


.disenonuevo{
    animation: disenonuevo 30s linear infinite;
}

@keyframes disenonuevo{

    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}


.profile-widget{
    /*width: 100%;
    height: 50vh;*/
    background: #333; 
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
}


.music-player{
    text-align: center;
}



.progress{
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #f53192;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 2%;
    justify-content: center;
}

.progress::-webkit-slider-thumb{
    -webkit-appearance: none;
    background: #f53192;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 8px solid #fff;
    box-shadow: 0 10px 10px rgba(255, 26, 26, 0.22);
}

.controls{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
}





#barra{
    justify-content: center;
    align-items: center;
    background-color: #B1ADAD;
    color: #FFF;
    margin-top: 5px;
    font-family: 'Centuty Gothic';
    font-size: 13px;
    font-weight: bold;
}


.pro{
    float: left;
}

.dur{
    float: right;
}


.controls div{
    width: 30px;
    height: 30px;
    margin: 15px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #f53192;
    box-shadow: 0 5px 5px rgba(255, 26, 26, 0.22);
    cursor: pointer;
}


.controls .descarga{
    width: 35px;
    height: 35px;
    margin: 15px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #f53192;
    box-shadow: 0 5px 5px rgba(255, 26, 26, 0.22);
    cursor: pointer;
}

.controls div:nth-child(2){
    transform: scale(1.5);
    background: #f53192;
    color: #fff;
}


.letras{
  
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(255, 255, 255), #fff, rgb(255, 255, 255));
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 15s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}



/*.albumfondo{
    background-image: url("../albumfotos/nelson.jpg");
    background-repeat: no-repeat;
}*/