:root {
    --primary-light: #8abdff;
    --primary: #6d5dfc;
    --primary-dark: #5b0eeb;
    --white: #FFFFFF;
    --greyLight-1: #E4EBF5;
    --greyLight-2: #c8d0e7;
    --greyLight-3: #bec8e4;
    --greyDark: #9baacf;
  }
 html {
    overflow: scroll;
    overflow-x: hidden;
    background: var(--greyLight-1);
  }
  ::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
  }
  /* Optional: show position indicator in red */
  ::-webkit-scrollbar-thumb {
    background: darkgrey;
  }

  li{
      color: rgb(44, 43, 43);
  }

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    /* text-transform:uppercase; */
    width:100%;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration);
    

}


/* --------------------start menu-------------------- */

.card {
    margin: auto 5% 10px 5%;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    height: 0px;
    width:0px;
    display: flex;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(35px);
            backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-family: "Poppins", sans-serif;
  }
  
.menu-button{
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(35px);
            backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
    margin: auto 10px auto 10px;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}

.active{
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
    transition: 1s ease;
}


/*---------------- end of bottom menu-------------- */