@import url("https://fonts.googleapis.com/css2?family=Elsie:wght@400;900&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Libre+Baskerville:wght@400;700&display=swap");

:root {
      --outer-bg: #9caadf;
      --inner-bg: #641f3b;
      --stamp: #ecf0f1;
      --date: #e5b2d7;
      --text: #9caadf;
    }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--outer-bg);
}

.stamp {
    width: 100%;
    display: flex;
    justify-content: center;
}

.stamp-svg {
    width: min(94vw, 560px);
    max-height: 90vh;
    height: auto;
    display: block;
}

.stamp-border {
    fill: var(--stamp);
}

.stamp-inner {
    fill: var(--inner-bg);
}

.save-date-title {
    fill: var(--text);
    font-family: "Elsie", serif;
    font-size: 2.6rem;
    font-weight: 600;
}

.details-text {
    fill: var(--text);
    font-family: "Elsie", serif;
    font-size: 2.45rem;
    font-weight: 600;
    letter-spacing: 0.017rem;
}

.date {
    fill: var(--date);
    font-family: "Libre Baskerville", serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0.001em;
    transform: translateY(28px) scaleY(1.24);
}

#date {
    opacity: 0;
    transition: opacity 0.8s ease;
}

#date.visible {
    opacity: 1;
}

.names {
    fill: var(--text);
    transform: translateY(84px);
    font-family: "Fraunces", serif;
    font-size: 1.77rem;
    font-weight: 550;
}

#names {
    opacity: 0;
    transform: translateY(74px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#names.visible {
    opacity: 1;
    transform: translateY(84px);
}

.location {
    fill: var(--text);
    transform: translateY(95px);
    font-family: "Fraunces", serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.015rem;
}

#location {
    opacity: 0;
    transform: translateY(105px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#location.visible {
    opacity: 1;
    transform: translateY(95px);
}