@font-face{
    
  font-family:'circularSp-arab,circularSp-Hebr';
  src:url('reg.woff2');
}

*{
  box-sizing: border-box;
width: 100%;
font-family: 'circularSp-arab,circularSp-Hebr';
outline: none;

}

body{
  
  background: black;

margin: 0;
}

main{
margin:40px 0;
text-align: center;
}

.continer{
  background: #121212;
  border-radius: 8px;
display: inline-block;
width: 750px;

padding:0px 210px;
}

.title img{
width:260px;
margin:20px 0;

}

.title h1{
color:white;
}

.col{
margin:16px 0;
}

.col input{
  border-radius: 2px;
border:solid 1px white;
color:white;
background:#121212;
width:100%;
padding:14px;
font-size:1em;

}

.col label{
display:flex;
color:white;
margin:8px 0;
}

.but button{
width:100%;
font-size: 1em;
padding:12px;
border:none;
border-radius:30px;
background:#1ed760;
font-weight:bold;
}

.forget a{
color:white;
}

.forget{
margin:20px 0;
}

.sign label{
color:#b3b3b3;
}

.sign a{
 color:white;
 margin:0px 3px;
  font-size:1em;
}
.sign{
display:block;
  text-align:center;
  margin:40px 0;

}

.bottom{
display:inline-block;
color:white;
text-align:center;
font-size:0.7em;
background:#121212;
padding:28px;
}



@media screen and (max-width: 800px) {

.title img{
  width:200px;
}

  .continer{
  border-radius: 8px;
display: inline-block;
width: 400px;
background: #121212;
padding:20px;
}
.col label {
  font-size:1em;
}

.col input{
  padding:20px;
}

.but button{
  padding:10px;
 font-size:1em;
}

.forget a{
font-size:1em;
}

.forget {
margin:50px 0;
}

.sign label{
font-size:1em;
}

.sign a{
  font-size:0.9em;
 color:white;
 margin:0px 3px;
}


.bottom{
  display:none;
}
}