#opening{

    position:fixed;
    inset:0;

    width:100%;
    height:100vh;
    height:100dvh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    z-index:99999;

}
#opening::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:url("../img/background/bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:kenburns 28s ease-in-out infinite alternate;

    transform-origin:center;

    z-index:-2;

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.55),

        rgba(0,0,0,.45)

    );

}

.content{

    position:relative;

    width:min(92%,620px);

    margin:auto;

    text-align:center;

    color:white;

    z-index:5;

}
.content>*{

    opacity:0;

    transform:translateY(35px);

    animation:fadeUp .8s forwards;

}
.subtitle{

    font-size:13px;

    letter-spacing:6px;

    color:#D4AF37;
    animation-delay:.1s;

}
.content h1{

    font-family:"Great Vibes",cursive;

    font-size:clamp(52px,8vw,88px);

    line-height:1.05;

    font-weight:400;

    margin:18px 0;
    animation-delay:.1s;

}

.content h1 span{

    display:block;

    color:#D4AF37;

    font-size:clamp(28px,5vw,44px);

}
.date{

    margin-top:30px;

    font-size:20px;

    color:#fff;

    line-height:1.8;
    animation-delay:.5s;


}

.guest{

    width:min(95%,470px);

    margin:35px auto;

    padding:28px;

    border-radius:24px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(18px);
    animation-delay:.7s;

    box-shadow:

        0 20px 60px rgba(0,0,0,.25);

}

.guest small{

    color:#FFD86A;

    letter-spacing:2px;

}

.guest h3{

    margin:10px 0;

    font-size:32px;

    font-weight:600;

}

.guest p{

    color:rgba(255,255,255,.85);

    line-height:1.7;

}

#openInvitation{

    width:260px;

    height:58px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    background:

    linear-gradient(

        90deg,

        #FFD86A,

        #D4AF37

    );

    color:white;

    font-size:16px;

    font-weight:600;

    transition:.35s;
    animation-delay:.9s;

}

#openInvitation:hover{

    transform:translateY(-5px);

    box-shadow:

        0 15px 35px rgba(212,175,55,.45);

}
.subtitle,
.content h1,
.date,
.guest,
#openInvitation{

    opacity:0;

    transform:translateY(30px);

}
@keyframes heroZoom{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}
@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes kenburns{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}
@media(max-width:768px){

.content{

padding-top:70px;

padding-bottom:40px;

}

.content h1{

font-size:54px;

line-height:1.15;

}

.content h1 span{

font-size:30px;

}

.guest{

width:100%;

max-width:340px;

margin:30px auto;

padding:22px;

}

.guest h3{

font-size:24px;

}

.date{

    margin-top:22px;

    font-size:clamp(16px,3vw,20px);

    line-height:1.8;

}

#openInvitation{

width:100%;

justify-content:center;

}

}