@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%; 

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

}

body{

    position:relative;

}

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

.background{

    position:fixed;
    inset:0;

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

    transform:scale(1.06);

    transition:transform .2s linear;

}
 

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

.hero{

    position:relative;

    z-index:5;

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column; 

    text-align:center;

    padding:40px;

}

.logo{

    width:170px;

    margin-bottom:30px;

}

.coming{

    color:#4b3300;

    font-weight:800;

    padding:12px 24px;

    border-radius:40px;

}

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:760px;

    text-shadow:

    0 4px 15px rgba(0,0,0,.35);
    text-align: center;
    margin: 0 auto;

}

.button{
    margin-top:50px;
    text-decoration:none;
    color:black;
    background: #ffc457;
    padding: 10px 25px;
    border-radius: 60px; 
    transition: .3s; 
    max-width: 130px;
    margin: 0 auto 50px;
    display: block;
} 
.button:hover{
    transform:translateY(-5px);
}
.note {
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 150px;
    object-fit: contain;
}
.note-right {
    position: fixed;
    z-index: -1;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 150px;
    object-fit: contain;
}
.main-book {
    position: relative; 
    max-width: 100%;
}
.book-container {
    max-width: 320px;
    margin: 30px auto 20px;
}
.book-container h2 {
    font-size: 14px;
    font-weight: 500;
}
/* ------------------------------------------------ */

@keyframes float{

    50%{

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

    }

}

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

@media(max-width:900px){

.logo{

width:130px;

}

h1{

font-size:50px;

}

p{

font-size:19px;

}
 

}

@media(max-width:600px){

    h1{
    font-size:38px;
    }
    p{
    font-size:17px;
    }
    .logo{
    width:110px;
    }
    .coming{
    font-size:14px;
    }
    
    .note {
        display: none;
    }
    .note-right {
        display: none;
    } 

}