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

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.container {
    text-align: center;
}

.logo {
    width: 200px;
    margin-bottom: 40px;
}

.text {
    font-size: 32px;
    margin-bottom: 0px;
}

.text p {
    margin: 0px !important;
}

.text a {
    position: relative;
    background: linear-gradient(#fff, #fff), linear-gradient(#EC008C, #EC008C);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    color: #fff;
    text-decoration: none;
    border: none;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    transition: background-size 0.5s, color 0.5s;
    margin-top: 0%;
}

.text a:hover {
    background-size: 0 2px, 100% 2px;
    color: #EC008C;
}

.button {
    margin-block-start: auto;
    font-family: 'Nunito', sans-serif;
    /* font-size: 16px; */
    position: relative;
    background: linear-gradient(#fff, #fff), linear-gradient(#EC008C, #EC008C);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    color: #fff; /* Color inicial del texto */
    text-decoration: none; /* Elimina el subrayado */
    border: none; /* Elimina el borde del botón */
    padding: 0; /* Elimina el espacio interno del botón */
    background-color: transparent; /* Elimina el fondo */
    cursor: pointer; 
    font: inherit;
    transition: background-size 0.5s, color 0.5s; /* Transiciones para tamaño de fondo y color */
}

.button:hover {
    background-size: 0 2px, 100% 2px;
    color: #EC008C;
}




/* ANIMATION */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}