html{
    scroll-behavior: smooth;
}



body{background-color: black;}

#navMain{font-family: 'Nova Oval',cursive;
         font-size: 2rem; height: 7%;}

#navMain>a{font-size: 2.2rem; color:red;
    font-family: 'Aclonica';}

#navMain .nav-link{color: white;}

#navMain .nav-link:hover{color: red;}

#navMain .active{color: red;}

#navMain.scrolled{background-color: rgba(0, 0, 0, 0.5);
                transition: background 500ms;}

#togglerButton{color: red;
               background-color:rgba(0,0,0,0.5);
               border-color: red;}


#header{background: url("Sushi1.jpg") center / cover no-repeat fixed;
        /*height: 57rem;*/ height: 100vh; color: red; font-family: "Brush Script MT"; position: relative;}

#header > h1{font-family: 'Aclonica'; padding-top: 10rem;
            font-size: 5rem;}

/* #sidebar {background-color: rgba(0, 0, 0, 0.5);} */

#img1{width: 40rem; margin-top: 5rem;}

#price_poke_bowl .p {color: red;}



.heading > .fluid-container{font-family: 'Cherry Swash', cursive;
            background-color: #ff6666; color: white;}
.heading p{background-color: white;}

.smallFontHeading h2{font-size: 2.85rem;}

.sub-heading h2{font-size: 3rem; font-weight: 1; color: white;
                font-family: 'Nova Oval' /* 'Elsie' */, cursive;}
.food{color: #ff3333; font-family: 'Elsie', cursive;}

.food p{font-size: 1.2rem; color: white;}

.close{color: red;}

.foodNI h3{font-size: 1.5rem;}

#footer{background-color: black; font-family: 'Nova Oval',cursive;}

#footer img{width: 15rem; margin-top: 5rem;}

#footer p{color: white;}
#footer a:hover{text-decoration: none;}
#footer p:hover{color: red;}





/* #haha3{height: 93vh;} */
.sticky-top{top: 7%;}



#sidebar ul{
    height: 93vh; width:70%;
     overflow: scroll;
     overflow-y: scroll;
     list-style-type: none;
     background-color: rgba(0, 0, 0, 0.075);
 }
 #sidebar ul li a{color: white;
                  font-family: 'Nova Oval' /* 'Elsie' */, cursive;
                  font-size: 1.5rem;
                  }
#sidebar .active{border-left: 1.5px solid red;
                 font-weight: bold;}

 /* #sidebar a:hover{color: red;} */





@media (max-width: 992px){
    
	#navMain{font-size: 2.6rem;}
    .navbar-nav{background-color: rgba(0, 0, 0, 0.5);}
    #header > h1{font-size: 4rem;}
    #img1{width: 30rem; margin-top: 5rem;}
	#navMain{height: 3.5rem;}
	#navLinks{position:absolute; top:0;}
	#navLinks ul {margin-top:18%; padding-right:50%; padding-left:5%;}
}
@media (max-width: 767px){
    .sticky-top{top: 3rem;}
    #header > h1{font-size: 3rem;}
    #img1{width: 20rem; margin-top: 5rem;}
    .heading h2{font-size: 3rem;}
    .smallFontHeading h2{font-size: 1.6rem;}
    .sub-heading h2{font-size: 2.5rem;}
    .food p{font-size: 1.1rem;}
    .foodNI h3{font-size: 1.2rem;}



/* ***** might use outside ******/

    /* #sidebar ul{
        height: 45rem; width:70%;
         overflow: scroll;
         overflow-y: scroll;
     } */

/****************/

    #sidebar{
        height: 4rem; margin-top:2.1%;
    }
    #sidebar ul{
        background: none;
        background-color: rgba(0, 0, 0, 0.5);
        height: 4.5rem; white-space: nowrap;
    }

    #sidebar .active{border: none; border-bottom: 1.5px solid red;
        font-weight: bold;}
}


@media (max-width: 1200px){
    .container{
        max-width: 100%; /*was 95%*/
    }
}
@media (max-width: 325px){
    .heading h2{font-size: 2rem;}
    /* #img1{width: 30rem; margin-top: 5rem;} */
}


/* @media (min-width: 992px){
    #last{
        background-image: url("Greek.jpg"); background-attachment: fixed; background-size: 84rem 100%; 
        background-repeat: no-repeat;
    }
}
@media (min-width: 1200px){
    #last{
        background-image: url("Greek.jpg"); background-attachment: fixed; background-size: 100% 100%; 
        background-repeat: no-repeat;
    }
} */




  body {
    position: relative;
}

/* ul.nav-pills {
    top: 20px;
    position: fixed;
} */


  /* #sidebar ul{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: auto;
  }
 */
 

/* #haha1, #haha2, #haha3{
     overflow: none;
 } */
 /* #sidebar{
     position: sticky; */
     
     /* z-index: 2; */
     /* top: 0;
 }
 /* #haha3{
    position: sticky;
     top: 0;
 }
 #nono{
     z-index: 1;
 } */

  /* .affix {
    position: fixed;
    top: 200px;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
} */