* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

:root {
    --theme-bg-color: rgba(38, 36, 49, 0.479);
    --bottom-navigation: hsla(167, 22%, 8%, 0.911);
}

body {
    --primary: 25, 91, 255;
    --color: 44, 62, 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100vh;
    background: #f4f7f8;
    height: calc(var(--vh, 1vh) * 100);
    color: rgb(var(--color));
    width: 100%;
    overflow: hidden;
}

::-webkit-scrollbar {
    display: none;
}

#main-page-parent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    /* background-image: url(/image/home/background.jpg); */
    background-size: cover;
    background-position: center;
    padding-top: 3px;
}

#screen-width {
    display: none;
    font-size: 23px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    text-align: center;
    width: 80%;
    background-color: rgba(224, 224, 224, 0.158);
    padding: 20px;
    color: aliceblue;
    max-width: 700px;
    border-radius: 12px;
}

#screen-width span {
    color: rgb(5, 148, 100);
    font-weight: 600;
}


#main-page {
    width: 100%;
    height: 100%;
    max-width: 600px;
    min-width: 200px;
    overflow: hidden;
   
}



@media screen and (min-width: 600px) {
   


    #main-page {
        display: none;
    }

    #screen-width {
        display: flex;
    }
  
}



@media screen and (max-width: 260px) {

    #main-page {
        display: none;
    }

    #screen-width {
        display: flex;
        width: 100%;
    }

}





.main-page-container {
    overflow: hidden;
   
}




/* General reset for body and html */
#home-container,
#music-container,
#shop-container,
#game-container {
    width: 100%;
    height: 100vh;
    min-width: 100%;
    
}




#music-container {
    background-color: rgb(31, 27, 30);
}

#shop-container {
    background-color: rgb(12, 19, 17);
}

#game-container {
    background-color: rgb(0, 0, 0);
}





/* Initially hide all sections except home */
/* Ensure the home container takes full height */
#home-container {
    height: 100vh; /* Full viewport height */
    overflow-y: scroll; /* Enable vertical scroll */
    -webkit-overflow-scrolling: touch; /* Enable native bounce effect on iOS devices */
  }
  
  /* For other containers */
  #music-container,
  #shop-container,
  #game-container {
    display: none;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Only the active container should be displayed */
  .active-section {
    display: block;
  }
  
  /* Style for inner content */



#main-page-navbar {
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    width: 100%;
}


.bottom-navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: var(--bottom-navigation);
    border-radius: 45px 45px 0 0;
    padding: 20px 10px 0px 10px;
    box-shadow: 1px 5px 8px 0px rgb(0 0 0 / 34%);
    max-width: 400px;
    overflow: hidden;
    max-height: 79px;
    height: 79px;
    backdrop-filter: blur(10px);
    /* transition: all 0.5s ease-out; */
    transition: all 0.4s cubic-bezier(1, 1.29, 0.25, 1.3);
    border: 1px solid rgba(250, 191, 103, 0.158);
}

.active .nav-icon{
    background-color:rgba(70, 110, 105, 0.582);
    transition: all 0.4s cubic-bezier(1, 1.29, 0.25, 1.3);
    /* transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s; */
  transform: translate3d(0%, -5%, 0);
}

.nav-icon{
    background-color: rgba(88, 88, 88, 0);
    width: 50px;
    min-height: 65px;
   display: flex;
   align-items: center;
   flex-direction: column;
    padding-top: 5px;
    border-radius: 20px 20px 0 0 ;
}

.nav-icon img {
    width: 28px;
    height: 28px;
    color: rgba(240, 248, 255, 0.219);
    opacity: 0.5;
    padding: 2px;
    margin-top: 3px;
    transition: all 0.2s cubic-bezier(1, 1.29, 0.25, 1.3);
}


.nav-icon img:active {
    scale: 1.3;
}

.bottom-navbar .active .nav-icon img {
    opacity: 1;
    /* border-bottom: 3px solid rgba(32, 175, 132, 0.822); */
}

.nav-line{
    display: none;
    width: 25px;
    height: 5px;
    border-radius: 20px;
    margin-top: 3px;
    box-shadow: 0px 0px 8px rgb(3, 221, 119);
    background-color: rgb(64, 192, 192);
}

.active .nav-line{
    display: block;
}