:root {
    --heart-size: 80px;
    --heart-border-radius: 50px;
    --heart-scale: 7;

    --arrow-size: 200px;
    --arrow-rotation: 40deg;

    --paper-size: 80px;
}

@media (max-width: 768px) {
    :root {
        --heart-scale: 4;
    }
}

body {
    margin: 5%;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff94bf;
    font-family: "Pacifico", serif;
}

.heart {
    height: var(--heart-size);
    width: var(--heart-size);
    background: #f20044;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 1px;
    z-index: 1;
}

.heart:before {
    content: '';
    position: absolute;
    height: var(--heart-size);
    width: var(--heart-size);
    background: #f20044;
    top: -60%;
    border-radius: var(--heart-border-radius);
    box-shadow: -10px -10px 90px #f20044;
}

.heart:after {
    content: '';
    position: absolute;
    height: var(--heart-size);
    width: var(--heart-size);
    background: #f20044;
    right: -60%;
    border-radius: var(--heart-border-radius);
    box-shadow: 10px 10px 90px #f20044;
    transition: transform 0.5s ease-in-out;
}

.arrow {
    position: absolute;
    width: 250px;
    height: 180px;
    background-color: gold;
    border-radius: 2px;

    clip-path: polygon(
        70.352% 7.503%, 70.363% 7.704%, 75.844% 13.141%, 74.186% 14.786%,
        68.01% 8.662%, 66.112% 8.662%, 70.629% 13.141%, 68.97% 14.786%,
        62.795% 8.662%, 60.897% 8.662%, 65.414% 13.141%, 63.755% 14.786%,
        57.577% 8.662%, 16.26% 8.662%, 19.021% 14.322%, 1.933% 8.142%,
        0.156% 7.499%, 1.933% 6.856%, 19.021% 0.676%, 16.26% 6.336%,
        57.577% 6.336%, 63.755% 0.214%, 65.414% 1.857%, 60.897% 6.336%,
        62.795% 6.336%, 68.97% 0.214%, 70.629% 1.857%, 66.112% 6.336%,
        68.01% 6.336%, 74.186% 0.214%, 75.844% 1.857%, 70.363% 7.296%,
        70.352% 7.503%
    );

    transform: translate(100vw, 60vh) rotate(var(--arrow-rotation));
    opacity: 0;

    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.7));
}

.animate-arrow {
    animation: shoot-arrow 1s ease-out forwards;
    opacity: 1;
}

@keyframes shoot-arrow {
    0% {
        transform: translate(100vw, 60vh) rotate(var(--arrow-rotation));
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -45%) rotate(var(--arrow-rotation));
        opacity: 1;
    }
}

@keyframes scale-heart {
    0% {
        transform: rotate(-45deg) scale(1);
    }
    100% {
        transform: rotate(-45deg) scale(var(--heart-scale));
    }
}

.scale-heart {
    animation: scale-heart 1s ease-in-out forwards;
    animation-delay: 1s;
}

.paper {
    position: absolute;
    width: var(--paper-size);
    height: var(--paper-size);
    background: #ffcfec;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    z-index: 2;
    rotate: 45deg;
    display: flex;
    box-shadow: 5px 5px 50px #ffcfec;
}

.paper .letter {
    position: absolute;
    font-size: 4px;
    color: #f20044;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    padding: 5px;
}

.pacifico-regular {
    font-family: "Pacifico", serif;
    font-weight: 400;
    font-style: normal;
}