body, html {
  height: 100%;
  direction: rtl;
  font-family: "B Nazanin",Tahoma, Helvetica, sans-serif;

}

* {
box-sizing: border-box;
}
body{
  /* The image used */
background-image: url("jj-ying-7JX0-bfiuxQ-unsplash.jpg");
background-size: cover;
direction: rtl;
background-repeat: repeat;
}
/* Add styles to the form container */
.container {
position: absolute;
right: 0;
margin: 20px;
max-width: 500px;
padding: 16px;
background-color: white;
border-radius: 10px;
}

.msg{
position: absolute;
margin: 20px;
padding: 16px;
background-color: #ff6600;
float: inherit;
}
/* Full-width input fields */
input[type=text] ,input[type=password] {
width: 100%;
padding: 12px;
margin: 5px 5px 15px 5px;
border: none;
background: #f1f1f1;
border-radius: 10px;
}
input[type=text]:focus, input[type=password]:focus{
background-color: rgb(158, 207, 240);
outline: none;
}
input[type=text]:hover, input[type=password]:hover {
  background-color: rgb(158, 207, 240);
  outline: none;
  }
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
border-radius: 10px;
}

.btn:hover {
opacity: 1;
background-color: #0099ff;
}
/*If the browser window is 600px or smaller */
@media only screen and (max-width: 600px) {
body {
width: 600px;
}
}