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

html,
body{

    height:100%;

    font-family:'Inter',sans-serif;

    overflow:hidden;

}

body{

    position:relative;

    background:url("assets/images/comingsoon.jpg") center center/cover no-repeat;

    animation:zoomBackground 35s ease-in-out infinite alternate;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(2px);

}

.hero{

    position:relative;

    z-index:2;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}

.content{

    max-width:750px;

    color:white;

}

.small-title{

    letter-spacing:6px;

    color:#D9C08A;

    font-size:.85rem;

    text-transform:uppercase;

}

h1{

    font-family:'Cormorant Garamond',serif;

    font-size:5.5rem;

    font-weight:500;

    margin-top:20px;

    margin-bottom:15px;

}

h2{

    font-family:'Cormorant Garamond',serif;

    font-size:2.2rem;

    font-weight:400;

    margin-bottom:35px;

}

p{

    font-size:1.1rem;

    line-height:1.9;

    color:#f0f0f0;

    margin-bottom:50px;

}

.launching{

    display:inline-block;

    padding:18px 45px;

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

    border-radius:60px;

    color:white;

    letter-spacing:3px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

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

}

footer{

    position:absolute;

    bottom:35px;

    width:100%;

    text-align:center;

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

    font-size:.85rem;

    letter-spacing:2px;

    z-index:2;

}

@keyframes zoomBackground{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

@media(max-width:768px){

    h1{

        font-size:3.8rem;

    }

    h2{

        font-size:1.6rem;

    }

    p{

        font-size:1rem;

    }

    .small-title{

        letter-spacing:4px;

    }

}

/*==================================
INTRO SCREEN
==================================*/

#introScreen{

    position:fixed;

    inset:0;

    background:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:1.2s;

}

.intro-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:white;

    animation:introFloat 2s ease;

}

.intro-small{

    color:#B89B5E;

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:.8rem;

}

#introScreen{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(

            rgba(0,0,0,.45),

            rgba(0,0,0,.45)

        ),

        url("assets/images/comingsoon.jpg");

    background-size:cover;

    background-position:center;

    overflow:hidden;

    transition:1.5s;

}

#introScreen::before{

    content:"";

    position:absolute;

    inset:0;

    backdrop-filter:blur(18px);

    transition:1.8s;

}

#enterButton{

    padding:18px 55px;

    border:none;

    background:#B89B5E;

    color:white;

    border-radius:50px;

    cursor:pointer;

    font-size:1rem;

    letter-spacing:4px;

    text-transform:uppercase;

    transition:.4s;

}

#enterButton:hover{

    transform:translateY(-6px);

    background:#A88747;

    box-shadow:

        0 15px 45px rgba(184,155,94,.45);

}

.fadeOut{

    opacity:0;

    visibility:hidden;

}

.fadeOut::before{

    backdrop-filter:blur(0px);

}

#mainPage{

    opacity:0;

    transition:1.5s;

}

#mainPage.show{

    opacity:1;

}

@keyframes introFloat{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}