/* ===========================
   WEBSITE V2
   Ontwerp gebaseerd op 854 x 1842.
=========================== */

:root{
    --design-width:854;
    --design-height:1842;
    --gold:#E7C09C;

    /* verticale positie */
    --peace-y:11.5%;
    --intro-y:20%;
    --logo-y:24%;
    --subtitle-y:34%;
    --love-y:51%;
    --menu-y:67%;
    --footer-y:97%;

    /* lettergroottes */
    --peace-size:3rem;
    --intro-size:1.5rem;
    --logo-size:5.8rem;
    --subtitle-size:2rem;
    --love-size:1.8rem;
    --menu-size:0.8rem;
    --footer-size:0.7rem;

    --menu-width:82%;
    --menu-height:3rem;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
    background:#000;
    overflow-x:hidden;
}

.page{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#000;
    padding:1rem;
}

.poster{
    position:relative;
    width:min(100vw, calc(100vh * 854 / 1842));
    aspect-ratio:854/1842;
    overflow:hidden;
    background:#000;
}

.background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    user-select:none;
    pointer-events:none;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.08);
}

.peace,
.intro,
.logo,
.subtitle,
.love,
.menu,

footer{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:var(--gold);
    z-index:5;
}

.peace{
    top:var(--peace-y);
    font-size:var(--peace-size);
}

.intro{
    top:var(--intro-y);
    font-family:"Bebas Neue",sans-serif;
    letter-spacing:.25em;
    font-size:var(--intro-size);
    white-space:nowrap;
}

.logo{
    top:var(--logo-y);
    font-family:"Bebas Neue",sans-serif;
    font-size:var(--logo-size);
    line-height:.9;
    letter-spacing:.05em;
    white-space:nowrap;
}

.subtitle{
    top:var(--subtitle-y);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    white-space:nowrap;
    flex-wrap:nowrap;
}

.line{
    width:1.2rem;
    height:2px;
    background:var(--gold);
    flex:0 0 auto;
}

.script{
    font-family:"Cormorant Garamond",serif;
    font-style:italic;
    font-size:var(--subtitle-size);
    white-space:nowrap;
}

.love{
    top:var(--love-y);
    font-family:"Cormorant Garamond",serif;
    font-style:italic;
    font-size:var(--love-size);
    white-space:nowrap;
}

.menu{
    position:absolute;
    left:50%;
    top:var(--menu-y);
    transform:translateX(-50%);
    width:var(--menu-width);
    z-index:5;
}
.menu a{
    display:flex;
    justify-content:center;
    align-items:center;
    height:var(--menu-height);
    text-decoration:none;
    color:var(--gold);
    font-family:"Cormorant Garamond",serif;
    font-style:normal;
    letter-spacing:.12em;
    font-size:var(--menu-size);
}

.menu a + a{
    border-top:1px solid rgba(231,192,156,.45);
}

.menu a:last-child{
    border-bottom:1px solid rgba(231,192,156,.45);
}



.menu a:hover{
    background:rgba(255,255,255,.05);
}

footer{
    top:var(--footer-y);
    font-family:monospace;
    font-size:var(--footer-size);
    white-space:nowrap;
}