/* FOR THE REGISTRATION PAGE */
@font-face {
    font-family:Pacific;
    src: url(utilities/Pacifico.ttf);
}

/* removing default browser behaviour/////////////////////////////// */
/* to remove default behaviour */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Remove the blue focus outline on click */
:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove visited purple color */
a:visited {
    color: inherit;
}

/* Prevent link from turning blue by default */
a {
    color: inherit;
    text-decoration: none;
}

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


body{
    margin: 0px;
    overflow-y: scroll;
}
#regist_page{
    background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;  
    overflow-y: scroll;
    
    
}
#reg_message{
  width: 900px;
  font-size: 1rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: white;

}

#regist_page #reg_ctn{
   background-color: hsl(0, 0%, 100%,1%);
    width: 900px;
    height: 620px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 10px;
     box-shadow: 5px 5px 20px hsla(0, 0%, 0%, 5%),
               -5px 5px 20px rgba(0, 0, 0, 5%),
                -5px 5px 20px rgba(0, 0, 0, 5%),
                5px 5px 20px rgba(0, 0, 0, 5%);
    margin-top: auto;
    margin-bottom: auto;
    border: 1px solid hsl(0, 0%, 100%,10%);
    box-sizing: border-box;
}
#regist_page form{
     width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    animation: reg_form_animation 0.7s ease-in-out ;

}
@keyframes reg_form_animation {
    from{
        transform: translateX(-500px);
        scale: 0.5;
    }
    to{
        transform: translateX(0);
        scale: 1.1;
    }
}

#regist_page form h1{
    font-size: 2.5rem;
    font-family: Pacific;
    font-weight: bolder;
   overflow: hidden;
   box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
     color: hsl(0, 0%, 100%,80%);
     margin: 0%;
}
#regist_page form p{
    text-align: center;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: hsl(0, 0%, 100%,70%);
    line-height: 2rem;
    text-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    margin: 0%;
    
}


#regist_page form .inputctn{
    width: 85%;
    height: 8.2%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    5px 3px 5px hsl(0, 0%, 0%,2%);
    background-color: hsl(0, 0%, 100%,10%);
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 5px;
}
.reg-inputctn__svg-ctn{
   width: 13%;
    height: 80%;
    box-sizing: border-box;
    padding: 7px;
    background: transparent;
    background-color: hsl(0, 0%, 0%,10%);
    border-radius: 5px;
    margin-left: 2%;

}
.reg-inputctn__svg-ctn svg{
     color: white;
    width: 100%;
    height: 100%;
    opacity: 60%;
    margin-top: auto;
    margin-bottom: auto;

}
#regist_page form .inputctn input{
    height: 35px;
    width: 85%;
    border: none;
    margin-left: 0px;
    margin-right: auto;
    background: transparent;
    margin-left: 2%;
    color: white;
    font-size: 1rem;
    font-weight: bolder;
}
#regist_page form .inputctn input:focus{
    border: none;
    outline: none;
    font-weight: bolder;
}
#regist_page form .inputctn input::placeholder{
     font-size: 0.9rem;
     color: hsl(0, 0%, 100%,70%);
     font-weight: lighter;
}

#regist_page input[type="submit"]{
     background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 85%;
    height: 40px;
    font-size: 1rem;
    border: none;
    color: white;
    box-sizing: border-box;
    padding: 5px;
     box-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    border-radius: 5px;
}
#reg_greeting{
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgb(13, 13, 112), rgb(62, 8, 62));
    background: url(utilities/Designer\ 2\ users.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 35%;
    border-bottom-left-radius: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: reg_animation 1s ease-in-out;
    overflow: hidden;
}
.reg_greeting__header{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: hsl(0, 0%, 100%,80%);
    gap: 3%;
    backdrop-filter: blur(2px);
    background-color: hsl(0, 0%, 0%,75%);
   
    font-weight: lighter;
}
.reg_greeting__header p{
    margin: 0px;

}
.chat__ctn{
    color: white;
     width: 90%;
     height: 30%;
     background-color: hsl(0, 0%, 100%,10%);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
     box-sizing: border-box;
     padding: 0.5rem;
     gap: 10%;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);

}
.each-chat{
     width: 60%;
     height: 30%;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     font-size: 0.85rem;
     
}
.each-chat:nth-child(1){
    background-color: hsl(0, 0%, 0%,70%);
    margin-left: 2%;
    margin-right: auto;
    animation: chat_animate 1s ease-in;
     font-weight: bolder;
}
.each-chat:nth-child(2){
    background-color: hsl(0, 0%, 100%,70%);
     margin-left: auto;
    margin-right: 2%;
    color: black;
     font-weight: bolder;
}
@keyframes chat_animate{
    from{
       margin-top: 100%;
       scale: 0;
    }
    to{
       margin-top: none;
       scale: 1;
    }
}
.reg_greeting-btn__ctn{
    width: 90%;
    height: 10%;
    background-color: hsl(0, 0%, 100%,10%);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding-left: 2%;
    border-radius: 10px;
    border: 3px solid hsl(0, 0%, 100%,15%);
    font-size: 0.9rem;
    font-weight: bolder;
}
.reg_greeting-btn__ctn a{
    width: 45%;
    height: 85%;
    margin-right: 1%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bolder;
    background-color: hsl(0, 0%, 0%,90%);
    color: white;
    border-radius: 6px;
      transition: 0.2s ease-in;
}
.reg_greeting-btn__ctn a:hover{
    opacity: 85%;
}
.reg_greeting-btn__ctn a:active{
    width: 30%;
  
}
.blinking_cursor{
    animation: blinking_cursor_animation 1s ease-in-out infinite;
}

@keyframes blinking_cursor_animation {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}




.reg_greeting__header a button{
    width: 10%;
    height: 10%;
}







@keyframes reg_animation {
    from{
        transform: translateX(500px);
        scale: 0.5;
    }
    to{
        transform: translateX(0);
        scale: 1;
    }
}





@keyframes alert_animation {
    from{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 0.5;
    }
    to{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 1px;
        padding-bottom: 1px;
        opacity: 1;
    }
}


/* END OF THE REGISTER PAGE  */



/* START OF LOGINPAGE   /////////////////////////////////////////////////////////////////////*/
body{
    margin: 0px;
    overflow-y: scroll;
}
#loginpage{
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    

}
#loginctn{
   background-color: hsl(0, 0%, 100%,1%);
    min-width: 800px;
    max-width: 900px;
    min-height: 500px;
    max-height: 600px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 10px;
     box-shadow: 5px 5px 20px hsla(0, 0%, 0%, 5%),
               -5px 5px 20px rgba(0, 0, 0, 5%),
                -5px 5px 20px rgba(0, 0, 0, 5%),
                5px 5px 20px rgba(0, 0, 0, 5%);
    margin-top: auto;
    margin-bottom: auto;
    border: 1px solid hsl(0, 0%, 100%,10%);
}
/* FOR THE LOGIN FORM  */
#loginctn form{
   width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    animation: vendor_login_form_animation 0.7s ease-in-out ;
}
#loginctn form h1{
     font-family: Pacific;
    font-weight: bolder;
 font-size: 2.8rem;
   overflow: hidden;
   box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
     color: hsl(0, 0%, 100%,80%);
     margin: 0%;
}
#loginctn form h2{
    color: hsl(0, 0%, 100%,60%);
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    text-decoration: underline 0.3rem hsl(0, 0%, 100%,70%);
    margin: 0%;
}
#loginctn form p{
   text-align: center;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: hsl(0, 0%, 100%,70%);
    line-height: 2rem;
    text-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    margin: 0%;
    
}
/* for the input ctn */
#loginctn form .input_ctn{
    width: 85%;
    height: 8.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    5px 3px 5px hsl(0, 0%, 0%,2%);
    background-color: hsl(0, 0%, 100%,10%);
    overflow: hidden;
    border-radius: 5px;
}
.input_ctn__svg-ctn{
      width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
    background: transparent;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#loginctn form svg{
    color: white;
    width: 100%;
    height: 100%;
    opacity: 60%;
    margin-top: auto;
    margin-bottom: auto;
}
/* FOR THE INPUT */
#loginctn form input[type="text"],[type="password"]{
    width: 85%;
    height: 97%;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 1rem;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: start;
    color: white;
    font-weight: bolder;
}
#loginctn form .input_ctn input:focus{
    border: none;
    outline: none;
    font-weight: bolder;
    background: transparent;
}
#loginctn form .input_ctn input::placeholder{
   font-size: 1rem;
     color: white;
     font-weight: lighter;
}
/* for the submit btn  */
#loginctn form input[type="submit"]{
     background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 85%;
    height: 8%;
    font-size: 1rem;
    border: none;
    color: white;
    box-sizing: border-box;
    padding: 5px;
     box-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    border-radius: 5px;
}
#loginctn form input[type="submit"]:hover{
    opacity: 70%;
}





/* FOR THE LOGIN GREETING */
#loginctn #greeting{
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgb(13, 13, 112), rgb(62, 8, 62));
    background: url(utilities/Designer\ 2\ users.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: reg_animation 1s ease-in-out;
    overflow: hidden;
    transition: 0.3s ease-in;
}
.greeting__head{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,65%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: hsl(0, 0%, 100%,70%);
    gap: 7%;
    backdrop-filter: blur(2px);
}
#greeting p{
    margin: 0%;
}
.greeting__p1{
     font-size: 1.5rem;
    margin: 0px;
    font-weight: bolder;
   
}
.greeting__p2{
     font-size: 1.15rem;
      color: hsl(0, 0%, 100%,90%);
       font-weight: bolder;
}
.greeting__sign-up-btn-ctn{
    width: 50%;
    height: fit-content;
    text-align: center;
    color: white;
    font-size: 1.5vw;
    border-radius: 5px;

    
}
#greeting a button{
  height: 40px;
  width: 100%;
  border: none;
  color: white;
  font-size: 1rem;
   background-color:white;
   border-radius: 5px;
   background-color: white;
   color: black;
   font-weight: bolder;
   margin-left: auto;
   margin-right: auto;
}
#greeting a button:hover{
    opacity: 80%;
}
#greeting a button:active{
        width: 40%;
        transition:  0.5s ease-in;
}

.vendor_page_link{
    color: white;
    text-decoration: underline dotted;
    font-size: 1.3rem;
   }
.vendor_page_link:hover{
    opacity: 90%;
    text-decoration: none;
}
.vendor_page_link:active{
    opacity: 70%;
}


/* login alert message that show when the user passowrd is incorrect or error */
#login_alert{
   width: 55%;
    background-color:red;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 5px;
    overflow: hidden;
    font-size: 1rem;
    animation: alert_animation 0.2s ease-in-out;
    min-width: 800px;
    max-width: 900px;
    min-height: 30px;
    max-height: 35px;
    margin-top: auto;
    margin-bottom: 0%;
    border-radius: 5px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 5px;
}

footer{
    width: 100%;
    height: fit-content;
    background-color: hsl(0, 0%, 0%,20%);
    margin-top: auto;
    margin-bottom: 0vh;
    box-sizing: border-box;
    padding: 10px;
    color: hsl(0, 0%, 100%,80%);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1rem;
    gap: 1.5%;
    display: none;
}


/* END OF LOGIN PAGE //////////////////////////////////////////////////*/






  

/* FOR THE MENU PAGE */
body{
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

/* HEADER ////////////////////////////////////////////////////// */
#menupage #header_ctn{
   position: fixed;
   width: 100%;
   height: 90px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.header_ctn__header{
    width: 600px;
    height: 80%;
    background-color: hsl(0, 0%, 0%,40%);
    display: flex;
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    overflow: hidden;
    color: white;
    scale: 0.95;
    box-sizing: border-box;
    backdrop-filter: blur(20px);
    margin-top: 0px;
    margin-bottom: auto;
    box-sizing: border-box;
    border-bottom: 2px solid hsl(0, 0%, 100%,10%);
    border-left: 2px solid hsl(0, 0%, 100%,10%);
    border-right: 2px solid hsl(0, 0%, 100%,10%);
}

.left_header_ctn{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left_header_ctn div{
    height: 80%;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    overflow: hidden;
    background-color: hsl(0, 0%, 0%,70%);
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
}

.left_header_ctn div .refresh_btn{
    height: 100%;
    width: 45%;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 10px;
   background: black;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.7rem;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
}
.left_header_ctn div .refresh_btn:hover{
    opacity: 90%;
}
.left_header_ctn div .refresh_btn:active{
   opacity: 30%;
}
.left_header_ctn div .refresh_btn svg{
    width: 100%;
    height: 100%;
    color: hsl(0, 0%, 100%,80%);
}

.left_header_ctn div  #fs{
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   font-family: Pacific;
    font-weight: bolder;
    font-size: 1.6rem;
    font-weight: bolder;
}




#currentpagedsp{
    width: 40%;
    height: 80%;
    background-color: hsl(0, 0%, 0%,70%);
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 20px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
     font-family: Pacific;
    font-weight: bolder;
    color: white;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    backdrop-filter: blur(100px);
}

.right_header_ctn{
     width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.right_header_ctn div{
    height: 80%;
    width: 80%;
    background-color: hsl(0, 0%, 0%,70%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    overflow: hidden;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
     backdrop-filter: blur(100px);
}
.right_header_ctn div #greeting{
     width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-family: Pacific;
    font-weight: bolder;
}

.right_header_ctn div #header_logout_btn{
     height: 100%;
    width: 45%;
   border-top-left-radius: 25px;
    border-bottom-left-radius: 10px;
    background-color: black;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.7rem;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
}

.right_header_ctn div #header_logout_btn svg{
    width: 100%;
    height: 100%;
    color: hsl(0, 0%, 100%,80%);

}
.right_header_ctn div #header_logout_btn:hover{
    opacity: 90%;
}
.right_header_ctn div #header_logout_btn:active{
    opacity: 30%;
}









/* HEADER ENS //////////////////////////////////////////////////////////////////*/


#menupage #container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0%;
}

/* FOR THE NAVIAGTION ////////////////////////////////////////////////////// */
#menupage #nav{
    bottom: 0.1%;   
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 270px;
    height: 35px;
    padding-left: 2.5px;
    padding-right: 2.5px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: hsl(0, 0%, 0%,55%);
    position: fixed;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
    -5px 3px 5px hsl(0, 0%, 0%,20%),
    -5px 3px 5px hsl(0, 0%, 0%,20%),
    5px 3px 5px hsl(0, 0%, 0%,20%);
    backdrop-filter: blur(5px);


}
#menupage:hover{
    cursor: pointer;
}
#menupage .nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    align-items: center;
    justify-content: center;
    padding: 0px;
    overflow: hidden;
    animation: animate_nav_on_load 0.5s ease-in-out;
}
#menupage .nav:nth-child(2){
    position: relative;
}


#cart_count{
    position: absolute;
    background-color: hsl(0, 100%, 50%,70%);
    width: 40%;
    height: 60%;
    bottom: 30%;
    left: 50%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    overflow: hidden;
    animation: cart_appear  0.3s ease-out;
}

@keyframes cart_appear{
    from{
        scale: 0.3;
        opacity: 10%;
    }
    to{
        scale: 1;
    }
}




@keyframes animate_nav_on_load {
    from{
        scale: 0.5;
    }
    to{
        scale: 1;
    }
}
#menupage .nav svg{
    width: 90%;
    height: 35px;
}
.nav svg:hover{
    scale: 1.2;
}

/* when naviagtion is active it solid (this only the icon for store (onload the default woukd be active)*/
.active_nav{
  fill: currentColor;
  stroke: none;
}

/* END OF THE NAVIGATION /////////////////////////////////////////////////*/







#menupage .pages{
     width: 100%;
    height: 100vh;
    overflow-y: scroll;
    animation: fadeSlideIn 0.5s ease-in-out forwards;
    box-sizing: border-box;
}
#storedisplay{
     width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
     align-content: start;
    overflow-y: scroll;
    scroll-behavior: smooth;
   padding-top: 100px;
   padding-bottom: 100px;
   gap: 20px 20px;

  
}

.storedisplay{
    width: 250PX;
    height: 320px;
    margin: 5px;
    overflow: hidden;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    font-family: Arial, Helvetica, sans-serif;
    scale: 0.95;
    background-color: black;
    border-radius: 5px;
}

.storedisplay:active{
    opacity: 70%;
}

.store_display_ctn{
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-position: center;
    transition: background-size 0.3s ease-in;
   
}
.store_display_ctn:hover{
    background-size: 130%;
    background-position: center;
}
.store_name_display{
    width: 100%;
    height: 13%;
    margin-top: 0%;
    margin-bottom: 0%;
    backdrop-filter: blur(40px);
}
.store_name_display p{
    width: 100%;
    height: 100%;
    margin: 0%;
    background-color: hsl(0, 0%, 100%,30%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(0, 0%, 0%,70%);
     text-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    font-size: 1.2rem;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
}
.store_description{
    width: 100%;
    height: auto;
   background: linear-gradient(180deg, hsl(0, 0%, 0%,30%), hsl(0, 0%, 0%,50%));
    margin-top: auto;
    margin-bottom: 0%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-break: normal;
    font-size: 0.8rem;
    box-sizing: border-box;
    padding: 10px;
    backdrop-filter: blur(2px);
}



























/* the ol that displays the specific menu of each store  */
/* for each menu  */
body{
    margin: 0px;
    scroll-behavior: smooth;
}

#menu{
     width: 100%;
    height: 90%;
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
     align-content: start;
    overflow-y: scroll;
    scroll-behavior: smooth;
   padding-top: 100px;
   padding-bottom: 100px;
   gap: 20px 40px;
}

#menu li{
    width: 250PX;
    height: 350px;
    margin: 10px;
    overflow: hidden;
    display: flex;
     position: relative;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    overflow: hidden;
    border-radius: 5px;
    scale: 0.95;


                
}


#menu li .each_menu{
    width: 100%;
    height: 100%;
    margin: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    position: relative;
    transition:  background-size 0.3s ease-in;
}
/* houses the svg  */
.each_menu label{
    background-color:hsl(0, 0%, 0%,55%);
    width: 20%;
    height: 13%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.4rem;
    border-bottom-left-radius: 10px;
    border-left: 4px solid white;
    border-bottom: 4px solid white;
   backdrop-filter: blur(5px);
   margin-left: auto;
   margin-right: 0%;
  

}
.each_menu label:hover{
    padding: 0.5rem;
    transition: 0.2s ease-in-out;
}

.each_menu label svg{
    width: 100%;
    height: 100%;
    color: white;
}

.isholo .icon-path{
  fill: none;
  stroke: currentColor;
   transition: 0.2s ease-in-out;
}

.isfilled .icon-path{
  fill: currentColor;
  stroke: currentColor;
   transition: 0.2s ease-in-out;
}

.menu_specification{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 0%,5%);
    margin-top: auto;
    margin-bottom: 0%;
    color: white;
    font-size: 0.8rem;
    line-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    backdrop-filter: blur(5px);
}

.foodinfo{
    width: 100%;
    height: 11%;
    margin-top: 0%;
    margin-bottom: 0%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
font-family: Arial, Helvetica, sans-serif;
}

.foodinfo .quantity_ctn{
    width: 20%;
    height: 45px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
      position: absolute;
      z-index: 0;
     bottom: 76.5%;
      right: 20%;
      transform: translateX(0.3rem);
      background-color: hsl(0, 0%, 0%,60%);
      backdrop-filter: blur(100px);
       border: transparent;
     border-right: white 4px solid;
     border-bottom: white 4px solid;
     border-top-left-radius: 5px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 10px;
    
     
    
   
}

.quantity_ctn input{
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background: hsl(0, 0%, 100%,20%);
    font-size: 1.2rem;
    color: white;
     font-family: pacific;
  

}

.foodinfo .menu-name{
     width: 60%;
     height: 100%;
     background-color: hsl(0, 0%, 100%,30%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1rem; 
    box-sizing: border-box;
    padding: 5px;
    text-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    white-space: nowrap;
    text-overflow: ellipsis;
    background:transparent;
    backdrop-filter: blur(10px);
    color: white;
}
.foodinfo .menu-price{
    width: 40%;
    height: 100%;
    background: hsl(0, 0%, 0%,40%);
    overflow: hidden;
     display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: hsl(0, 0%, 0%,70%);
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    color: white;
    box-sizing: border-box;
    border-left: 4px solid white;
    border-top: 4px solid white;
    border-top-left-radius: 5px;
    

}


/* for each out of stock  */
/* for each of the menu that contains out of stock it displays the out of stock over it  */
.out_of_stock{
    width: 250PX;
    height: 350px;
    overflow: hidden;
    display: flex;
     position: relative;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    overflow: hidden;
    border-radius: 3px;
    scale: 0.95;
    margin: 10px;
    border-radius: 5px;
}
.out-of-stock-card{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

}
.out-of-stock-card__info{
    width: 100%;
    height: 100%;
    margin-top: 0px;
    display: flex;
    align-items: baseline;

}
/* to produce the frozen color effect */
.out-of-stock-card__info p{
    
    width: 100%;
    height: 14%;
    margin-top: auto;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    

}

.out-of-stock-card__name{
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
     background-color: hsl(0, 0%, 100%,30%);
     backdrop-filter: blur(10px);
     font-family: Arial, Helvetica, sans-serif;
     color: white;

}


.out-of-stock-card__price{
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    font-size: 1.2rem;
    font-weight: bold;
    background: hsl(0, 0%, 0%,40%);
    backdrop-filter: blur(10px);
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

/* for stock action */
.stock_action{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,50%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.stock_action p{
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stock_action p svg{
    color: hsl(0, 0%, 100%,50%);
    width: 100%;
    height: 100%;

}
.stock_action a{
   color: white;
   font-size: 1.1rem;
   font-weight: lighter;
   cursor: pointer;
   font-family: pacific;
}
.stock_action a:hover{
    cursor: pointer;
}
















#alert{
    width: 600px;
    position: fixed;
    z-index: 99;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(0, 0%, 0%,70%);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    backdrop-filter: blur(40px);
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    animation: animate_alert 0.5s ease-in-out;
    box-sizing: border-box;
}
#alert a{
    width: 10%;
    height: 30px;
}
#alert a svg{
    width: 100%;
    height: 100%;
}
@keyframes animate_alert {
     from{
       scale: 0.2;
     }
     to{
        scale: 1;
     }
}



#alertbtnctn{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 1px;
    width: 100%;
    height: 100%;

}

#alert button{
    border-radius: 5px;
    border: none;
    margin: 5px;
    background-color: hsl(0, 0%, 100%,20%);
    color: white;
    box-sizing: border-box;
    padding: 1rem;
    width: 40%;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;


}
#alert button:hover{
    scale: 0.97;
    transition: 0.3s ease-in-out;
}
#alert button:active{
    opacity: 90%;
    transition: 0.3s ease-in-out;
}
#alert button:nth-child(2){
    background-color: hsl(0, 0%, 0%,70%);
    color: white;
    border: none;
    box-sizing: border-box;
}

/* FOR THE CART PAGE  */

#cartpage{
    margin: 0px;
    height: 100dvh;
    width: 100%;
     background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsl(185, 86%, 31%,95%), hsl(303, 100%, 11%,95%)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#checkout_summary{
    height: fit-content;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}
#selected-foods{
  width: 100dvw;
    height: 100dvh;
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
     align-content: start;
    overflow-y: scroll;
    scroll-behavior: smooth;
   padding-top: 100px;
   padding-bottom: 100px;
   gap: 20px 40px;
}

/* the list that contains each element of each list  */

/* eacho fthe selected items  */
#selected-foods .each-items{
    width:  250px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
   border:  4px solid hsl(0, 0%, 100%,10%);
    margin: 0px;
}
.each-items__info-ctn{
    background-color: hsl(0, 0%, 0%,70%);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: hsl(0, 0%, 100%,75%);
    

}

.each-items__food-image{
    width: 75%;
    height: 80%;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 90%;
    scale: 0.97;
}
.each-items__food-image:hover{
    scale: 0.99;
    transition: 0.2s ease-out;
}

/*  */
.each-items__about{
    width: 25%;
    height: 80%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    
}
.each-items__about_food{
    width: 85%;
    height: 45%;
    background-color: hsl(0, 0%, 100%,8%);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
}
.each-items__about_food:nth-child(1){
    border-top-right-radius: 0px;
}
.each-items__about_title{
    width: 100%;
    height: 40%;
    background-color:hsl(0, 0%, 100%,10%);
    box-sizing: border-box;
    padding: 0.5rem;

}

.each-items__about_title svg{
    width: 100%;
    height: 100%;
}
.each-items__about_display{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;

}
/*  */



.each-items__about_2{
     width: 95%;
    height: 15%;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: hsl(0, 0%, 100%,8%);
    margin-left: auto;
    margin-right: auto;
}
.each-items__about_2_food{
     display: flex;
    align-items: center;
    justify-content: center;
    width: 47%;
    height: 80%;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 5px;
    font-weight: bolder;
}
.each-items__about_2_food:nth-child(2){
    background-color: hsl(0, 0%, 0%,50%);
    font-weight: bolder;
}













.checkoutbox{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;


}


#food_comment__ctn{
    width: 100%;
    height: 110px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10%;

}
#food_comments{
   width: 70%;
   max-width: 1200px;
   height: 30%;
   background-color: hsl(0, 0%, 0%,50%);
   font-size: 0.85rem;
   font-family: Arial, Helvetica, sans-serif;
   color: white;
   border: 3px solid hsl(0, 0%, 100%,10%);
   margin-left: auto;
   margin-right: auto;


}

#food_comments:focus{
    border: none;
}
textarea{
    resize: none;
}
textarea ::placeholder{
    line-height: 30px;
}

.cartbtn{
    width: 70%;
    padding: 0.7rem;
    border: none;
    background-color: hsl(0, 0%, 0%,50%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    border:  3px solid hsl(0, 0%, 0%,10%);
}


#emptycart{
    width: 80%;
    max-width: 650px;
    min-width: 500px;
    height: 350px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: hsl(0, 0%, 0%,70%);
    opacity: 50%;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);


}


/* FOR THE CALLBACK.PHP (TO SHOW THE TRANSACTION SUCCESSFULL) ......................................*/
#callback{
    margin: 0%;
    background-image: url(uploads/blurred.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}
#recieptctn{
    width: 50%;
    height: fit-content;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:  1px solid white;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 2%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: center;
     padding-top: 10vh;
    padding-bottom: 10vh;
    
}
#recieptctn h2{
    width: 50%;
    padding: 4vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    opacity: 50%;
    margin-bottom: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
}
hr{
    width: 80%;
    height: 10px;
    opacity: 60%;
    background-color: black;
    border: none;
}

#recieptctn ol{
    width: 90%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
}
#recieptctn li{
    width: 80%;
    height: fit-content;
    padding: 10px;
    opacity: 60%;
    background-color: transparent;
    margin-bottom: 10px;
    margin-left: auto;
    border-bottom: 2px solid  black;
    margin-right: auto;
    font-family: 1.1vw;
    font-family: Arial, Helvetica, sans-serif;
}
#recieptctn #ctn{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    height: fit-content;
    border-radius: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border: 2px black solid;
    opacity: 70%;
}

#recieptctn #emailctn{
    width: 45%;
    height: fit-content;
    background-color: black;
    opacity: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    font-size: 1.1vw;
}


#recieptctn #refctn{
    width: 45%;
    height: fit-content;
    background-color: black;
    opacity: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 1.1vw;
    
}
#recieptctn a{
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    font-size: 1.2vw;
    margin-right: auto;
    margin-bottom: auto;
}




/* start order page begins  */
#orderpage{
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-align: center;
    height: 100vh;
    overflow: hidden;

}

#orderpage form{
    margin-top: 80px;
   width: 71%;
    height: 75px;
    min-width: 750px;
    max-width: 1000px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   color: white;
   margin-left: auto;
   margin-right: auto;
   border-radius: 2.5px;
   box-shadow:  5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                5px 3px 5px hsl(0, 0%, 0%,2.5%);
   box-sizing: border-box;
   padding: 2.5px;

}
#orderpage form p{
    font-size: 1.7rem;
    font-weight: bolder;
    width: 35%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 5px;
    font-family: Pacific;
    font-weight: bolder;
    text-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    color: hsl(0, 0%, 100%,80%);
    
;
    
}
select[name="filter"]{
    background-color: transparent;
    height: 75%;
    width: 20%;
    text-align: center;
    border: 2px solid hsl(0, 0%, 100%,10%);
    border-radius: 5px;
    font-size: 0.9rem;
    color: white;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    font-weight: bolder;


}
select[name="current_status"]{
    margin-left: 1vw;
    margin-right: 1vw;
    height: 75%;
    width: 20%;
    background-color: hsl(0, 0%, 0%,40%);
    color: white;
    text-align: center;
    border-radius: 5px;
    border: none;
    font-size: 0.9rem;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
   font-weight: bolder;
}
#orderpage form option{
    background-color: rgba(0, 0, 0, 0.795);
    opacity: 60%;
    border-radius: none;
    font-size: 1vw;
}

#orderpage form input{
    width: 20%;
    height: 75%;
    border-radius: 5px;
    border: none;
    background-color: hsl(0, 0%, 100%,70%);
    font-size: 0.9rem;
    font-weight: bolder;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    
}
#orderpage form input:hover{
    opacity: 70%;
}
#orderpage form input:active{
    background: transparent;
    border: 2px solid hsl(0, 0%, 100%,10%);
    color: white;
}

#orderctn{
    width: 70%;
    min-width: 750px;
    max-width: 1000px;
    height:  100vh;
    overflow-y: scroll;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-bottom: 100px;
    box-sizing: border-box;
    border-radius: 10px;
    

}


.each-order{
    width: 100%;
    height: 65px;
    background: hsl(0, 0%, 0%,25%);
    margin: 1.5%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    color: hsl(0, 0%, 100%,80%);
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    backdrop-filter: blur(40px);    
}
.each-order:hover{
    scale: 0.99;
    transition: 0.1s ease-in;
}
.each-order__number{
    height: 80%;
    width: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding-left: 5px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
    -5px 3px 5px hsl(0, 0%, 0%,1%),
    -5px 3px 5px hsl(0, 0%, 0%,1%),
    5px 3px 5px hsl(0, 0%, 0%,1%);
    border-top-left-radius: 0%;
    border-bottom-left-radius: 20%;
     border-top-right-radius: 20%;
    border-bottom-right-radius: 0%;
    overflow: hidden;
    background-color: hsl(0, 0%, 100%,5%);

}
.each-order__email{
     width: 26%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     overflow: hidden;


}
.each-order__store_name{
    width: 26%;
    height: 100%;
     display: flex;
    align-items: center;
    justify-content: center;
}
.each-order__amount{
     width: 26%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     overflow: hidden;
}
.each-order__action-trigger{
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
/* for view order svg for each order_______________________________________________ */
.each-order-action-trigger-view__order-ctn{
   width: 40%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.7rem;
     background-color: hsl(0, 0%, 100%,10%);
     border-radius: 5px;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                5px 3px 5px hsl(0, 0%, 0%,2.5%);
    
    
}
.each-order-action-trigger-view__order-ctn svg{
     width: 100%;
    height: 100%;
}

.each-order-action-trigger-view__order-ctn :hover{
    opacity: 70%;
}
.each-order-action-trigger-view__order-ctn svg:active{
    background: transparent;
    border: 2px solid hsl(0, 0%, 100%,20%);
}

/* ______________________________________________________________________________ */




/* for call action______________________________________________________________ */
.each-order-action-trigger-call__ctn{
   width: 40%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.7rem;
     background-color: hsl(0, 0%, 100%,10%);
     border-radius: 5px;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                5px 3px 5px hsl(0, 0%, 0%,2.5%);
}
.each-order-action-trigger-call__ctn svg{
    background:transparent;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    color: white;
}

.each-order-action-trigger-call__ctn svg:hover{
   opacity: 70%;
}


.each-order-action-trigger-call__ctn svg:active{
    background: transparent;
    border: 2px solid hsl(0, 0%, 100%,20%);
}



/* the one in the html  */
#empty_order{
     width: 90%;
    height: 50vh;
    color: white;
    opacity: 50%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: hsl(0, 0%, 0%,60%);
    margin: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 50%;
    
}

/* the one the javscript returns */
.empty_order{
width: 70%;
height: 50vh;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5vw;
color: white;
opacity: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
margin-top: 25px;
border-radius: 10px;
box-sizing: border-box;
    padding: 10px;
}
/* THE end of view order page  */



/* RECIEPT PAGE///////////////////////////////////////////// */
#reciept_page{
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    box-sizing: border-box;

}
#back_to_order_btn{
    background-color: hsl(0, 0%, 0%,30%);
    width: 50px;
    height: 40px;
    position: fixed;
    color: white; 
    left: 50%; 
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    font-family: Arial, Helvetica, sans-serif;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
    -5px 3px 5px hsl(0, 0%, 0%,10%),
    -5px 3px 5px hsl(0, 0%, 0%,10%),
    5px 3px 5px hsl(0, 0%, 0%,10%);
    animation: 1s scale_back_btn ease-in-out;
    backdrop-filter: blur(40px);
}
#back_to_order_btn:hover{
    opacity: 70%;
}
#back_to_order_btn:active{
    border: hsl(0, 0%, 100%,30%) 2px solid ;
}
#back_to_order_btn svg{
    width: 100%;
    height: 100%;
    color: white;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
}
@keyframes scale_back_btn {
    from{
        scale: 0.2;
        opacity: 10%
    }
    to{
        scale: 1;
    }
}


#reciept_page .reciept{
    background-color: hsl(0, 0%, 0%,50%);
    width: 500px;
    height:fit-content;
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 35%;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
    -5px 3px 5px hsl(0, 0%, 0%,5%),
    -5px 3px 5px hsl(0, 0%, 0%,5%),
    5px 3px 5px hsl(0, 0%, 0%,5%);
    position: relative;
    backdrop-filter: blur(40px);
    margin-top: 800px;
}
.reciept h1{
    width: 150px;
    height: 150px;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    border-radius: 50%;
    box-shadow:  5px 3px 5px hsla(0, 0%, 0%, 0.1),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    position: absolute;
    box-sizing: border-box;
    padding: 0.8rem;
    left: 50%;
    right: 50%;
    bottom: 80%;

}
.reciept h1 p{
     font-family: Pacific;
    font-weight: bolder;
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 100%,10%);
    color: hsl(0, 0%, 100%,90%);
    border-radius: 50%;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* TO SHOW THE AMOUNT */
.reciept h2{
    margin-top: 20%;
    font-size: 1.3rem;
    line-height: 55px;
}
/* TO SHOW THE STORE NAME AND THE DATE  */

.reciept .reciept_ctn{
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    background-color: hsl(0, 0%, 100%,10%);
}
/* left side for title of each catergory  */
.reciept_ctn .reciept_title{
   width: 50%;
   height: fit-content;
   opacity: 90%;
   font-size: 1.1rem;
}
/* right side for display  answers in reference to the title */
.reciept_ctn p{
    width: 50%;
    height: fit-content;
    opacity: 70%;
    font-size: 1.1rem;
   
}
.reciept .comment_ctn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 98%;
    height: fit-content;
    background-color: hsl(0, 0%, 100%,10%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;

}
/* for the title that is centralized  */
.comment_title{
    width: 100%;
    height: fit-content;
    font-size: 1.1rem;
    margin-bottom: 5px;
    text-decoration: underline 3px solid hsl(0, 0%, 100%,50%);
}
.comment{
    width: 100%;
    height: fit-content;
    margin-top: 0px;
    font-size: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:center;
    opacity: 70%;
    word-break: break-all;
   
}
.code_ctn{
    display: flex;
    flex-direction: row;
    height: fit-content;
    width: 98%;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    background-color: hsl(0, 0%, 100%,10%);
}
.codes{
    background-color: hsl(0, 0%, 100%,10%);
    width: 49%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-size: 1rem;
    padding: 5px;
    box-sizing: border-box;
    line-height: 25px;
}
/* END OF RECIEPT PAGE */




















/* start of the help page  */
#helppage{
    background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
     padding-top: 100px;
    padding-bottom: 100px;
}
/* the detail tag that holds all the terms  */
.terms_help_template{
    width: 70%;
    max-width: 900px;
    min-width: 600px;
    height: fit-content;
    margin-top: 7px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.terms_help_template:active{
    animation: 0.2s  click ease-in-out;

}
@keyframes click {
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
.terms_help_body{
    width: 100%;
    height: fit-content;
    background-color: hsl(0, 0%, 0%,30%);
    backdrop-filter: blur(30px);
    padding: 1rem;
    box-sizing: border-box;
   font-size: 1rem;
   backdrop-filter: blur(40px);
   color: hsl(0, 0%, 100%,70%);
}
.inside_detail{
    width: 100%;
    height: fit-content;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}
.inside_summary{
    width: 100%;
    height: fit-content;
    background-color: white;
    opacity: 40%;
    padding: 0.95rem;
    box-sizing: border-box;
    font-size: 0.95rem;
    color: black;
}
.inside_summary:hover{
    animation: 0.2s  hover_inner ease-in-out;
}
.inside_summary:active{
    animation: 0.2s click ease-in-out;
}
@keyframes hover_inner{
    from{
        scale: 1;
    }
    to{
        scale: 0.98;
    }
}

.inside_P{
    width: 100%;
    background-color: black;
    height: fit-content;
    margin: 0px;
    opacity: 40%;
    padding: 0.95rem;
    box-sizing: border-box;
    font-size: 0.85rem;
    color: white;
    line-height: 20px;
    backdrop-filter: blur(40px);
}
#helppage a{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;

}
.about_dev{
    width: fit-content;
    height: fit-content;
    background-color: hsl(0, 0%, 0%,10%);
    margin-top: auto;
    margin-bottom: 0px;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: ease-in-out 0.2s;
}
.about_dev:hover{
    padding: 8px;

}
.about_dev:active{
    background:transparent;
}



















/* FOR THE ACCOUNT PAGE  */
#accountpage{
    margin: 0px;
    background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    height: fit-content;
    gap: 15px;
    padding-bottom: 100px;
}
#profilebox{
    width: 700px;
    height: fit-content;
    background-color: hsl(0, 0%, 100%,5%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    backdrop-filter: blur(40px);
    margin-top: 100px;
    border: 1.5px solid hsl(0, 0%, 100%,10%);
    border-radius: 10px;
    display: none;


}
#accountpage #index{
   background-color: hsl(0, 0%, 0%,70%);
    width: 45%;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
   border-radius: 10px; 
}
#accountpage #index p{
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 45%;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    text-align: center;
    font-size: 8rem;
    padding: 5px;
    color: hsl(0, 0%, 100%,40%);
    font-family: Arial, Helvetica, sans-serif;

}
#pctn{
    width: 700px;
    opacity: 55%;
    box-sizing: border-box;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
    padding: 0.5rem;
    background-color: hsl(0, 0%, 100%,5%);
    border: 1.5px solid hsl(0, 0%, 100%,10%);
    border-radius: 10px;
    margin-top: 100px;
}
#currentdetailsheader{
    background:white;
    text-align: center;
    width: 45%;
    height: 8%;
    padding: 5px;
    font-size: 1.2rem;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    margin-top: -0.5rem;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    color: black;
    border-left: 1.5px solid hsl(0, 0%, 100%,10%);
    border-right: 1.5px solid hsl(0, 0%, 100%,10%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pctn{
    width: 100%;
    height: 62px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    background-color: hsl(0, 0%, 0%,70%);
    border-radius: 5px;
    gap: 1%;
}
.pctn label{
    width: 47.5%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 1.1rem;
    overflow: hidden;
    gap: 2%;
    text-decoration: underline 3px  hsl(0, 0%, 100%,10%);
    border-right: 5px solid hsl(0, 0%, 100%,10%);
    border-radius: 0px;
    height: 80%;
    border: none;
}
.ptcn__svg-ctn{
    width: 15%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 10px;
    margin-left: 2%;
    border: 1.5px solid hsl(0, 0%, 100%,30%);
    background-color: hsl(0, 0%, 100%,10%);
    color: hsl(0, 0%, 100%,80%);
    margin-left: 4%;
    margin-right: 3%;

}
.ptcn__svg-ctn svg{
    width: 100%;
    height: 100%;

}

.ptcn_arrow_display_svg__ctn{
    width: 5%;
    height: 70%;
    color: black;
}

.ptcn_arrow_display_svg__ctn svg{
    width: 100%;
    height: 100%;
}
.pctn__display{
    width: 47.5%;
    height:80%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.1rem;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 0.5%;
    padding-right: 1rem;
   background: linear-gradient(to right, hsl(0, 0%, 100%,0%), hsl(0, 0%, 100%,15%));

}

#edit_profile_form{
    width: 700px;
    height: fit-content;
    background-color: hsl(0, 0%, 0%,40%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 10px;
    animation: fadeSlideIn 0.5s ease-in-out forwards;
    backdrop-filter: blur(40px);
    

}
#edit_profile_form label{
    color: black;
    width: 50%;
    height: fit-content;
    background-color: white;
    padding: 5px;
    opacity: 50%;
    font-size: 1rem;
    font-weight: bolder;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#edit_profile_form input{
    margin-top: 10px;
    margin-right: 10px;
    width: 95%;
    height: 40px;
    background-color: transparent;
    border: none;
    opacity: 50%;
    font-size: 0.9rem;
    color: white;
    border-bottom: 2px white solid;
    text-align: center;
}

#edit_profile_form input::placeholder{
    color: white;
    margin-left: 20px;
    text-align: center;
}

#edit_profile_form input[type="submit"]{
    width: 40%;
    height: 30px;
    margin: none;
    opacity: 100%;
    color: white;
    margin-bottom: 10px;
    border: 1px solid white;
    font-size: 0.9rem;
    border-radius: 5px;
}
#edit_profile_form input[type="submit"]:hover{
    opacity: 70%;
}
#edit_profile_form input[type="submit"]:active{
    background: white;
    color: black;
    opacity: 70%;
}

/* the one generated by javascript */
#cancel_edit_profile_btn{
    max-width: none;
    padding: 5px;
    color: white;
    border: none;
    border-radius: 50%;
    margin-top: 5px;
    font-size: 1.1rem;
    background: transparent;
    text-decoration: underline 2px solid white;
}
#cancel_edit_profile_btn:hover{
    opacity: 70%;
}
#cancel_edit_profile_btn:active{
    background: transparent;
    color: white;
    opacity: 40%;
}


 


#profilebtnctn{
    width: 580px;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.3rem;
    background-color: hsl(0, 0%, 100%,5%);
    border-radius: 10px;
     border: 1.5px solid hsl(0, 0%, 100%,10%);
}



#editbtn{
    width: 50%;
    height: 35px;
    background: transparent;
    color: hsl(0, 0%, 0%,80%);
    border: none;
    color: white;
  
}
#editbtn:hover{
    opacity: 70%;
}
#editbtn:active{
   opacity: 30%;
    background: transparent;
    color: white;
}


#logoutbtn{
    width: 50%;
    height: 35px;
    background-color: hsl(0, 0%, 0%,40%);
     color: hsl(0, 0%, 100%,80%);
    border: none;
    border-radius: 5px;
}

/* loading  */
#loading_ctn{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hsl(0, 0%, 0%,70%);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#loading{
    width: 200px;
    height: 150px;
    background-color: hsl(0, 0%, 0%,70%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    box-sizing: border-box;
    border: 3px solid hsl(0, 0%, 100%,10%);
}
.loading__header{
    width: 100%;
    height: 40%;
    font-size: 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 5px solid hsl(0, 0%, 100%,30%);
   font-family: 'Pacifico', cursive;

}
.loader_ctn{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.loader{
    width: 3%;
    height: 20%;
    background-color: white;
    border-radius: 20px;
    animation: loader_even 0.5s ease-in-out infinite alternate;
}
.loader:nth-child(odd){
    height: 40%;
    animation: loader_odd 0.5s ease-in-out infinite alternate;
}
@keyframes loader_even{
    from{
        height: 20%;
        opacity: 1;
    }
    to{
        height: 35%;
        opacity: 0.3;
    }
}
@keyframes loader_odd{
    from{
        height: 35%;
        opacity: 1;
    }
    to{
        height: 20%;
        opacity: 0.3;
    }
}
/* end of loading  */

























































.fadein{
    animation: fadeSlideIn 0.1s ease-in-out forwards;
}


::-webkit-scrollbar{
    width: 0px;
}






/* START OF  ANIMATION */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    scale: 0.5;
    transform: translateX(90px);
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    scale: 1;
  }
}

@keyframes navanimate {
    from{
        opacity:0;
        scale: 0.25;
        transform: translate3d(50%,-83vh,0);
    }
    to{
        opacity: 1;
        scale:   1;
        transform: translate3d(50%,83vh,0);
    }
}
@keyframes fadeSlideIn2 {
    from {
      opacity: 0;
      scale: 0.2;
      transform: translateX(200px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
      scale: 1;
    }
  }


@keyframes appear {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


  @keyframes hover{
    from{
        scale: 2;
    }
    to{
        scale: 1;
    }
  }

  @keyframes hoverlist{
    from{
        scale:1;
    }
    to{
        scale:0.9;
    }
  }

  @keyframes hovermenu {
    from{
        scale: 2;
    }
    to{
        scale: 1;
    }
  }
@keyframes buttonanimate{
    from {
        opacity:0.5;
        scale: 0.95;

    }
    to{
        opacity:1;
        scale: 1;
    }
}


@keyframes fadeSlideIn3 {
    from {
      opacity: 0;
      scale: 0.2;
      transform: translateY(600px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      scale: 1;
    }
  }
  /* END OF GENERAL ANIMATION */