/*Animaciones*/

@keyframes Texto-color {
    0% {color:black;}
    30% {color: grey;}
    60% {color: gray;}
    100% {color: rgb(20, 10, 10);}
}

@keyframes bronce{
    0%{background-color:rgb(230, 162, 3)}
    50%{background-color: rgb(200, 142, 7);}
    100%{background-color: rgb(180, 149, 78);}
}


@keyframes plata{
    0%{background-color:rgb(238, 245, 246)}
    50%{background-color: rgb(192, 191, 189);}
    100%{background-color: rgb(158, 156, 152);}
}


@keyframes oro{
    0%{background-color:rgb(221, 217, 5)}
    50%{background-color: rgb(241, 226, 11);}
    100%{background-color: rgb(228, 216, 49);}
}


@keyframes background-color {
    0% {background-color: whitesmoke;}
    40% {background-color: rgb(112, 106, 106);}
    80% {background-color: rgb(163, 159, 159);}
    100%{background-color: white;}
}



.tienda-h1{
    animation-name: Texto-color;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

.bronce-head{
    animation-name: bronce;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.bronce-head button{
    animation-name: bronce;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}


.plata-head{
    animation-name: plata;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.plata-head button{
    animation-name: plata;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.oro-head{
    animation-name: oro;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.oro-head button{
    animation-name: oro;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}