body{
    margin: 0;
    padding:0;
    background-image: url("../Images/background.jpg");
    background-size: 100vw ;
    
    background-repeat: repeat-y
    ;
    user-select: none;
    background-attachment: fixed;

}
#home{
    height:40px;
    width:40px;
    position: fixed;
    top:15px;
    left:20px;;
}
#searchbar
{
    position:fixed;
    width:40vw;
    height:30px;
    top:20px;
    left:70px;
    background-color: white;



}
.sidebar>h1{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40px;
    margin:none;
    box-sizing: border-box;
    text-align: center;
    color:white;
    font-size: 5vmin;
}
 #searchbar>input{
     position: absolute;
     top:0px;
     left:25px;
     outline: none;
     border:none;
    box-sizing: border-box;
     height:30px;
     padding:10 10 10px 0;
    width:calc(40vw - 55px)
 }
 #searchbar>img{
     position: absolute;
     top:5px;
     left:5px;
     width:20px;
     height:20px;
     border:none;
     transform: rotate(-20deg);
 }
 #searchbar>button{
     position:absolute;
      right:10px;
      top:5px;
      height:20px;
      width:20px;
      border:none;
      background-color: red;
      color:white;
      border-radius: 2px;;
      visibility: hidden;
 }
#heading{
    position:fixed;
    margin: 0;
    height:30px;
    z-index: 100;
 
    left:20px;
    top:60px;
    color:white;
    text-align: center;
    font-size: calc(16px + 5vw)
}
nav{
    position:absolute;
    z-index: 120;;
    top:10px;
    right:10px;
    width:40vw;
margin:0;
    display: flex;

    
    justify-content: flex-end;
    flex-wrap: wrap;
}
.sidebar{
    position:fixed;
    height:100vh;;
    width:70vmin;
    background:linear-gradient(90deg,rgb(65, 63, 63),rgb(34, 32, 32));
    top:0;
    left:0;
    transform: translateX(-70vmin);
    transform-origin: left top;
    transition: 0.5s;
    z-index: 200;
    ;
    

}
.sidebar>li{
    position:relative;
    top:100px;
    height:40px;
    width:100%;
    border-width: 1px 0 0 0;
    border-color: black;
    border-style: solid;;
    margin: 0;
    color:white;
    box-sizing: border-box;
    box-sizing: border-box;
    font-size: 4vmin;
    padding-top: calc((40px - 4vmin)/2);
    padding-left: 50px;;
    transition: 0.3s;;
    list-style: none;
}

#search-in-menu{
    position: absolute;
    width:70%;
    left:15%;
    top:60px;
    border: none;
    outline: none;
    height:30px;
    border-radius: 5px;
    font-size: 12px;
    padding: 7.5px;
    box-sizing: border-box;
}
.sidebar>li:hover{
    background-color: rgb(33, 32, 32);
    padding-left: 60px;;
}
.active_sidebar
{
    transform: translateX(0);
    transform-origin: right top;;
}
.sidebar>h1>img{
    position:absolute;
    bottom:0px;
    right:15px;
    height:40px;
    width:40px;
}
.sidebar>h1>button{
    position: absolute;
    bottom:10px;
    left:15px;
    cursor: pointer;
    height:20px;
    width:60px;
    border:1px solid white;
   background-color: transparent;
    color:white;
    
    border-radius: 3px;;
    text-align: center;
}
#login , #signup, #about, #contact {
   
    width:60px;
    margin:10px 10px  0 0;
    height:20px;
    border-radius: 5px;;
    border :none;
    outline: none;;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding-top: 4px;
    top:20px;
}
#feedbackBtn{

    height:20px;
    width:150px;
    border-radius: 3px;
    background-color:rgb(244, 223, 35);
    border:none;
    position:fixed;
    right:30px;
    bottom:130px;
    animation:sending_feedback 1.5s infinite ease;

}
#login {

    background-color: rgb(16, 16, 213);
    color:white;
    
}
#signup{
 background-color: rgb(255, 0, 0);
 color:white;
 right:10px;
   
}
#login{
    right:90px;
}
#about{
    border:1px solid white;
    color:white;
}
#about:hover{
    border:none;
    background-color: aqua;
    color:black
}
#contact{
    background-color: rgb(18, 191, 52);
    color:white
}
#login:hover{
background-color: rgb(13, 13, 178);
}
#signup:hover
{
background-color: rgb(222, 10, 10);
}
#contact:hover{
    background-color: rgb(14, 155, 42);
}
#coming-soon-message , #message{
    position:fixed;
    left:calc((100vw - 80vmin)/2);
    top:calc((100vh - 40vmin)/2);
    height:40vmin;
    width:80vmin;
 color:white;

    border-radius: 10px;;
    font-size: 5vh;
    box-sizing: border-box;
    padding:10px;
   text-align: center;;
   padding-top:  calc((40vmin - 5vh)/2);
 
    
    
}
#coming-soon-message{

    background-color: black;
    opacity: 0.6;
    color:white;
   
}

#message{
    top:calc((100vh - 60vmin)/2);
 font-size:calc(10px + 2vw);
color :white

}

footer{
    position: absolute;
    left:0;
    bottom:-200px;;
    width:100vw;
    height:100px;
    background-color:white;
color:black;
display: flex;
justify-content: space-around;

flex-wrap: wrap;;



}
#contact-info{
position:absolute;
top:10px;
    width:400px;
right:50vw;;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 12px;;
}
#contact-info>a>img{
    width:20px;
}

#terms-and-conditions{
    position:absolute;
    left:0;
    bottom:0;
    width:100vw;;
    background-color: red;


}

#policies{
    position: absolute;
    bottom:30px;
    left:calc((100vw - 200px)/2);
    width:200px;
    text-align: center;
    display: flex;
    bottom: 20px;;
    font-size: 12px;
    justify-content: space-around;;
}
#copyright{
    position:absolute;
    width: 100vw;
    left:0;
    text-align: center;
    bottom:5px;
    font-size: 12px;;
}

.social-icon{
   
    width:30px;
    margin-top: 10px;
    box-sizing: border-box;
    transition: 0.5s;;
    margin:5px;
    box-sizing: border-box;

}
.social-accounts{
  
    position:absolute;
    left:50vw;
    top:10px;
    width: 400px;
    height:30px;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;



    ;
}
@media screen and (orientation:portrait){
    footer{
        height:200px;
    }
    #contact-info{
        position: absolute;;
        width:100vw;
       top:60px;
       left:0px;
         display: flex;
         justify-content: center;
         text-align: center;
        flex-wrap: wrap;;
         font-size: 12px;;
    }
#social-accounts{
    left:calc(50vw - 200px)
}
}
.social-icon:hover{
  transform: scale(1.5);
}


.feedback-dialog
{
    position: absolute;
    width:60vmin;
    height:40vmin;
   outline: none;;
   right:180px;
   bottom:150px;
  
    border-radius: 15px;
    padding: 15px;;
    resize: none;
    border:none;
    transition: 0.5s;  
    transform: scale(0);
    transform-origin: bottom right ;
    background-color: white;;
    
    
}
.feedback-dialog>textarea{
    width:100%;
    height:80%;
    position:absolute;
    left:0;
    top:0;
    background-color: transparent;
    outline: none;;
    border: none;;
    resize: none;
    box-sizing:border-box;
    padding: 10px;;
    border-radius: 15px;;
    overflow: hidden;
}
.f-dialog-active{
transform: scale(1);
left:calc((100vw - 60vmin)/2);
bottom:calc((100vh - 40vmin)/2);
}
#buttons{
    position: absolute;
    bottom:0;
    
    height:40px;
    width:80%;
    left:10%;
    display: flex;
    justify-content: space-around;;
}
#cancelBtn,#submitBtn{


    bottom:10px;
    width:60px;
    height:20px;
    border-radius: 3px;
    border:none;
    color:white;
 
    

}
#cancelBtn{

    background-color: red;
    
}
#submitBtn{
    background-color: rgb(93, 144, 17);
    display: none;

}
#submittedInfo{
    position:absolute;
   bottom:30px;
    left:calc(50vw - 150px);
    height:40px;
    width:300px;
    background:linear-gradient(45deg,rgb(33, 148, 194),rgb(18, 96, 124));
    border-radius: 3px;;
    color:white;
    text-align: center;
    box-sizing: border-box;
    padding-top: 7px;
    visibility: hidden;
}
.show_social_link
{
    position:absolute;
    bottom:-80px;
    width:300px;
    height:30px;
    background-color: white;
    border-radius: 5px;
    color:black;
    left:calc((100vw - 300px)/2);
    text-align: center;
    visibility: hidden;
    box-sizing: border-box;
   padding: 7px;    
    
}
@keyframes sending_feedback{
    0%{
        transform: scale(1);

    }
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}