/* importar tipografias */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

body {
    font-family: 'Outfit', sans-serif;
    color: #6f7bff;
    background: linear-gradient(135deg, #0a192f, #112240, #0d1117, #112240, #0a192f);
    min-height: 100vh;
    margin: 0;
}

/* Auroras del fondo */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.65;
    animation: aurora 3s infinite alternate ease-in-out;
}

body::before {
    background: #41b4b28c;
    top: -100px;
    left: -100px;
}

body::after {
    background: #6f7bff73;
    bottom: 0;
    right: 0;
    animation: aurora-inversa 3s infinite alternate ease-in-out;
}

.saltaloconejo {
    /* animacion logo */
    animation: flotar 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #6fadff);
}

.botomcito {
    /* animacion boton invitacion */
    display: inline-flex;
    gap: 0.65rem;
    text-decoration: none;
    color: #ffffff;
    background-color: #6f7bff;
    border-radius: 999px;
    padding: 0.95rem 1.4rem;
    align-items: center;
    font-weight: 700;
    box-shadow: 0 0 0 #5865f2b8, 0 10px 22px #5865f26b;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pulse 1.9s infinite;
}

.titulos-color {
    background: linear-gradient(135deg, #ffffff, #20d6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* animacion loglogo */
@keyframes flotar {
    0% {
        /* donde esta quieto */
        transform: translateY(0px);
    }

    50% {
        /* se mueve 20 px abajo */
        transform: translateY(-20px);
    }

    100% {
        /* vuelve a su sitio */
        transform: translateY(0px);
    }
}

/* animacion del enlade de invitacion*/
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #5865f2b8, 0 10px 22px #5865f26b;
    }

    70% {
        box-shadow: 0 0 0 16px #5865f200, 0 10px 22px #5865f26b;
    }

    100% {
        box-shadow: 0 0 0 0 #5966f200, 0 10px 22px #5865f26b;
    }
}

/* animaciones de las auroras */
@keyframes aurora {
    to {
        transform: translate(50px, 50px) scale(1.2);
    }
}

@keyframes aurora-inversa {
    to {
        transform: translate(-50px, -50px) scale(1.2);
    }
}