.username-container{
    width: 98%;
 display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 1rem auto;
 
    direction: rtl;   
    padding: 1rem;
    box-shadow: 0 0 1px 1px #ddd;
}
.username{
 display: flex;
    flex-direction: row;
    align-items: center;
 
}
.username img{
    width: 25px;
    height: 25px;
    margin-left: .5rem;
}
.span1,.span2{
    color: #fff;
        margin-left: .5rem;
    font-size: 1rem;
}
.logout{
    text-decoration: none;
 
     display: flex;
    flex-direction: row;
    align-items: center;
        color: #fff;
}
.login-register-container{
    margin:1rem auto ;
    direction: rtl;   
    padding: 1rem;
    box-shadow: 0 0 10px 3px #ddd;
    width: 98%;
 display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-family: samim;
}
.login-register-container a,.username-container a,.username{
    border:1px solid #ddd;
    margin: .5rem;
    padding: .5rem 1rem;
    border-radius: 5px;
        box-shadow: 0 0 3px 1px #ddd;
        font-family: samim;
    font-size: .8rem;
}
.login-register-container a:hover{color:orange;}
.username-container a:hover{color:orange;}
.icon-user-section{
    margin: .5rem;
}
@media screen and (max-width:1200px)
{
   .username-container,.login-register-container{
       margin-top: 5rem;
 
} 
}