* {
    font-family: "Red Hat Text", sans-serif;
    font-size: clamp(1.07rem, 1.7vw, 1.9rem);
    --bigfont: 3.5rem;
    --midfont: 2rem;
    --baby:  rgb(255, 196, 216);
    --eggplant:  rgb(31, 12, 61);
    --minimargin: 1rem;
}

.red-hat-text {
    font-family: "Red Hat Text", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

body {
    margin-bottom: 6vh;
    padding-top: 5vh;
    display: block inline-block;
    position: relative;
    aspect-ratio: 9 / 19;
    height: 100%;
    background: linear-gradient(-135deg, var(--baby) 15%, var(--eggplant) 100%);
    color: rgb(19, 11, 32);
    background-repeat: no-repeat;
    overflow: hidden;
    justify-content: center;
    justify-items: center;
    align-content: start;
    text-align: center;
}

.card24 {
    display: inline-block;
    aspect-ratio: 9 / 19;
    height: 33em;
    padding: 3em;
    padding-top: 2.5em;
    margin: 0;
    overflow: hidden;
    font-weight: 300;
    line-height: 1.4;
    background: rgb(255, 224, 234);
    text-align: center;
    vertical-align: middle;
    border-radius: 2vh;
    box-shadow: 0.5vh 1vh 1vh rgba(31, 12, 61, 0.575);}

.card24.swipeleft {
    animation: swipe-card-left 0.5s ease-in;
}

@keyframes swipe-card-left {

    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100);
    }
    
}

h2 {
    font-size: var(--midfont);
    font-weight: 500;
    margin-top: -0.5em;
    border-bottom: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgb(255, 224, 234) 15%, black 50%, rgb(255, 224, 234) 85%);
}

p {
    margin-bottom: 1.5em;
}

.thinline {
    border-bottom: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgb(255, 224, 234) 15%, black 50%, rgb(255, 224, 234) 85%);
}

.heart {
    user-select: none;
    display: block;
    font-size: var(--midfont);
    animation: heart-beat 1.5s ease-in infinite;
}

.heart:hover {
    animation-play-state: paused;
}

.heart-shadow {
    box-shadow: 0 0 0.7em black;
    vertical-align: top;
    text-align: center;
    justify-content: center;
    justify-items: center;
    border-radius: 1.5em;
    aspect-ratio: 1 / 2;
}

@keyframes heart-beat {

    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
    
}

.lastCardUI, .nextCardUI {
    display: inline-block;
    vertical-align: middle;
    font-size: var(--bigfont);
    color:rgb(255, 224, 234);
    transition: color 0.3s ease-out, transform 0.3s ease-out;
    width: 5rem;
    height: 5rem;
    cursor: pointer;
}

.lastCardUI {
    margin-right: var(--minimargin);
}

.nextCardUI {
    margin-left: var(--minimargin);
}

.lastCardUI:hover {
    transform: translateX(-0.5rem);
    color: var(--eggplant);
}

.nextCardUI:hover {
    transform: translateX(0.5rem);
    color: var(--eggplant);
}

@media (width <= 38rem) {

    .card24 {
        display: inline-block;
    }

    .lastCardUI, .nextCardUI {
        padding: 0;
        margin: 0;
        position: absolute;
        visibility: hidden;
    }    
}