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

html,body{
    width: 100%;
    height: 100%;
    font-family: cursive;
}

#main{
    width: 100%;
    height: 100%;
} 

#nav{
    width: 100%;
    height: 10%;
    /* background-color: red; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    padding: 0 20px;
    background-color: #FFF7D1;
}

#nav h3:hover,#nav i:hover{
    color: rgb(255, 141, 2);
    cursor: pointer;
}

#nav h3{
    font-size: 1.3vw;
    font-weight: 500;
}

#nav i{
    font-size: 1.3vw;
    /* font-size: 20px; */
    padding: 13px;
    background-color: black;
    color: white;
    border-radius: 50%;
    font-weight: 500;
}

#heading{
    width: 100%;
    /* height: 30%; */
    /* background-color: red; */
    padding: 40px 80px;
    background-color: #FFECC8;
}

#heading h2{
    width: 100%;
    font-size: 4vw;
    font-weight: 500;
    line-height: 80px;
}

#centerin{
    width: 100%;
    height: 200px;
    /* background-color: red; */
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #FFD09B;
    padding: 8px;
    border-radius: 8px;
}

#centerin p{
    font-size:1.1vw;
    font-weight: 600;
    line-height: 32px;
}

#right{
  background-color:#FFB0B0;
   width: 20%;
   padding: 20px;
   cursor: pointer;
}

.elem{
  padding: 10px 0;
  border-top: 2px solid black;
  display: flex;
  justify-content: space-between;
}

.elem a{
    font-size: 1vw;
    font-weight: 600;
    color: black;
    text-decoration: none;
}

.elem i{
    font-size: 30px;
    font-weight: 500;
    opacity: 0;
}


/* hover on parent child shld react */
.elem:hover i{
    /* text-decoration:; */
    opacity: 1;
}


#bottom{
    width: 100%;
    height: 40%;
    /* background-color: red; */
    background-image: url(https://images.unsplash.com/photo-1486486704382-8ee6f7754a45?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDd8fHdoaXRlJTIwbW9kZWwlMjBnaXJsfGVufDB8fDB8fHww);
    background-size: cover;
    background-position: 0 33%;
}

/* Style the entire scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 3px !important;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    /* background: linear-gradient(to bottom, orange, white, green); */
    background-color:#FFD09B;
    border-radius: 10px;
    min-height: 2px; /* Minimum height of the thumb */
    max-height: 4px; /* Maximum height of the thumb */
    border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff0000;
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* my responsive code */
/* @media (max-width:690px) {
   .elem a{
    font-size: 12px;
   }

   #centerin p{
    font-size: 12px;
    text-align: left;
   }
   #bottom{
    background-position: 35% 100%;
   }
}

@media(max-width:1259px){
    .elem a{
        font-size: 14px;
       }
       
}


@media(max-width:550px){
    .elem a{
        font-size: 8px;
       }
 
       .elem i{
        font-size: 9px;
        font-weight: 500;
        opacity: 0;
        padding: 1px;
    }

    #centerin p{
        font-size: 12px;
        text-align:start;
       }
    
       #heading h2{
         font-size: 42px;
         font-weight: 600;
         line-height: 62px;
         text-align:start;
       }
       
} */


/* another responsive code */
@media (max-width:600px) {
    #nav{
        width: 100%;
        height: 13%;
        /* background-color: red; */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 25px;
        padding: 0 25px;
        background-color: #FFF7D1;
    }
    
    #nav h3:hover,#nav i:hover{
        color: rgb(255, 141, 2);
        cursor: pointer;
    }
    
    #nav h3{
        /* font-size: 30px; */
        font-size: 4vw;
        font-weight: 500;
    }
    
    #nav i{
        font-size: 5.5vw;
        padding: 13px;
        background-color: black;
        color: white;
        border-radius: 50%;
        font-weight: 500;
    }

    #heading{
        width: 100%;
        /* height: 30%; */
        /* background-color: red; */
        padding: 40px 80px;
        background-color: #FFECC8;
    }
    
    #heading h2{
        font-size: 7vw;
        font-weight: 600;
        line-height: 10vw;
    }

    #centerin{
        width: 100%;
        height: 90%;
        /* height: 200px; */
        /* background-color: red; */
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #FFD09B;
        padding: 8px;
        border-radius: 8px;
    }
    
    #centerin p{
        font-size:2vw;
        font-weight: 600;
        line-height: 25px;
    }
    
    #right{
      background-color:#FFB0B0;
       width: 100%;
       padding: 20px;
       height: 140px;
       cursor: pointer;
       border-radius: 5%;
    }
    
    .elem{
      padding: 4px 0;
      border-top: 1px solid rgb(129, 129, 129);
      display: flex;
      justify-content: space-between;
    }
    
    .elem a{
        font-size: 3vw;
        font-weight: 600;
        color: rgb(65, 65, 65);
        text-decoration: none;
    }
    
    .elem i{
        font-size: 30px;
        font-weight: 500;
        opacity: 0;
    }
    
    
    /* hover on parent child shld react */
    .elem:hover i{
        /* text-decoration:; */
        opacity: 1;
    }
    
    
    #bottom{
        width: 100%;
        height: 45%;
        /* background-color: red; */
        background-image: url(https://images.unsplash.com/photo-1486486704382-8ee6f7754a45?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDd8fHdoaXRlJTIwbW9kZWwlMjBnaXJsfGVufDB8fDB8fHww);
        background-size: cover;
        background-position: 35% 33%;
    }
}