/* ==========================================
   LANDING PAGE
========================================== */

body{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================
   CONTAINER
========================================== */

.landing-page{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:50px 28px;

}

/* ==========================================
   LOGO
========================================== */

.logo{

    width:70%;

    max-width:520px;

    margin-bottom:30px;

    opacity:0;

    animation:fadeLogo 1.2s cubic-bezier(.2,.8,.2,1) forwards;

}

/* ==========================================
   HERO
========================================== */

.hero-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-bottom:60px;

}

.hero{

    width:80%;

    max-width:500px;

    position:relative;

    z-index:2;

    transform-origin:center bottom;

    animation:floating 5s ease-in-out infinite;

    filter:drop-shadow(0 18px 18px rgba(0,0,0,.12));

}

.hero-shadow{

    position:absolute;

    bottom:-18px;

    width:180px;

    height:24px;

    border-radius:50%;

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

    filter:blur(12px);

    z-index:1;

    animation:shadowFloat 5s ease-in-out infinite;

}

/* ==========================================
   BUTTON GROUP
========================================== */

.button-group{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ==========================================
   DESCRIPTION
========================================== */

.description{

    margin-top:50px;

    font-size:18px;

    color:var(--text-light);

    text-align:center;

    line-height:1.7;

    max-width:620px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    .logo{

        width:82%;

    }

    .hero{

        width:86%;

    }

}

@media(max-width:600px){

    .landing-page{

        padding:35px 20px;

    }

    .logo{

        width:95%;

    }

    .hero{

        width:95%;

    }

    .description{

        font-size:15px;

    }

}