/* NAVEGADOR (SIN   TOCAR) */

/* TITULO!!*/
#title_temas{
    padding: 2%;
    text-align: center;
    color: rgb(67, 46, 13);
    background-color: rgba(190, 148, 92, 0.665);
    width: 30%;
    margin: auto;
    margin-top: 3%;
    border: 5px solid rgba(189, 117, 29, 0.833);
    border-radius: 25px;
    font-size: 55px;
}
#title_temas:hover{
    background-color: rgba(202, 127, 137, 0.663);
}

/* INDICE TEMAS!! */

#indice_temas{
    width: 90%;
    margin: auto;
    padding: 3%;

}
#lista_temas{
    display: flex;
    flex-direction: column;
    flex-flow: row wrap;
}
div ul li{
    list-style: none;
    margin: 5%;
    padding: 2%;
    font-size: xx-large;
    background-color: rgba(135, 158, 250, 0.581);
    border-radius: 25px;
    width: 18%;
    text-align: center;
    font-weight: 600;
    color: rgb(61, 44, 18);
    border: 5px saddlebrown solid;
}
#li4, #li5{
    margin-left: 15%;
}
div ul li:hover{
    background-color: rgba(202, 127, 137, 0.663);
}
div ul li a{
    text-align: center;
    box-sizing: border-box;
    padding: 5%;
    color: rgb(61, 44, 18);

}

/*MOVIMIENTOS!!*/

#indice_temas li{
    animation-name: pinball;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#li1{animation-timing-function: ease-in;}
#li2{animation-timing-function: ease-out;}
#li3{animation-timing-function: linear;}
#li4{animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}
#li5{animation-timing-function: cubic-bezier(0.75, 0.2, 0.65, 0.5);}


@keyframes pinball {
    50% {
        background-color: aqua;

    }
}

#indice_temas li:hover{
    transform: rotate(-5deg);
}

/*test

.c1{
    animation-name: pinball2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    position: relative;
    
}
#i1{
    background-color: aqua;
    width: 7%;
    height: 80px;
    border-radius: 55%;
    animation-timing-function: linear;
}
#i2{
    background-color: cornflowerblue;
    width: 7%;
    height: 80px;
    border-radius: 55%;
    animation-timing-function: ease-out;
}
#i3{
    background-color: beige;
    width: 7%;
    height: 80px;
    border-radius: 55%;
    animation-timing-function: ease-in;
}


@keyframes pinball2 {

    50% {
        margin-left: 500px;
    }
    
}*/