@font-face {
    font-family: "BalooBhai2";
    src: url("./fonts/BalooBhai2-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

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

    font-family:"BalooBhai2",sans-serif;

}

body{

    position:relative;

}

/* ------------------------------------------------ */

.background{

    position:absolute;
    inset:0;

    background:url(img.jpg)
    center center/cover no-repeat;

    transform:scale(1.06);

    transition:transform .2s linear;

}

/* ------------------------------------------------ */

.overlay{

    position:absolute;
    inset:0;
    z-index: 2;

    background:linear-gradient(
        rgba(255,255,255,.38),
        rgba(255,255,255,.28));

}

/* ------------------------------------------------ */

.hero{

    position:relative;

    z-index:5;

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.logo{

    width:170px;

    margin-bottom:30px;

}

.coming{

    background:#FFD84A;

    color:#4b3300;

    font-weight:800;

    padding:12px 24px;

    border-radius:40px;

    margin-bottom:30px;

    box-shadow:

    0 12px 30px rgba(0,0,0,.12);

}

h1{

    color:black;

    font-size:72px;

    line-height:1.05;

    text-shadow:

    0 6px 25px rgba(0,0,0,.35);

}

p{

    margin-top:25px;

    color:black;

    font-size:22px;

    max-width:620px;

    text-shadow:

    0 4px 15px rgba(0,0,0,.35);

}

.button{

    margin-top:50px;

    text-decoration:none;

    color:white;

    background:#7857ff;

    padding:18px 48px;

    border-radius:60px;

    font-weight:800;

    transition:.3s;

    box-shadow:

    0 18px 35px rgba(88,58,255,.35);

}

.button:hover{

    transform:translateY(-5px);

}

/* ------------------------------------------------ */

.floating{

    position:absolute;

    z-index:3;

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

    user-select:none;

}

.floating-1{

    left:12%;
    top:18%;

    font-size:30px;

}

.floating-2{

    top:25%;
    right:20%;

    font-size:28px;

}

.floating-3{

    left:24%;
    bottom:20%;

    font-size:22px;

}

.floating-4{

    right:14%;
    bottom:18%;

    font-size:26px;

}

@keyframes float{

    50%{

        transform:
        translateY(-14px)
        rotate(8deg);

    }

}

/* ------------------------------------------------ */

@media(max-width:900px){

.logo{

width:130px;

}

h1{

font-size:50px;

}

p{

font-size:19px;

}

.button{

padding:16px 36px;

}

}

@media(max-width:600px){

h1{

font-size:38px;

}

p{

font-size:17px;

}

.logo{

width:110px;

}

.coming{

font-size:14px;

}

}