/* Efectos de "Mis Estudios" */
.span-mystudies:after {
    content: "";
    animation: abomination2 3s ease-out;
    animation-fill-mode: forwards;
}

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

@keyframes abomination2 {
    0% {
        content: "M";
    }

    10% {
        content: "Mi";
    }

    20% {
        content: "Mis";
    }

    30% {
        content: "Mis ";
    }

    40% {
        content: "Mis E";
    }

    50% {
        content: "Mis Es";
    }

    60% {
        content: "Mis Est";
    }

    70% {
        content: "Mis Estu";
    }

    80% {
        content: "Mis Estud";
    }

    90% {
        content: "Mis Estudi";
    }

    95% {
        content: "Mis Estudio";
    }

    100% {
        content: "Mis Estudios";
    }
}
/* Efectos de "Mis Estudios" */

/* Estilos para titulos y parrafos de cada article que representa un curso */
.h2-course {
    font-family: "Titillium Web", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    color: #e0e0e0;
    margin: 0;
}

h3,
p {
    font-family: "Titillium Web", sans-serif;
    font-size: 15px;
    color: #ccc;
}

article {
    display: flex;
    flex-direction: column;
    margin: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background: #2c3e50; /* Fondo oscuro para resaltar el contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: 1s ease;
}

article:hover {
    transition: transform 0.2s ease-in-out;
    background-color: #273454;
    transform: translateY(-5px);
}

/* Estilos para titulos y parrafos de cada article que representa un curso */

/* MediaQueries Para Education*/

@media (max-width: 950px) {

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

    .section_first,
    .section_second {
        min-height: 350PX;
    }

}


/* CUBO 3D */
.cube-loader {
    scale: 3;
    position: relative;
    /* u can choose any size */
    width: 75px;
    height: 75px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg);
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotateX(-30deg) rotateY(0);
    }

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

.cube-loader .cube-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    /* top: 0;
    left: 0; */
    transform-style: preserve-3d;
}

.cube-loader .cube-wrapper .cube-span {
    position: absolute;
    width: 100%;
    height: 100%;

    transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);
    /* width 75px / 2 = 37.5px */
    background: linear-gradient(to bottom,
    hsl(330, 3.13%, 25.1%) 0%,
    hsl(177.27, 21.71%, 28%) 5%,
    hsl(176.67, 34.1%, 32%) 10%,
    hsl(176.61, 42.28%, 36%) 15%,
    hsl(176.63, 48.32%, 40%) 20%,
    hsl(176.66, 53.07%, 44%) 25%,
    hsl(176.7, 56.94%, 48%) 30%,
    hsl(176.74, 62.39%, 50%) 35%,
    hsl(176.77, 69.86%, 52%) 40%,
    hsl(176.8, 76.78%, 54%) 45%,
    hsl(176.83, 83.02%, 55%) 50%,
    hsl(176.85, 88.44%, 56%) 55%,
    hsl(176.86, 92.9%, 57%) 60%,
    hsl(176.88, 96.24%, 57.5%) 65%,
    hsl(176.88, 98.34%, 58%) 70%,
    hsl(176.89, 99.07%, 58.2%) 75%,
    hsl(176.89, 99.07%, 58.4%) 80%,
    hsl(176.89, 99.07%, 58.6%) 85%,
    hsl(176.89, 99.07%, 58.8%) 90%,
    hsl(176.89, 99.07%, 59%) 100%);
}

.cube-top {
    position: absolute;
    width: 75px;
    height: 75px;
    background: hsl(330, 3.13%, 25.1%) 0%;
    /* width 75px / 2 = 37.5px */
    transform: rotateX(90deg) translateZ(37.5px);
    transform-style: preserve-3d;
}

.cube-top::before {
    content: '';
    position: absolute;
    /* u can choose any size */
    width: 75px;
    height: 75px;
    background: hsl(176.61, 42.28%, 40.7%) 19.6%;
    transform: translateZ(-90px);
    filter: blur(10px);
    box-shadow: 0 0 10px #323232,
        0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
        0 0 30px #323232,
        0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
}
/* CUBO 3D */