@font-face {
    font-family: 'MoiraiOne';
    src: url('fonts/MoiraiOne-Regular.ttf') format('truetype');
    
    
}
@font-face {
    font-family: 'Caveat';
    src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
    
    
}



body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}




#heart, #heart2, #heart3 {
    position: relative;
    cursor: pointer;
    margin-bottom: 700px; /* Ajusta la separación entre elementos */
   
    padding: 100px;
}

.container_text1 {
    position: absolute;
    top: 10px; /* Ajusta el valor según sea necesario */
    left: 800px; /* Ajusta el valor según sea necesario */
    z-index: 2; /* Asegura que el texto esté por encima de los elementos de corazón */
}
.container_text2 {
    position: absolute;
    top: 10px;
    right: 890px; /* Ajusta el valor según sea necesario */
    z-index: 2;
}

.container_text3 {
    position: absolute;
    bottom: 10px; /* Ajusta el valor según sea necesario */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
   
}

.text{
    font-family: 'MoiraiOne', cursive;
    cursor: pointer;
    font-size: 5em;
}


#text, #text2, #text3 {
    font-size: 20px; /* Ajusta el tamaño del texto */
    margin: 0;
}

.circle {
    background-color: red;
    width: 346px; /* Ajusta el tamaño del círculo */
    height: 346px; /* Ajusta el tamaño del círculo */
    border-radius: 50%;
    position: absolute;
    transform-origin: bottom center;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 250px solid transparent; /* Ajusta el tamaño del triángulo */
    border-right: 250px solid transparent; /* Ajusta el tamaño del triángulo */
    border-top: 257.5px solid red; /* Ajusta el tamaño del triángulo */
    position: absolute;
    top: 381px; /* Ajusta la posición del triángulo */
    left: -262px; /* Ajusta la posición del triángulo */
}


.popup {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo transparente */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font-size: 3em;
    font-family: 'Caveat', cursive;
}
.popup2  {
    
        display: none;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8); /* Fondo transparente */
        border-radius: 10px;
        padding: 0 50px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    
        /* Nuevos estilos para posicionar en la parte superior */
         /* Ajusta este valor según sea necesario */
        left: 50%;
        transform: translateX(-50%);
        font-size: 3em;
        font-family: 'Caveat', cursive;
        white-space: nowrap;
}
.popup3  {
    
        display: none;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8); /* Fondo transparente */
        border-radius: 10px;
        padding: 0 50px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    
        /* Nuevos estilos para posicionar en la parte superior */
        top: -70px; /* Ajusta este valor según sea necesario */
        left: 50%;
        transform: translateX(-50%);
        font-size: 3em;
        font-family: 'Caveat', cursive;
        white-space: nowrap;
}


button {
    background-color: red;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px 0 0 0;
}

.popup4 {
    display: none;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    /* border: 2px solid black; */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 3em;
    font-family: 'Caveat', cursive;
    z-index: 30;
}




@media only screen and (min-width: 500px) and (max-width: 1380px) {
    /* .circle {
        background-color: green;
    } */

    .popup { 
        font-size: 2em;
        
    }

    .popup2  {
        font-size: 1.5em;
}

    .popup3  {
         /* Nuevos estilos para posicionar en la parte superior */
        top: -40px; /* Ajusta este valor según sea necesario */
        left: 50%;
        transform: translateX(-50%);
        font-size: 2em;
        
        white-space: nowrap;
}
.chico{
    display: block;
}
.boton {
    position: fixed;
    bottom: 10px;
    left: 10px;

    font-family: 'Caveat', cursive;
    font-size: 2em;
}

.container_text1 {
    position: absolute;
    top: 10px; /* Ajusta el valor según sea necesario */
    left: 100px; /* Ajusta el valor según sea necesario */
    z-index: 2; /* Asegura que el texto esté por encima de los elementos de corazón */
}
.container_text2 {
    position: absolute;
    top: 10px;
    right: 190px; /* Ajusta el valor según sea necesario */
    z-index: 2;
}

.container_text3 {
    position: absolute;
    bottom: 10px; /* Ajusta el valor según sea necesario */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
   
}


.circle {
    width: 346px; /* Ajusta el tamaño del círculo */
    height: 346px; /* Ajusta el tamaño del círculo */
}

.triangle {
    width: 0;
    height: 0;
    border-left: 250px solid transparent; /* Ajusta el tamaño del triángulo */
    border-right: 250px solid transparent; /* Ajusta el tamaño del triángulo */
    border-top: 257.5px solid red; /* Ajusta el tamaño del triángulo */
    position: absolute;
    top: 381px; /* Ajusta la posición del triángulo */
    left: -262px; /* Ajusta la posición del triángulo */
}

#heart, #heart2, #heart3 {
    margin-bottom: 500px; /* Ajusta la separación entre elementos */
}


}