@font-face {
  	font-family: 'Cairo'; 
  	src: url('../fonts/Cairo-VariableFont_slnt,wght.ttf');
}
body{
    background:url('../images/background.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    font-family:'Cairo';
    direction:rtl;
}
.container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}
.img-container{
    max-width:200px;
}
.img-container img{
    width:100%;
}
.txt-container{
    display:flex;
    justify-content:center;
    flex-direction:column;
}
.txt-container .aid-text{
    font-size:18px;
    text-align:center;
}
form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    width:100%;
}
form input, form button{
    font-family:cairo;
    font-size:18px;
}
form input{
    border:1px solid #00b5cc;
    border-radius: 35px;
    text-align:center;
    padding: 0 10px;
    margin-bottom: 10px;
    width:75%;
}
form button{
    background-color: #00b5cc;
    border: none;
    border-radius: 30px;
    color: white;
    padding: 5px 22px;
    cursor: pointer;
    transition-duration: 0.4s;
    width:170px;
}
form button:hover {
    background-color: #0ab28b;
} 
#card-container{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}
#card{
    width:100%;
    max-width:527px;
}