html, body {
    font-family: "Cutive Mono", monospace;
    font-weight: 400;
    font-style: normal;
    background-color: #FFFFF0;
    color: #5C5B55;
}

h1, h2, h3, h4 {
    margin: 0;
    width: fit-content;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    width: 650px;
}

.container-text {
    gap: 20px;
    padding: 30px 0;
}

.container-date {
    text-align: right;
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
    justify-content: flex-end;

    .date {
        font-size: 180px;
    }

    .place {
        color: #B7B4A9;
        font-size: 80px;
        margin-top: -40px;
        text-align: right;
        margin-right: 5px;
    }
}

.container-details {
    animation: visible 14s 0s, fadeInSmooth 0.8s 13.9s ease-in-out;
    padding: 30px 0;
    gap: 40px;

    .tile {
        display: flex;
        flex-direction: row;
        gap: 20px;

        .when {
            font-size: 22px;
        }

        .what {
            padding: 0 20px 10px;
            border-left: 1px solid;

            a {
                color: inherit;
                text-decoration: none;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                gap: 4px;

                .name {
                    font-size: 22px;
                }

                .address {
                    font-family: "Lato", sans-serif;
                }
            }
        }
    }
}

.container-rsvp {
    animation: visible 14s 0s, fadeInSmooth 0.8s 13.9s ease-in-out;
    width: fit-content;

    a {
        text-decoration: none;
    }

    button {
        --offset: 5px;
        --border-size: 1px;
        text-decoration: none;

        margin-top: 10px;
        font-size: 34px;
        font-family: "Cutive Mono", monospace;
        max-width: 300px;
        padding: 14px 32px;
        display: block;
        position: relative;
        appearance: none;
        border: 0;
        background: transparent;
        color: #5C5B55;
        text-transform: uppercase;
        letter-spacing: 5px;
        outline: none;
        cursor: pointer;
        border-radius: 0;
        box-shadow: inset 0 0 0 var(--border-size) currentcolor;
        transition: background .8s ease;

        &:hover {
            background: rgba(237, 234, 224, 0.1);
        }
    }

    .button__horizontal,
    .button__vertical {
        position: absolute;
        top: var(--horizontal-offset, 0);
        right: var(--vertical-offset, 0);
        bottom: var(--horizontal-offset, 0);
        left: var(--vertical-offset, 0);
        transition: transform .8s ease;
        will-change: transform;

        &::before {
            content: '';
            position: absolute;
            border: inherit;
        }
    }

    .button__horizontal {
        --vertical-offset: calc(var(--offset) * -1);
        border-top: var(--border-size) solid #B7B4A9;
        border-bottom: var(--border-size) solid #B7B4A9;

        &::before {
            top: calc(var(--vertical-offset) - var(--border-size));
            bottom: calc(var(--vertical-offset) - var(--border-size));
            left: calc(var(--vertical-offset) * -1);
            right: calc(var(--vertical-offset) * -1);
        }
    }

    &:hover .button__horizontal {
        transform: scaleX(0);
    }

    .button__vertical {
        --horizontal-offset: calc(var(--offset) * -1);
        border-left: var(--border-size) solid #B7B4A9;
        border-right: var(--border-size) solid #B7B4A9;

        &::before {
            top: calc(var(--horizontal-offset) * -1);
            bottom: calc(var(--horizontal-offset) * -1);
            left: calc(var(--horizontal-offset) - var(--border-size));
            right: calc(var(--horizontal-offset) - var(--border-size));
        }
    }

    &:hover .button__vertical {
        transform: scaleY(0);
    }
}

.type-we {
    font-size: 26px;
}

.type-you {
    font-size: 24px;
}

.type-fun {
    margin-top: 20px;
    font-size: 20px;
}

.type-we::before {
    content: "We are finally doing it.";
    animation: typing-we 1.5s;
}

.type-you::before {
    content: "And we would like YOU to celebrate with us!";
    animation: fadeIn 2.1s 0s, typing-you 3s 2s;
}

.type-fun::before {
    content: "There will be lots of fun!";
    animation: fadeIn 7.1s 0s, typing 5s 7s;
}

.type::after {
    content: "";
    border-right: 1px solid currentColor;
    opacity: 0;
}

.type-we::after {
    animation: fadeOut 2s, blink 0.8s linear infinite;
}

.type-you::after {
    animation: fadeOut 5.5s 2s, blink 0.8s linear infinite;
}

.type-fun::after {
    animation: fadeOut 5s 7s, blink 0.8s linear infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    99.99% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes visible {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    99.9% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes fadeInSmooth {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    99.99% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes typing-we {
    0% {
        content: "W"
    }
    4% {
        content: "We"
    }
    8% {
        content: "We "
    }
    12% {
        content: "We a"
    }
    16% {
        content: "We ar"
    }
    20% {
        content: "We are"
    }
    24% {
        content: "We are "
    }
    28% {
        content: "We are f"
    }
    32% {
        content: "We are fi"
    }
    36% {
        content: "We are fin"
    }
    40% {
        content: "We are fina"
    }
    44% {
        content: "We are final"
    }
    48% {
        content: "We are finall"
    }
    52% {
        content: "We are finally"
    }
    56% {
        content: "We are finally"
    }
    60% {
        content: "We are finally "
    }
    64% {
        content: "We are finally d"
    }
    68% {
        content: "We are finally do"
    }
    72% {
        content: "We are finally doi"
    }
    76% {
        content: "We are finally doin"
    }
    80% {
        content: "We are finally doing"
    }
    84% {
        content: "We are finally doing "
    }
    88% {
        content: "We are finally doing i"
    }
    92% {
        content: "We are finally doing it"
    }
    96% {
        content: "We are finally doing it."
    }
}

@keyframes typing-you {
    0% {
        content: "A"
    }
    2.4% {
        content: "An"
    }
    4.8% {
        content: "And"
    }
    6.2% {
        content: "And "
    }
    8.6% {
        content: "And w"
    }
    10% {
        content: "And we"
    }
    12.4% {
        content: "And we "
    }
    14.8% {
        content: "And we w"
    }
    16.2% {
        content: "And we wo"
    }
    18.6% {
        content: "And we wou"
    }
    20% {
        content: "And we woul"
    }
    22.4% {
        content: "And we would"
    }
    24.0% {
        content: "And we would "
    }
    26.2% {
        content: "And we would l"
    }
    28.6% {
        content: "And we would li"
    }
    30% {
        content: "And we would lik"
    }
    32.4% {
        content: "And we would like"
    }
    34.8% {
        content: "And we would like "
    }
    36.2% {
        content: "And we would like Y"
    }
    38.6% {
        content: "And we would like YO"
    }
    40% {
        content: "And we would like YOU"
    }
    42.4% {
        content: "And we would like YOU "
    }
    44.8% {
        content: "And we would like YOU t"
    }
    46.2% {
        content: "And we would like YOU to"
    }
    48.6% {
        content: "And we would like YOU to "
    }
    50% {
        content: "And we would like YOU to c"
    }
    52.4% {
        content: "And we would like YOU to ce"
    }
    54.8% {
        content: "And we would like YOU to cel"
    }
    56.2% {
        content: "And we would like YOU to cele"
    }
    58.6% {
        content: "And we would like YOU to celeb"
    }
    60% {
        content: "And we would like YOU to celebr"
    }
    62.4% {
        content: "And we would like YOU to celebra"
    }
    64.8% {
        content: "And we would like YOU to celebrat"
    }
    66.2% {
        content: "And we would like YOU to celebrate"
    }
    68.6% {
        content: "And we would like YOU to celebrate "
    }
    70% {
        content: "And we would like YOU to celebrate w"
    }
    72.4% {
        content: "And we would like YOU to celebrate wi"
    }
    74.8% {
        content: "And we would like YOU to celebrate wit"
    }
    76.2% {
        content: "And we would like YOU to celebrate with"
    }
    78.6% {
        content: "And we would like YOU to celebrate with "
    }
    80% {
        content: "And we would like YOU to celebrate with u"
    }
    82.4% {
        content: "And we would like YOU to celebrate with us"
    }
    84.8% {
        content: "And we would like YOU to celebrate with us!"
    }
}

@keyframes typing {
    0.0000% {
        content: "T";
    }
    1.3% {
        content: "Th";
    }
    2.6% {
        content: "The";
    }
    3.9% {
        content: "Ther";
    }
    5.2% {
        content: "There";
    }
    6.5% {
        content: "There ";
    }
    7.8% {
        content: "There w";
    }
    9.1% {
        content: "There wi";
    }
    10.4% {
        content: "There wil";
    }
    11.7% {
        content: "There will";
    }
    13% {
        content: "There will ";
    }
    14.3% {
        content: "There will b";
    }
    15.6% {
        content: "There will be";
    }
    16.9% {
        content: "There will be ";
    }
    18.2% {
        content: "There will be l";
    }
    19.5% {
        content: "There will be lo";
    }
    20.8% {
        content: "There will be lot";
    }
    22.1% {
        content: "There will be lots";
    }
    23.4% {
        content: "There will be lots ";
    }
    24.7% {
        content: "There will be lots o";
    }
    26% {
        content: "There will be lots of";
    }
    27.3% {
        content: "There will be lots of ";
    }
    28.6% {
        content: "There will be lots of b";
    }
    29.9% {
        content: "There will be lots of bo";
    }
    31.2% {
        content: "There will be lots of boo";
    }
    32.5% {
        content: "There will be lots of booz";
    }
    33.8% {
        content: "There will be lots of booze";
    }
    53% {
        content: "There will be lots of booze";
    }
    56% {
        content: "There will be lots of booz";
    }
    60% {
        content: "There will be lots of boo";
    }
    64% {
        content: "There will be lots of bo";
    }
    68% {
        content: "There will be lots of b";
    }
    72% {
        content: "There will be lots of ";
    }
    76% {
        content: "There will be lots of f";
    }
    80% {
        content: "There will be lots of fu";
    }
    84% {
        content: "There will be lots of fun";
    }
    86% {
        content: "There will be lots of fun!";
    }
}

@keyframes blink {
    0%, 100% {
        color: currentColor;
    }
    50% {
        color: transparent;
    }
}