html,
body{
    margin:0;
    width:100%;
    height:100%;
}

body{

    background:#e9e4d7;

    overflow:hidden;

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

    font-family:
        Arial,
        sans-serif;
}

body.preload{

    visibility:hidden;
}

main{

    text-align:center;

    z-index:2;

    padding:30px;

    width:100%;

    box-sizing:border-box;
}

.logo{

    margin:0;

    font-family:serif;

    font-size:min(160px,18vw);

    font-weight:600;

    line-height:1;

    color:#e6e4df;

    text-shadow:
        0 8px 40px rgba(0,0,0,.45);

    opacity:0;

    animation:
        logoReveal 5.0s ease 2.5s forwards;
}

@keyframes logoReveal{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

#tagline{

margin-top:24px;

min-height:3em;

font-family:
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;

font-size:
    clamp(16px,2vw,28px);

font-weight:100;

letter-spacing:3px;

color:#e6e4df;

text-shadow:
    0 2px 10px rgba(0,0,0,.4);

opacity:0;

will-change: opacity;

transform: translateZ(0);

transition:
    opacity 2s ease;

}

#background-overlay{

    position:fixed;

    inset:0;

    background:black;

    opacity:0.85;

    pointer-events:none;

    transition:
        opacity 60s linear;
}