*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    margin: 0;
}

body {
    display: flex;
    background-color: #000000;
    justify-content: center;
    align-items: center;
}

/* Menú */
.menu {
    width: 240px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15em;
    margin-bottom: 15em;
}

/* icono inicio desplegable*/
.menu .desplegable {
    position: relative;
    display: flex;
    width: 70px;
    height: 70px;
    background: #000000;
    border: 2px solid rgb(252, 244, 228);
    color: white;
    border-radius: 25%;
    justify-content: center;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
}

/* Tamaño de las imágenes  */
.desplegable img {
    width: 60px;
}

.menu li img {
    width: 35px;
}

/*Circulo de elementos*/
.menu li {
    left: 0;
    list-style: none;
    position: absolute;
    transform-origin: 150px;
    transform: rotate(0deg) translateX(110px);
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--indice));
}

/* Animación de giro del submenú */
.menu.active li {
    transform: rotate(calc(360deg / -8 * var(--indice))) translateX(0px);
}

.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: var(--color);
    border: 3px solid var(--color);
    border-radius: 25%;
    transform: rotate(calc(360deg / 8 * var(--indice)));
    transition: 1s;
}

.menu li a:hover {
    color: rgb(0, 0, 0);
    background: var(--color);
    box-shadow: 0 0 20px var(--color),0 0 40px var(--color),0 0 80px var(--color);
}

.desplegable:hover {
    box-shadow: 0 5px 10px #fff;
    filter: grayscale(100%);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

/*Título*/
.titulo {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    font: normal 16px/normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-decoration: normal;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: pre;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    margin-bottom: 15%;
}

.titulo:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}