@font-face {
    font-family: "Bubblegum";
    src: url(../fonts/BubblegumSans-Regular.otf);
}
/* Variables globales personalizadas para curso math*/
:root{
    /* Paleta colores math */
    --math-primary-color: #0B7570;
    --math-secondary-color: #229F99;
    --math-white-color: #F2F2F7;
    --math-black-color: #1C1C1E;
    --math-cites-color: #AEAEB2;
    --math-danger-color: #FA114F;
    --math-suggestion-color: #0071A4;
    /* Colores de grados */
    --math-grado-1: #229F99;
    --math-grado-2: #FA114F;
    --math-grado-3: #FFE014;
    --math-grado-4: #BF5AF2;
    --math-grado-5: #FF9F0A;
    --math-grado-6: #0071A4;

    /* Colores pinsa */
    --pinsa-primary--color: #7648E0;

}
/******************** ESTILOS DE MATH ********************/
/* Letra bubble gum */
.bubble-gum{
    font-family: Bubblegum;
}
/* Colores de fondo */
.bg-math-primary{
    background-color: var(--math-primary-color);
}
.bg-math-secondary{
    background-color: var(--math-secondary-color);
}
.bg-math-white{
    background-color: var(--math-white-color);
}
.bg-math-black{
    background-color: var(--math-black-color);
}
.bg-math-cites{
    background-color: var(--math-cites-color);
}
.bg-math-danger{
    background-color: var(--math-danger-color);
}
.bg-math-suggestion{
    background-color: var(--math-suggestion-color);
}
/* Colores de texto */
.text-math-primary{
    color: var(--math-primary-color);
}
.text-math-secondary{
    color: var(--math-secondary-color);
}
.text-math-white{
    color: var(--math-white-color);
}
.text-math-black{
    color: var(--math-black-color);
}
.text-math-cites{
    color: var(--math-cites-color);
}
.text-math-danger{
    color: var(--math-danger-color);
}
.text-math-suggestion{
    color: var(--math-suggestion-color);
}
/* Colores de borde de grados */
.border-grado-1{
    border: 3px solid var(--math-grado-1);
}
.border-grado-2{
    border: 3px solid var(--math-grado-2);
}
.border-grado-3{
    border: 3px solid var(--math-grado-3);
}
.border-grado-4{
    border: 3px solid var(--math-grado-4);
}
.border-grado-5{
    border: 3px solid var(--math-grado-5);
}
.border-grado-6{
    border: 3px solid var(--math-grado-6);
}
/* Colores fondo de grados */
.bg-grado-1{
    background-color: var(--math-grado-1)
}
.bg-grado-2{
    background-color: var(--math-grado-2)
}
.bg-grado-3{
    background-color: var(--math-grado-3)
}
.bg-grado-4{
    background-color: var(--math-grado-4)
}
.bg-grado-5{
    background-color: var(--math-grado-5)
}
.bg-grado-6{
    background-color: var(--math-grado-6)
}
/* Colores texto de grados */
.text-grado-1{
    color: var(--math-grado-1)
}
.text-grado-2{
    color: var(--math-grado-2)
}
.text-grado-3{
    color: var(--math-grado-3)
}
.text-grado-4{
    color: var(--math-grado-4)
}
.text-grado-5{
    color: var(--math-grado-5)
}
.text-grado-6{
    color: var(--math-grado-6)
}

/******************** ESTILOS DE PINSA ********************/
/* Colores de fondo */
.bg-pinsa-primary {
    background-color: var(--pinsa-primary--color)
}
/* Colores de texto */
.text-pinsa-primary {
    color: var(--pinsa-primary--color)
}

/******************** ESTILOS GENERALES ********************/
body{
    transition: all .25s;
}
/* Tamaño correcto de los svg/iconos */
.svg-size-xxx{
    width: 12.5em;
}
.svg-size-xxl{
    width: 7.5em;
}
.svg-size-xl{
    width: 5em;
}
.svg-size-lg{
    width: 2.5em;
}
.svg-size-m{
    width: 2em;
}
.svg-size-s{
    width: 1.5em;
}
.overflow-y-scroll {
    overflow-y: scroll;
}
/* Invertir elementos verticalmente */
.al-reves{
    transform: scaleX(-1);
}
/* Estilos para portadas de temas */
.banner-tema{
    height: 350px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
/* Efecto glass de contenedores */
.glass{
    background: rgba(110, 97, 97, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(28, 28, 30, 0.35)
}
/* Sombra para textos importantes */
.text-shadow-black{
    text-shadow: 2px 2px 3px var(--math-black-color);
}
.text-shadow-white{
    text-shadow: 3px 3px 2px var(--math-white-color);
}
/* Borde para las letras */
.text-stroke-black{
    -webkit-text-stroke-color: var(--math-black-color);
    -webkit-text-stroke-width: 2px;
}

/*Boton hacia arriba*/
.btnHaciaArriba{
    position: fixed;
    right: 0;
    bottom: 75px;
    border-radius: 100%;
}

/*Boton hacia abajo*/
.btnHaciaAbajo{
    position: fixed;
    right: 0;
    bottom: 0.5%;
    border-radius: 100%;
}

/*Boton de ayuda*/
.btnAyuda{
    position: fixed;
    left: 0;
    bottom: 0.5%;
    border-radius: 100%;
    cursor: pointer;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.btnReload{
    position: fixed;
    left: 0;
    bottom: 75px;
    border-radius: 100%;
    cursor: pointer;
}

/******************** ANIMACIONES SENCILLAS ********************/
.zoomInOut, .zoomInOutHover:hover{
    animation-name: zoomInOut;
    animation-timing-function: linear;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.balance, .balanceHover:hover{
    animation-name: balance;
    animation-timing-function: linear;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.floating, .floatingHover:hover{
    animation-name: floating;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes zoomInOut {
    0%{
        transform: scale(1.02);
    }
    25%{
        transform: scale(1.04);
    }
    50%{
        transform: scale(1.06);
    }
    75%{
        transform: scale(1.04);
    }
    100%{
        transform: scale(1.02);
    }
}
@keyframes zoomInOutHover {
    0%{
        transform: scale(1.02);
    }
    25%{
        transform: scale(1.04);
    }
    50%{
        transform: scale(1.06);
    }
    75%{
        transform: scale(1.04);
    }
    100%{
        transform: scale(1.02);
    }
}
@keyframes balance {
    0%{
        transform: rotate(0deg);
    }25%{
        transform: rotate(-1deg);
    }50%{
        transform: rotate(0deg);
    }75%{
        transform: rotate(1deg);   
    }100%{
        transform: rotate(0deg);
    }
}
@keyframes balanceHover {
    0%{
        transform: rotate(0deg);
    }25%{
        transform: rotate(-1deg);
    }50%{
        transform: rotate(0deg);
    }75%{
        transform: rotate(1deg);   
    }100%{
        transform: rotate(0deg);
    }
}
@keyframes floating {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(8%);
    }
    100%{
        transform: translateY(0%);
    }
}
@keyframes floatingHover {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(8%);
    }
    100%{
        transform: translateY(0%);
    }
}

@keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    }
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    }
}

@keyframes ruberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1);
    }
    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1);
    }
    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1);
    }
    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1);
    }
    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes lightSpeedInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
        transform: translate3d(100%,0,0) skewX(-30deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg)
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) skewX(30deg);
        transform: translate3d(-100%,0,0) skewX(30deg);
    }
    
    60% {
        opacity: 1;
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%) scaleY(0.8);
    }
    30% {
        transform: translateX(-8%) scaleY(0.8);
    }
    40% {
        transform: translateX(2%) scaleY(0.8);
    }
    50% {
        transform: translateX(0%) scaleY(1.1);
    }
    60% {
        opacity: 1;
        transform: translateX(0%) scaleY(0.9);
    }
    70% {
        transform: translateX(0%) scaleY(1.05);
    }
    80% {
        transform: translateX(0%) scaleY(0.95);
    }
    90% {
        transform: translateX(0%) scaleY(1.02);
    }
    100% {
        transform: translateX(0%) scaleY(1);
    }
}