* {
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Alinhar verticalmente */
    justify-content: center; /* Centralizar horizontalmente */
    align-items: center; /* Centralizar verticalmente */
    background-color: #1a1a1a;
}

/* Estilos para o texto (label) */
.label {
    font-family: "Madimi One";
    text-align: center;
    color: white;
    padding: 10px;
    margin-bottom: 20px; /* Espaçamento entre o texto e o coração */
}

/* Estilos para o coração */
.heart {
    width: 100px;
    height: 160px;
    position: relative;
    background-color: #E93D3D;
    transform-origin: right bottom;
    border-radius: 15px;
    animation: heart 3s ease infinite;
    margin-right: 100px;
    margin-bottom: 50px;
    transform: rotate(45deg);
}
@keyframes heart {
    0% {
        transform: rotate(45deg);

        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
    5% {
        transform: rotate(45deg) scale(1);
    }
    10% {
        transform: rotate(45deg) scale(1.2);
    }
    25% {
        transform: rotate(45deg) scale(1);
    }
    30% {
        transform: rotate(45deg) scale(1.2);
    }
    45% {
        transform: rotate(45deg) scale(1);
    }
    50% {
        transform: rotate(45deg) scale(1.2);
    }
    65% {
        transform: rotate(45deg) scale(1);
    }
    70% {
        transform: rotate(45deg) scale(1.2);
    }
    85% {
        transform: rotate(45deg) scale(1);
    }
    90% {
        transform: rotate(45deg) scale(1.2);
    }
    95% {
        transform: rotate(45deg) scale(1);
    }
    100% {
        transform: rotate(45deg) scale(1);
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
}

/*
.heart:hover {
    transform: rotate(45deg);
    transition: .5s ease;

    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}*/

.heart:after {
    content: "";

    border-radius: 15px;

    width: 100%;
    height: 100%;

    border-radius: 15px;

    transform-origin: left bottom;

    background-color: #D62424;

    position: absolute;

    transform: rotate(-90deg) translateY(100px);

    /*transition: .5s ease;*/
    animation: heart_after 3s ease infinite;

}

@keyframes heart_after {
    0% {
        transform: rotate(-90deg) translateY(100px);

        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
    100% {
        transform: rotate(-90deg) translateY(100px);
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
}  

button {
    border-radius: 5px;
    background-color: #be114a;

    border: 0;

    padding: 12px 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    border-radius: 24px;
    justify-content: center;

    color: white;
    font-family:"Madimi One";

    transition: .5s;
}

.back {
    width: 30px; /* ajuste a largura do ícone conforme necessário */
    height: 30px; /* ajuste a altura do ícone conforme necessário */
    margin-right: 0px; /* espaço entre o ícone e o texto do botão */
    justify-content: center;
}

.next {
    width: 30px; /* ajuste a largura do ícone conforme necessário */
    height: 30px; /* ajuste a altura do ícone conforme necessário */
    margin-right: 0px; /* espaço entre o ícone e o texto do botão */
    justify-content: center;
}

.pauseAndContinue {
    width: 40px; /* ajuste a largura do ícone conforme necessário */
    height: 40px; /* ajuste a altura do ícone conforme necessário */
    margin-right: 0px; /* espaço entre o ícone e o texto do botão */
    justify-content: center;
} 

button:hover {
    background-color: #c11818;
}

/*
.heart:hover:after {
    transform: rotate(-90deg) translateY(100px);
    transition: .5s ease;

    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    animation: heart 3s ease infinite alternate;
}
*/