body {
    margin: 0;
    font-family: Poppins, sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #ffb6d9, #ff7fa3, #d18fff, #8462d4);
    background-size: 400% 400%;
    animation: bg 15s ease infinite;
}

@keyframes bg {
    50% {
        background-position: 100% 50%
    }
}

.intro {
    height: 100vh;
    display: grid;
    place-items: center;
    position: relative
}

.rope-svg {
    position: absolute;
    top: 0;
    width: 300px
}

#ropePath {
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw 3s forwards
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.hero {
    text-align: center;
    transition: 1s
}

.hidden {
    opacity: 0
}

.hero.show,
#letter.show {
    opacity: 1
}

.hero h1 {
    font-family: 'Playfair Display';
    font-size: 4rem
}

.tiles {
    padding: 50px 0
}

.tile {
    opacity: 0;
    transform: translateY(50px);
    transition: 1s
}

.tile.show {
    opacity: 1;
    transform: translateY(0)
}

.rope {
    height: 80px;
    width: 4px;
    background: #f5e6c8;
    margin: auto
}

.card {
    background: rgba(255, 255, 255, .9);
    color: #444;
    width: 280px;
    padding: 20px;
    border-radius: 20px;
    margin: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    animation: swing 5s infinite ease-in-out
}

@keyframes swing {
    50% {
        transform: rotate(2deg)
    }
}

.t1,
.t4,
.t7,
.t10 {
    margin-left: 10%
}

.t2,
.t5,
.t8,
.t11 {
    margin-left: 55%
}

.t3,
.t6,
.t9 {
    margin-left: 30%
}

.envelope {
    text-align: center;
    padding: 100px 20px
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 30px
}

@media(max-width:768px) {
    .tile {
        margin: 20px auto !important
    }

    .hero h1 {
        font-size: 2.5rem
    }
}

.floating-heart {
    position: fixed;
    bottom: -50px;

    color: rgba(255, 255, 255, 0.5);

    pointer-events: none;

    animation: floatUp 8s linear forwards;

    z-index: 0;
}

@keyframes floatUp {
    from {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    to {
        transform: translateY(-110vh);
        opacity: 0;
    }
}