:root {
    --night: #30343b;
    --night-deep: #252930;
    --paper: #f4f3ef;
    --ink: #1d2024;
    --beige: #e6d8bd;
    --muted: #d6d9db;
    --mono: "Space Mono", "Courier New", monospace;
    --body: "Nunito Sans", "Tahoma", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* dieselbe Farbe wie <meta name="theme-color">: faerbt den Canvas- und
       Overscroll-Bereich, den Safari beim Gummiband-Scrollen freilegt */
    background: var(--night);
    color-scheme: dark;
}

body {
    margin: 0;
    position: relative;
    overflow-x: hidden;
    color: var(--paper);
    background:
        radial-gradient(circle at 80% 8%, rgba(144, 153, 162, .16), transparent 28%),
        radial-gradient(circle at 12% 72%, rgba(91, 103, 112, .22), transparent 32%),
        linear-gradient(150deg, var(--night) 0%, var(--night-deep) 45%, #3b3d3c 80%, var(--night) 100%);
    font-family: var(--body);
}

main,
.footer {
    position: relative;
    z-index: 1;
}

.hero {
    min-height: 35svh;
    padding: 4.5rem 1.3rem 2rem;
    padding-left: max(1.3rem, env(safe-area-inset-left));
    padding-right: max(1.3rem, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eyebrow,
.section-label,
.footer {
    font: 600 .67rem/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eyebrow {
    color: #e0e2e3;
    margin-bottom: 2.2rem;
}

h1,
h2 {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0;
}

h1 {
    font-size: clamp(2.35rem, 11vw, 4rem);
    line-height: 1.3;
    margin: 0;
    color: var(--paper);
}

.age {
    margin: 1.5rem 0 1.7rem;
    color: #a3a9ae;
    font: 700 clamp(1.45rem, 7vw, 2.1rem)/1 var(--mono);
}

.hero-rule {
    width: 54px;
    height: 3px;
    background: #9ba1a6;
    transform: rotate(-3deg);
    margin-bottom: 1.25rem;
}

.hero-note {
    color: var(--muted);
    font: 1.08rem/1.65 "IBM Plex Mono", "Courier New", monospace;
    margin: 0;
}

.quotes {
    padding: 3rem 1.2rem 5.5rem;
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
}

.section-label {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    border-bottom: 1px solid rgba(244, 243, 239, .28);
    padding-bottom: .55rem;
    margin-bottom: 2rem;
}

.quote-list {
    display: flex;
    flex-direction: column;
    gap: calc(2.1rem + 15px);
}

.quote-bubble {
    position: relative;
    width: min(86%, 380px);
    padding: 1.45rem 1.25rem .45rem;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 5px 5px 0 rgba(220, 225, 227, .25), 8px 8px 12px rgba(220, 225, 227, .1);
    border: 3px solid var(--ink);
}

.quote-left {
    align-self: flex-start;
    transform: rotate(-1deg);
    border-radius: 12px 9px 13px 10px;
}

.quote-right {
    align-self: flex-end;
    transform: rotate(1.2deg);
    border-radius: 10px 13px 9px 12px;
}

.quote-bubble p {
    font: .97rem/1.55 var(--body);
}

.quote-bubble p+p {
    margin-top: 10px;
}

.drinking-capacity,
.quote-intro {
    font-family: var(--body);
}

.drinking-capacity p {
    font: inherit;
}

.quote-intro {
    font-weight: 700;
}

.drinking-capacity code {
    display: inline-block;
    margin-right: .35rem;
    padding: .08rem .3rem;
    color: var(--paper);
    background: var(--ink);
    border-radius: 3px;
    font: 700 .88rem/1.3 var(--mono);
}

.gift-section {
    background: var(--beige);
    color: var(--ink);
    padding: 3rem 1.2rem 3.4rem;
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
}

.section-label-dark {
    color: #65615a;
    border-color: rgba(29, 32, 36, .25);
}

.gift-content h2 {
    font-size: clamp(1.65rem, 8vw, 2.1rem);
    margin: 0 0 1.6rem;
}

.steak-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto 1.6rem;
}

.steak-frame {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 3px solid var(--ink);
    border-radius: 5px 2px 6px 3px;
    box-shadow: 8px 8px 0 rgba(53, 45, 32, .28);
    transform: rotate(1.2deg);
}

.steak-frame:nth-child(2) {
    transform: rotate(-.8deg);
}

.steak-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 1.42;
    object-fit: cover;
    border-radius: 2px 1px 3px 2px;
}

.gift-copy {
    max-width: 490px;
    margin: 2rem auto 0;
    font: 500 1.2rem/1.55 var(--body);
}

.steakhouse-name {
    font-weight: 700;
}

.gift-meal {
    white-space: nowrap;
}

.gift-closing {
    white-space: nowrap;
}

.gift-small {
    margin: .75rem 0 0;
    color: #6e6557;
    font: .7rem/1.4 var(--mono);
}

.profiles {
    padding: 5.5rem 1.2rem 6rem;
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
}

.profiles h2 {
    font-size: clamp(1.45rem, 7vw, 2.1rem);
    line-height: 1.25;
    margin: 0 0 .45rem;
    text-align: center;
}

.profiles-note {
    color: var(--muted);
    font: 1.08rem/1.65 "IBM Plex Mono", "Courier New", monospace;
    text-align: center;
    margin: 0 0 2.4rem;
}

.profile-grid {
    row-gap: 2rem;
}

.profile-card {
    text-align: center;
}

.profile-card img {
    width: 70%;
    max-width: 280px;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--paper);
    border-radius: 47% 53% 49% 51% / 52% 47% 53% 48%;
    box-shadow: 5px 5px 0 rgba(220, 225, 227, .34), 2px -1px 0 rgba(244, 243, 239, .45);
    transform: rotate(-2deg);
}

.profile-card:nth-child(even) img {
    border-radius: 52% 48% 51% 49% / 47% 54% 46% 53%;
    transform: rotate(2deg);
}

.profile-card h3 {
    margin: 1rem 0 .2rem;
    font: 700 clamp(1.25rem, 6vw, 1.8rem)/1.3 var(--mono);
}

.profile-card p {
    margin: 0;
    color: var(--muted);
    font: .97rem/1.55 var(--body);
}

.footer {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #c5c9cc;
    padding: 0 1.2rem 4rem;
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
    padding-bottom: max(4rem, calc(2rem + env(safe-area-inset-bottom)));
    font-size: .56rem;
}

.footer-line {
    flex: 1;
    height: 1px;
    background: rgba(174, 178, 183, .3);
}

.party-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    pointer-events: none;
    opacity: .72;
}

.balloon {
    position: absolute;
    display: block;
    width: 68px;
    height: 86px;
    border: 1px solid rgba(217, 221, 224, .18);
    border-radius: 50% 48% 45% 52%;
    background: radial-gradient(circle at 36% 25%, rgba(255, 255, 255, .2), transparent 20%), rgba(170, 177, 183, .18);
}

.balloon::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 130px;
    top: 100%;
    left: 50%;
    background: rgba(220, 223, 225, .18);
    transform: rotate(4deg);
}

.bottle {
    position: absolute;
    font-size: 3.2rem;
    filter: grayscale(1);
    opacity: .350;
    transform: rotate(20deg);
}


.steak-decor {
    position: absolute;
    color: rgba(203, 208, 208, .23);
    filter: grayscale(1);
    font-size: 3.6rem;
    opacity: 1;
}


/* --- Deko-Symbole: automatisch kollisionsfrei platziert --------------- */
/* Basis = schmale Viewports (< 992px): nur was neben/zwischen den
   Inhalten wirklich Platz hat. Ab 992px stehen die Seitenspalten frei,
   dort wird der komplette Satz eingeblendet. */

.party-decor > span {
    display: none;
}

.party-decor > .balloon-eight {
    display: block;
    top: 6%;
    right: 1.2%;
    left: auto;
    transform: rotate(-12deg) scale(.36);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-nine {
    display: block;
    top: 4.2%;
    left: 4.2%;
    right: auto;
    transform: rotate(9deg) scale(.52);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-ten {
    display: block;
    top: 18%;
    left: 1.2%;
    right: auto;
    transform: rotate(-5deg) scale(.3);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-eleven {
    display: block;
    top: 14.6%;
    right: 1.8%;
    left: auto;
    transform: rotate(17deg) scale(.44);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twelve {
    display: block;
    top: 29.2%;
    right: 1.2%;
    left: auto;
    transform: rotate(-13deg) scale(.39);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-thirteen {
    display: block;
    top: 36.2%;
    right: 2.4%;
    left: auto;
    transform: rotate(6deg) scale(.55);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-fourteen {
    display: block;
    top: 45%;
    right: 1.2%;
    left: auto;
    transform: rotate(-16deg) scale(.34);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-nineteen {
    display: block;
    top: 74%;
    right: 4.2%;
    left: auto;
    transform: rotate(7deg) scale(.31);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-one {
    display: block;
    top: 85.4%;
    left: 1.8%;
    right: auto;
    transform: rotate(10deg) scale(.4);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-two {
    display: block;
    top: 91.2%;
    right: 2.4%;
    left: auto;
    transform: rotate(-5deg) scale(.55);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-three {
    display: block;
    top: 85.8%;
    right: 1.2%;
    left: auto;
    transform: rotate(16deg) scale(.32);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-four {
    display: block;
    top: 91%;
    left: 3.6%;
    right: auto;
    transform: rotate(-12deg) scale(.45);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-five {
    display: block;
    top: 11.4%;
    left: 3%;
    right: auto;
    transform: rotate(8deg) scale(.3);
    width: 50px;
    height: 64px;
}

.party-decor > .balloon-twenty-eight {
    display: block;
    top: 93%;
    left: 0.6%;
    right: auto;
    transform: rotate(-7deg) scale(.38);
    width: 50px;
    height: 64px;
}

.party-decor > .bottle-six {
    display: block;
    top: 5.2%;
    right: 3.6%;
    left: auto;
    transform: rotate(-16deg) scale(.58);
    font-size: 2.35rem;
}

.party-decor > .bottle-seven {
    display: block;
    top: 5.2%;
    left: 17.4%;
    right: auto;
    transform: rotate(22deg) scale(.72);
    font-size: 2.35rem;
}

.party-decor > .bottle-eight {
    display: block;
    top: 28.2%;
    right: 1.8%;
    left: auto;
    transform: rotate(-8deg) scale(.65);
    font-size: 2.35rem;
}

.party-decor > .bottle-nine {
    display: block;
    top: 25%;
    left: 2.4%;
    right: auto;
    transform: rotate(14deg) scale(.55);
    font-size: 2.35rem;
}

.party-decor > .bottle-eleven {
    display: block;
    top: 47.2%;
    right: 1.8%;
    left: auto;
    transform: rotate(11deg) scale(.6);
    font-size: 2.35rem;
}

.party-decor > .bottle-fourteen {
    display: block;
    top: 74.2%;
    left: 1.8%;
    right: auto;
    transform: rotate(-9deg) scale(.68);
    font-size: 2.35rem;
}

.party-decor > .bottle-seventeen {
    display: block;
    top: 93.6%;
    right: 1.8%;
    left: auto;
    transform: rotate(7deg) scale(.62);
    font-size: 2.35rem;
}

.party-decor > .bottle-eighteen {
    display: block;
    top: 97%;
    right: 1.2%;
    left: auto;
    transform: rotate(-12deg) scale(.5);
    font-size: 2.35rem;
}

.party-decor > .bottle-nineteen {
    display: block;
    top: 97.2%;
    left: 4.8%;
    right: auto;
    transform: rotate(20deg) scale(.66);
    font-size: 2.35rem;
}

.party-decor > .bottle-twenty {
    display: block;
    top: 21.4%;
    right: 1.8%;
    left: auto;
    transform: rotate(-7deg) scale(.52);
    font-size: 2.35rem;
}

.party-decor > .intro-beer {
    display: block;
    top: 4%;
    right: 3%;
    left: auto;
    transform: rotate(16deg);
    font-size: 2.25rem;
    opacity: .8;
}

.party-decor > .steak-seven {
    display: block;
    top: 9%;
    right: 1.2%;
    left: auto;
    transform: rotate(14deg) scale(.55);
    font-size: 2.6rem;
}

.party-decor > .steak-eight {
    display: block;
    top: 5%;
    right: 19.2%;
    left: auto;
    transform: rotate(-9deg) scale(.68);
    font-size: 2.6rem;
}

.party-decor > .steak-eighteen {
    display: block;
    top: 97%;
    right: 12%;
    left: auto;
    transform: rotate(-11deg) scale(.52);
    font-size: 2.6rem;
}

.party-decor > .steak-twenty {
    display: block;
    top: 97%;
    left: 17.4%;
    right: auto;
    transform: rotate(-8deg) scale(.5);
    font-size: 2.6rem;
}

.party-decor > .steak-twenty-one {
    display: block;
    top: 8%;
    right: 2.4%;
    left: auto;
    transform: rotate(13deg) scale(.44);
    font-size: 2.6rem;
}

.party-decor > .steak-twenty-four {
    display: block;
    top: 97%;
    right: 25.2%;
    left: auto;
    transform: rotate(-16deg) scale(.6);
    font-size: 2.6rem;
}

@media (min-width: 992px) {
    .party-decor > .balloon-one {
        display: block;
        top: 9%;
        left: 1.8%;
        right: auto;
        transform: rotate(-13deg) scale(.8);
    }

    .party-decor > .balloon-two {
        display: block;
        top: 40%;
        left: 2.4%;
        right: auto;
        transform: rotate(12deg) scale(1.18);
        background-color: rgba(117, 126, 135, .22);
    }

    .party-decor > .balloon-three {
        display: block;
        top: 69%;
        left: 11.4%;
        right: auto;
        transform: rotate(10deg) scale(.62);
    }

    .party-decor > .balloon-four {
        display: block;
        top: 84%;
        right: 12.6%;
        left: auto;
        transform: rotate(-12deg) scale(.7);
        background-color: rgba(201, 205, 207, .13);
    }

    .party-decor > .balloon-five {
        display: block;
        top: 27%;
        left: 1.8%;
        right: auto;
        transform: rotate(8deg) scale(.48);
        background-color: rgba(185, 192, 196, .14);
    }

    .party-decor > .balloon-six {
        display: block;
        top: 48.2%;
        left: 3%;
        right: auto;
        transform: rotate(-8deg) scale(.66);
        background-color: rgba(123, 132, 140, .18);
    }

    .party-decor > .balloon-seven {
        display: block;
        top: 75%;
        right: 1.2%;
        left: auto;
        transform: rotate(15deg) scale(.43);
        background-color: rgba(205, 209, 211, .12);
    }

    .party-decor > .balloon-eight {
        display: block;
        top: 6%;
        left: 2.4%;
        right: auto;
        transform: rotate(-12deg) scale(.36);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-nine {
        display: block;
        top: 11%;
        left: 17.4%;
        right: auto;
        transform: rotate(9deg) scale(.52);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-ten {
        display: block;
        top: 18%;
        left: 4.2%;
        right: auto;
        transform: rotate(-5deg) scale(.3);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-eleven {
        display: block;
        top: 23%;
        left: 15%;
        right: auto;
        transform: rotate(17deg) scale(.44);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twelve {
        display: block;
        top: 30%;
        right: 4.2%;
        left: auto;
        transform: rotate(-13deg) scale(.39);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-thirteen {
        display: block;
        top: 35%;
        right: 7.8%;
        left: auto;
        transform: rotate(6deg) scale(.55);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-fourteen {
        display: block;
        top: 41%;
        right: 3.6%;
        left: auto;
        transform: rotate(-16deg) scale(.34);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-fifteen {
        display: block;
        top: 46%;
        right: 16.2%;
        left: auto;
        transform: rotate(12deg) scale(.45);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-sixteen {
        display: block;
        top: 49%;
        left: 15.6%;
        right: auto;
        transform: rotate(-8deg) scale(.5);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-seventeen {
        display: block;
        top: 65.6%;
        left: 15%;
        right: auto;
        transform: rotate(14deg) scale(.35);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-eighteen {
        display: block;
        top: 65.6%;
        left: 10.2%;
        right: auto;
        transform: rotate(-11deg) scale(.42);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-nineteen {
        display: block;
        top: 68%;
        right: 16.2%;
        left: auto;
        transform: rotate(7deg) scale(.31);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty {
        display: block;
        top: 73%;
        left: 3%;
        right: auto;
        transform: rotate(-19deg) scale(.5);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-one {
        display: block;
        top: 78.6%;
        left: 6%;
        right: auto;
        transform: rotate(10deg) scale(.4);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-two {
        display: block;
        top: 84.8%;
        right: 7.8%;
        left: auto;
        transform: rotate(-5deg) scale(.55);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-three {
        display: block;
        top: 87%;
        left: 4.2%;
        right: auto;
        transform: rotate(16deg) scale(.32);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-four {
        display: block;
        top: 91%;
        right: 14.4%;
        left: auto;
        transform: rotate(-12deg) scale(.45);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-five {
        display: block;
        top: 15%;
        right: 11.4%;
        left: auto;
        transform: rotate(8deg) scale(.3);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-six {
        display: block;
        top: 37.8%;
        right: 6%;
        left: auto;
        transform: rotate(-14deg) scale(.48);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-seven {
        display: block;
        top: 65.8%;
        right: 8.4%;
        left: auto;
        transform: rotate(13deg) scale(.33);
        width: 50px;
        height: 64px;
    }

    .party-decor > .balloon-twenty-eight {
        display: block;
        top: 95%;
        left: 1.2%;
        right: auto;
        transform: rotate(-7deg) scale(.38);
        width: 50px;
        height: 64px;
    }

    .party-decor > .bottle-one {
        display: block;
        top: 21.4%;
        right: 7.8%;
        left: auto;
    }

    .party-decor > .bottle-two {
        display: block;
        top: 49.8%;
        left: 22.2%;
        right: auto;
        transform: rotate(-25deg);
    }

    .party-decor > .bottle-three {
        display: block;
        top: 91%;
        left: 13.8%;
        right: auto;
        transform: rotate(12deg);
    }

    .party-decor > .bottle-four {
        display: block;
        top: 36%;
        right: 14.4%;
        left: auto;
        transform: rotate(-14deg) scale(.72);
    }

    .party-decor > .bottle-five {
        display: block;
        top: 70%;
        right: 5.4%;
        left: auto;
        transform: rotate(24deg) scale(.68);
    }

    .party-decor > .bottle-six {
        display: block;
        top: 8%;
        right: 15%;
        left: auto;
        transform: rotate(-16deg) scale(.58);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-seven {
        display: block;
        top: 14%;
        right: 4.8%;
        left: auto;
        transform: rotate(22deg) scale(.72);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-eight {
        display: block;
        top: 27%;
        right: 10.2%;
        left: auto;
        transform: rotate(-8deg) scale(.65);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-nine {
        display: block;
        top: 33%;
        left: 12%;
        right: auto;
        transform: rotate(14deg) scale(.55);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-ten {
        display: block;
        top: 44%;
        right: 8.4%;
        left: auto;
        transform: rotate(-20deg) scale(.7);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-eleven {
        display: block;
        top: 50.4%;
        right: 16.8%;
        left: auto;
        transform: rotate(11deg) scale(.6);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-twelve {
        display: block;
        top: 62.8%;
        right: 18%;
        left: auto;
        transform: rotate(-13deg) scale(.76);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-thirteen {
        display: block;
        top: 65%;
        left: 2.4%;
        right: auto;
        transform: rotate(19deg) scale(.58);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-fourteen {
        display: block;
        top: 71%;
        right: 17.4%;
        left: auto;
        transform: rotate(-9deg) scale(.68);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-fifteen {
        display: block;
        top: 76%;
        left: 16.2%;
        right: auto;
        transform: rotate(15deg) scale(.56);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-sixteen {
        display: block;
        top: 81.4%;
        left: 18%;
        right: auto;
        transform: rotate(-18deg) scale(.7);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-seventeen {
        display: block;
        top: 86%;
        left: 7.2%;
        right: auto;
        transform: rotate(7deg) scale(.62);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-eighteen {
        display: block;
        top: 89%;
        right: 3.6%;
        left: auto;
        transform: rotate(-12deg) scale(.5);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-nineteen {
        display: block;
        top: 96.8%;
        right: 18%;
        left: auto;
        transform: rotate(20deg) scale(.66);
        font-size: 2.35rem;
    }

    .party-decor > .bottle-twenty {
        display: block;
        top: 23%;
        left: 6.6%;
        right: auto;
        transform: rotate(-7deg) scale(.52);
        font-size: 2.35rem;
    }

    .party-decor > .intro-balloon {
        display: block;
        top: 6%;
        right: 11.4%;
        left: auto;
        transform: rotate(-10deg);
        width: 44px;
        height: 56px;
        opacity: .85;
    }

    .party-decor > .intro-beer {
        display: block;
        top: 4.8%;
        left: 6.6%;
        right: auto;
        transform: rotate(16deg);
        font-size: 2.25rem;
        opacity: .8;
    }

    .party-decor > .steak-one {
        display: block;
        top: 24.8%;
        left: 5.4%;
        right: auto;
        transform: rotate(-18deg);
    }

    .party-decor > .steak-two {
        display: block;
        top: 66.2%;
        right: 13.2%;
        left: auto;
        transform: rotate(16deg) scale(.8);
    }

    .party-decor > .steak-three {
        display: block;
        top: 94%;
        right: 1.8%;
        left: auto;
        transform: rotate(-7deg) scale(.7);
    }

    .party-decor > .steak-four {
        display: block;
        top: 28%;
        right: 6%;
        left: auto;
        transform: rotate(12deg) scale(.65);
    }

    .party-decor > .steak-five {
        display: block;
        top: 46.4%;
        right: 6.6%;
        left: auto;
        transform: rotate(-22deg) scale(.58);
    }

    .party-decor > .steak-six {
        display: block;
        top: 82%;
        right: 3%;
        left: auto;
        transform: rotate(8deg) scale(.75);
    }

    .party-decor > .steak-seven {
        display: block;
        top: 9.8%;
        right: 10.8%;
        left: auto;
        transform: rotate(14deg) scale(.55);
        font-size: 2.6rem;
    }

    .party-decor > .steak-eight {
        display: block;
        top: 13.8%;
        right: 18%;
        left: auto;
        transform: rotate(-9deg) scale(.68);
        font-size: 2.6rem;
    }

    .party-decor > .steak-nine {
        display: block;
        top: 20%;
        right: 1.8%;
        left: auto;
        transform: rotate(18deg) scale(.5);
        font-size: 2.6rem;
    }

    .party-decor > .steak-ten {
        display: block;
        top: 25%;
        right: 2.4%;
        left: auto;
        transform: rotate(-17deg) scale(.72);
        font-size: 2.6rem;
    }

    .party-decor > .steak-eleven {
        display: block;
        top: 34.8%;
        right: 15%;
        left: auto;
        transform: rotate(8deg) scale(.55);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twelve {
        display: block;
        top: 42.6%;
        right: 7.2%;
        left: auto;
        transform: rotate(-13deg) scale(.62);
        font-size: 2.6rem;
    }

    .party-decor > .steak-thirteen {
        display: block;
        top: 50.2%;
        left: 9%;
        right: auto;
        transform: rotate(16deg) scale(.7);
        font-size: 2.6rem;
    }

    .party-decor > .steak-fourteen {
        display: block;
        top: 62.6%;
        left: 17.4%;
        right: auto;
        transform: rotate(-6deg) scale(.48);
        font-size: 2.6rem;
    }

    .party-decor > .steak-fifteen {
        display: block;
        top: 67.4%;
        left: 16.8%;
        right: auto;
        transform: rotate(12deg) scale(.65);
        font-size: 2.6rem;
    }

    .party-decor > .steak-sixteen {
        display: block;
        top: 70.8%;
        left: 16.2%;
        right: auto;
        transform: rotate(-19deg) scale(.56);
        font-size: 2.6rem;
    }

    .party-decor > .steak-seventeen {
        display: block;
        top: 78%;
        right: 4.2%;
        left: auto;
        transform: rotate(9deg) scale(.7);
        font-size: 2.6rem;
    }

    .party-decor > .steak-eighteen {
        display: block;
        top: 89%;
        left: 3%;
        right: auto;
        transform: rotate(-11deg) scale(.52);
        font-size: 2.6rem;
    }

    .party-decor > .steak-nineteen {
        display: block;
        top: 90%;
        right: 7.2%;
        left: auto;
        transform: rotate(17deg) scale(.64);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twenty {
        display: block;
        top: 93%;
        right: 10.2%;
        left: auto;
        transform: rotate(-8deg) scale(.5);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twenty-one {
        display: block;
        top: 6.8%;
        left: 15%;
        right: auto;
        transform: rotate(13deg) scale(.44);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twenty-two {
        display: block;
        top: 47%;
        left: 2.4%;
        right: auto;
        transform: rotate(-14deg) scale(.59);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twenty-three {
        display: block;
        top: 63%;
        left: 3%;
        right: auto;
        transform: rotate(7deg) scale(.46);
        font-size: 2.6rem;
    }

    .party-decor > .steak-twenty-four {
        display: block;
        top: 97%;
        left: 18%;
        right: auto;
        transform: rotate(-16deg) scale(.6);
        font-size: 2.6rem;
    }

}

@media (min-width: 768px) {
    .hero {
        padding-top: 5rem;
    }

    .quotes,
    .profiles {
        max-width: 820px;
    }

    .quote-bubble {
        width: min(64%, 470px);
    }

    .gift-section {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .steak-gallery {
        grid-template-columns: 1fr;
    }
}