@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@400..700&family=Darumadrop+One&family=Funnel+Display:wght@300..800&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Reem+Kufi+Ink&family=Reem+Kufi:wght@400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 

body,li,ul,h1,p{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
    text-align: center;
}

body{
  /* max-width: 100%; */
    overflow: auto;
    font-family: "Reem Kufi", serif;
    direction:rtl ;
    color: #3e3e3e;
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
    font-size: 1.175rem;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;



    display: flex;
    flex-wrap: wrap; 

}

.login-box{
    border: 5px solid rgb(220, 210, 210);
    border-radius: 3.5rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: rgb(253, 253, 253);
    position:absolute ;
    padding: 2rem;
    left: 50%;
    transform: translate(-50%, 0);
    top: 12rem;
    margin: auto;
    height: calc(100vh - 16rem);
    max-height: 450px;
    min-height: 450px;
    z-index: -1;
}



#email{
    margin: 0;
    display: block;
    margin: 1rem 0 ;
    border-radius: 1.75rem ;
    padding: 1rem;
    width: 12rem ;

}

#password{
    padding: 1rem;
    border-radius: 1.75rem;
    display: block;
    margin: 1rem 0;
    width: 12rem;
}
a{
    text-decoration: none;
    margin: 0.5rem 0.5rem  ;

}
.login-button{
    padding: 1rem;
    display: block;
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #fdf2e9, #f4c95d, #d77a61);
    animation: gradientAnimation 10s ease infinite;
    color: black;
    margin: 0.75rem 0;
    box-shadow: 0.5rem 0.7rem 1rem -0.3rem  black;
    border: 0.3rem solid aliceblue ;
    width: 12rem ;
    box-sizing: content-box;
    font-size: 1rem ;
    color: white;
    cursor: pointer;

}
.icon{
    padding: 0.6rem ;
    margin: 0 0 0rem 0.8rem ;
    display: inline-block;
    border-radius:100% ;
    color: aliceblue;
    background: linear-gradient(135deg, #fdf2e9, #f4c95d, #d77a61);
    animation: gradientAnimation 10s ease infinite;
    cursor: pointer;
    box-shadow: 0.5rem 0.7rem 1rem -0.3rem  black;
    border: 0.3rem solid aliceblue ;

}
.or-login-with{
    display: flex;
    font-size: 1.25rem;
    opacity: 0.5;
    padding: 1rem ;
    margin: 0.7rem 0 0 0 ;
    justify-content: center;
}
.icon-div{
display: flex;
justify-content: center;
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }

}




header {
    position: fixed;
    width: 100%;
    background-color: #291305;
    color: white;
    padding: 1.2em 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
 }
 .background-video {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   z-index: -1;
}
nav {
   top: 6em;
   position: fixed;
   width: 100%;
   background: rgb(255, 239, 239);
   padding: 1em;
}

nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;
}

nav ul li a {
   color: rgb(26, 24, 24);
   text-decoration: none;
   font-size: 1.3em;
   transition: all 0.3s linear;
}

nav ul li a:hover {
   background-color: #7B6B43;
   color: white;
   padding: 0.5em;
   border-radius: 5px;
}  




.tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: 120px;
    background-color: #fff;
    color: #333;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    
   
    position: absolute;
    top: 50%; 
    right: 10px;
    transform: translateX(-50%);
    z-index: 1;
    
   
    transition: opacity 0.3s;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
  footer {
     background: #f3efef;
     color: rgb(12, 12, 12);
     padding: 1.5em;
     margin-top: 20px;
  }
 
 
 
  .checkbtn {
    font-size: 22px;
    color: black;
    float: right;
    line-height: 80px;
    margin-right: 30px;
    cursor: pointer;
    display: none;
  }
  #check {
    display: none;
  }

  
  /* Responsive media query code for small screen */
  @media (max-width: 890px) {
 
    .checkbtn {
      display: flex;
    }
    nav{
       display: flex;
       
    }
    ul {
     display: flex;
     flex-flow: column;
     top: 9em;
      position: fixed;
      width: 100%;
      height: 80vh;
      background: rgb(255, 239, 239);
      left: -100%;
      text-align: center;
      transition: all .5s;
    }
    nav ul li {
      display: block;
      margin: 0.1rem 0;
      line-height: 30px;
    }
    nav ul li a {
      font-size: 25px;
    }
    #check:checked~ul {
      left: 0;
    }
   }
   section {
     background: url("bg.jpg") no-repeat;
     background-size: cover;
     height: calc(100vh - 80px);
   }
   ul,li{
     text-decoration: none;
  }

  .icon:hover{
    transform: scale(1.2);
  }

  .login-button:hover{
    transform: scale(1.05) ;
}