.span-greetings {
    font-family: "Titillium Web", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 40px;
    color: #fff;
    margin: 0;
}

/* Efectos de "Soy Facundo Pepino" */
.span-showname {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-size: 80px;
    font-style: normal;
    color: #fff;
    margin: 0;
    display: block;
}
.span-showname:after {
    content: "";
    animation: abomination1 10s linear 1;
    animation-fill-mode: forwards;
}

@keyframes abomination1 {
    0% {
        content: "S";
    }

    4% {
        content: "So";
    }

    8% {
        content: "Soy";
    }

    12% {
        content: "Soy ";
    }

    16% {
        content: "Soy F";
    }

    20% {
        content: "Soy Fa";
    }

    24% {
        content: "Soy Fac";
    }

    28% {
        content: "Soy Facu";
    }

    32% {
        content: "Soy Facun";
    }

    36% {
        content: "Soy Facund";
    }

    40% {
        content: "Soy Facundo";
    }

    44% {
        content: "Soy Facundo ";
    }

    48% {
        content: "Soy Facundo P";
    }

    52% {
        content: "Soy Facundo Pe";
    }

    56% {
        content: "Soy Facundo Pep";
    }

    60% {
        content: "Soy Facundo Pepi";
    }

    64% {
        content: "Soy Facundo Pepin";
    }

    68% {
        content: "Soy Facundo Pepino";
    }

    72% {
        content: "Soy Facundo Pepino";
    }

    100% {
        content: "Soy Facundo Pepino_";
    }
}

/*Nav a otras paginas*/
.first_page_nav {
    display: flex;
    flex-direction: column;
}
.first_page_nav a {
    text-decoration: none;
    display: flex;
    /*  Esto hace que los elementos hijos (en este caso, los botones) se dispongan dentro del <a> usando las propiedades de flexbox. */
}
/*Nav a otras paginas*/

/* CUBO RUBIK */

.cube{transition: 1s ease;} /* Para cuando se cambia de color en el modo oscuro*/

.rubiks-cube:hover{
    scale: 1.2;
    transition: ease-in 0.5s;
    cursor: pointer;
}/* Para cuando se coloca el mouse sobre el cubo*/

.rubiks-cube:active{
    scale: 2;
    transition: 1s ease;
}
.rubiks-cube:active::after{
    scale: normal;
}

.my-loader {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    margin: 100px auto;
}

.rubiks-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: my-rotateCube 5s infinite linear;
    transition: ease-in 0.5s;/* Para cuando se coloca el mouse sobre el cubo*/
}

.my-loader .face {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.my-loader .face.front {
    transform: translateZ(100px);
}

.my-loader .face.back {
    transform: rotateY(180deg) translateZ(100px);
}

.my-loader .face.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.my-loader .face.right {
    transform: rotateY(90deg) translateZ(100px);
}

.my-loader .face.top {
    transform: rotateX(90deg) translateZ(100px);
}

.my-loader .face.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.my-loader .cube {
    width: calc(100% / 3);
    height: calc(100% / 3);
    box-sizing: border-box;
    border: 1px solid #000;
}

@keyframes my-rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

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

@media (max-width: 950px) {

    header {
        margin-top: 100px;
        margin-bottom: 100px;
    }

}