body{
    font-family: "Tajawal", sans-serif;
    background: black;
   
}
*{
    font-family: "Tajawal", sans-serif;
     color: aliceblue;
}
#msaa{
    border-radius: 0px 0px 15px 15px;
  border:1px solid rgba(255, 255, 255, 0.664);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.788);
}
.navbar{

 position: absolute;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.664);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.788);
color: aliceblue;

}
.navbar .navbar-brand{
    font-size: x-large;
    color:aliceblue;
}

.navbar .navbar-brand:hover{
    font-size:xx-large;
    color: gold;
    transition: 1s;
}

.navbar .navbar-nav .nav-link{
    color: aliceblue;
}
.navbar .navbar-nav .nav-link.active ,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover{
    color: goldenrod;
}

.navbar .serch{
    border-left:1px solid goldenrod ;
    
}
.navbar .serch svg{
    color: goldenrod;
    font-size:x-large;;
    
}
.navbar .navbar-toggler{
    color: goldenrod;
}



.landing{
    min-height: calc(90vh - 30vh );
    
}


.text-center{
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border:1px solid rgba(255, 255, 255, 0.664);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.788);
   
    
    


}




/* -------------------------------------------------------------------- */
.card{
    border:1px solid rgba(255, 255, 255, 0.664);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.788);
    margin-top: 20px;

}

.create-post{
    position: fixed;
    right: 4%;
    bottom: 6%;
    cursor: pointer;
    box-shadow: 0px 1px 10px 4px black;
    border-radius: 50%;
   
}
.min-info{
        box-shadow: 0px 0px 20px 0px goldenrod;
    background: #212121;
    border-radius: 10px;
}

.user-info{
    display: flex;
    justify-content: space-evenly;
    height: 120px;
   margin: 0px 12px;
   font-weight:bold;
}


.loader {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: rotate 1s linear infinite
      }
      .loader::before , .loader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #FFF;
        animation: prixClipFix 2s linear infinite ;
      }
      .loader::after{
        border-color: #FF3D00;
        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
        inset: 6px;
        
      }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
      }