.card-layout * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*.card-layout html,*/
/*body {*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    overflow: hidden;*/
/*}*/

.card-layout {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /*background: linear-gradient(0deg, #3654ff, #26fdab) no-repeat;*/
}

.card-layout #app{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.card-layout #swiper {
    height: 70vh;
    aspect-ratio: 2 / 3;
    perspective: 1000px;
    perspective-origin: center 50%;
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-layout .dismissing{
    visibility: hidden !important;
}

.card-layout .card {
    width: 90%;
    height: 90%;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    transform: translateZ(calc(-10px * var(--i))) translateY(calc(-10px * var(--i))) rotate(calc(-1deg * var(--i)));
    z-index: var(--i);
    filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    user-select: none;
    transition: transform 0.5s;
}

.card-layout .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.card-layout #like,
#dislike {
    font-size: 10vw;
    margin: 7vw;
    border-radius: 50%;
    padding: 20px;
    position: relative;
    z-index: 1;
    animation-name: animation1;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    /* don't run animation at the beginning */
    animation-play-state: paused;
}

.card-layout #like.trigger,
#dislike.trigger {
    animation-name: animation2;
}

.card-layout #like {
    color: white;
    background: linear-gradient(60deg, #415cf2, #2ed18a);
}

.card-layout #dislike {
    color: white;
    background: linear-gradient(60deg, #f5b174, #f26555);
}

@keyframes animation1 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
        background: white;
    }
}

@keyframes animation2 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
        background: white;
    }
}
@media only screen and (max-width: 800px) {
    .card-layout #like,
    .card-layout #dislike {
        display: block; /* Asegúrate de que los elementos sean visibles */
        position: fixed; /* Fija la posición del elemento */
        bottom: 0; /* Posición en la parte inferior */
        right: 0; /* Posición en la esquina izquierda */
        margin: 10px; /* Opcional: agrega margen para espaciar el elemento del borde */
        z-index: 1000; /* Opcional: asegura que el elemento esté por encima de otros */
    }
    .card-layout #dislike {
        right: auto; /* Ajusta el segundo elemento para que no se superponga */
        left: 0; /* Mueve el segundo elemento a la izquierda */
    }
}

.like-animation {
    animation: slideRightDisappear 1s forwards;
}

.dislike-animation {
    animation: slideLeftDisappear 1s forwards;
}

@keyframes slideRightDisappear {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(30vh) rotate(90deg); /* Ajusta 30vh según necesites para el efecto de curva */
        opacity: 0;
    }
}

@keyframes slideLeftDisappear {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-100vw) translateY(30vh) rotate(-90deg);
        opacity: 0;
    }
}