/* ===========================
   RESET
=========================== */

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:sans-serif;
}


/* ===========================
   BACKGROUND
=========================== */

body{

    background-image:url("../assets/BgGral.webp");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;
}


/* ===========================
   MAIN LAYOUT
=========================== */

.landing{

    width:100vw;
    height:100vh;

    display:flex;
    flex-direction:column;

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

    gap:3rem;

    padding:2rem;
}


/* ===========================
   HEADER
=========================== */

.hero{

    width:min(90vw, 520px);

    display:flex;
    justify-content:center;
}

.hero img{

    width:15vw;
    height:auto;

    display:block;
}


/* ===========================
   SOCIAL
=========================== */

.social{

    width:100%;
    max-width:850px;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    gap:2rem;

    margin-top: 2rem;
}


.social a{

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;
}


.social img{

    width:auto;
    height:72px;

    display:block;
}


.social a:hover{

    transform:scale(1.08);
}


/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .landing{

        gap:2rem;
    }

    .hero{

        width:auto;
    }

    .hero img{

        height:33vh;
        width:auto;
        max-width:90vw;
    }

    .social{

        flex-direction:column;
        gap:1.2rem;
    }

    .social img{

        height: 50px;
    }

}