.menuHorizontal a { text-decoration: none; color:crimson;}
.menuVertical a { text-decoration: none; color: white;}

.menuHorizontal {
    height : 75%; font-size: 75%;
    transition: height 0.75s, font-size 0.75s;
}

.menuHorizontal:hover {
    height : 125%; font-size: 125%;
}

.menuVertical {
    background-color:deepskyblue;
    border:1px solid black;
    height:20px; width:100px;
    transition: width 0.75s, background-color 0.75s;
}

.menuVertical:hover {
    background-color: deeppink;
    width: 150px;
}

#element {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 2.5s;
    transform: rotate3d(1,1,1,30deg);
    margin: 50px auto;
}

#element:hover, #element:focus {
    transform: rotate3d(1,1,1,180deg);
}

.face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:100%;
    position:absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color:black;
}

.front {
    background: rgba(90,90,90, 0.7);
    transform: translateZ(50px);
}
.left {
    background: rgba(0,0,210,0.7);
    transform:rotateY(-90deg) translateZ(50px);
}

.top {
    background: rgba(250, 210, 0, 0.7);
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    background: rgba(210, 0, 210, 0.7);
    transform: rotateX(-90deg) translateZ(50px);
}

.back {
    background: rgba(0, 210, 0, 0.7);
    transform:rotateY(180deg) translateZ(50px);
}

.right {
    background: rgba(0,0,210,0.7);
    transform:rotateY(90deg) translateZ(50px);
}

.barraProgreso {
    height:35px; width:1000px; background-color:gray;
    color:black; font-size:150%; font-weight:bold; text-align:center;
    text-transform:uppercase; animation-timing-function:linear; animation-direction: reverse;
    animation-name:progreso; animation-duration:3s; animation-delay: 1.5s;
}

@keyframes progreso {
    0% {background-color:white; width:0px;}
    33% {background-color:red; width:333px;}
    66% {background-color:gold; width:666px;}
    99% {background-color:darkgreen; width:999px;}
}

.rainbow {
    height:100px; width: 100px;
    color:white; font-weight:bold;
    animation-name:rgb; animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.arcoiris {
    height:100px; width: 100px;
    color:white; font-weight:bold;
    animation-name:rgb; animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes rgb {
    0%{background-color: green; }
    16%{background-color: yellow; }
    33%{background-color: orange; }
    50%{background-color: red; }
    67%{background-color: purple; }
    82%{background-color: blue; }
    100%{background-color: green; }
}