@media only screen and (min-width: 361px) and (max-width: 720px)
   
   {

body
{
   background-image:url(../images/register.jpg);
   width: 100%;
   margin:0 auto;
}

.header
{
  width:90%;
  margin:auto;

}
.main
{
width:90%;
margin: 0 auto;
}

h1 
{
   color:#000;
   text-align:center;
   font-size:30px;
   margin-top:60px;   
}

.background
{
    width:100%;
    background-color:rgba(16, 29, 39, 0.59);
    margin: auto;
    border-radius:10px;
}

.background div
{

  margin: 20px;
}
form
{
  color:white;
  font-size:20px;
  width:50%;
  margin:60px auto;
  padding: 30px;
}

form input[type=text]
{
  padding:5px;
  float: right;
  width: 20%;
  background-color:white;
}
form input[type=submit]
{
  font-size:16px;
  color:white;
  margin: auto;
  text-align:center;
  padding:10px;
  width:12%;
  background:black;
}

.btn{
 width: 20%;
 margin: auto;
}

input[type=button]:hover
{
   box-shadow:2px 2px 10px black;

}

.background form label
{
 font-family: century gothic;
 font-size: 16px;
}

.top_heading
{
  width: 50%;
  margin: 0 auto;
}

.top_heading h2
{
  margin: auto;
  text-align: center;
}

.text
{
  padding-left: 10px;
  float: left;
}

input[type=password]
{
  padding:5px;
  float: right;
  width: 20%;
  background-color:white;
}


 }
    
 @media only screen and (min-width: 0px) and (max-width: 360px)
   
   {

body
{
   background-image:url(../images/register.jpg);
   width: 100%;
   margin:0 auto;
}

.header
{
  width:100%;
  margin:auto;

}
.main
{
width:90%;
margin: 0 auto;
}


.background
{
    width:100%;
    background-color:rgba(16, 29, 39, 0.59);
    margin: auto;
    border-radius:10px;
}

.background div
{
  margin: 20px;
}

form
{
  color:white;
  font-size:8px;
  width:100%;
  margin:60px auto;
  padding: 2px;
}

form input[type=text]
{
  padding:2px;
  float: right;
  width: 40%;
  font-size: 10px;
  background-color:white;
}
form input[type=submit]
{
  font-size:14px;
  color:white;
  margin: auto;
  text-align:center;
  padding:10px;
  width:40%;
  background:black;
}

.btn{
 width: 100%;
 margin: auto;
}

input[type=button]:hover
{
   box-shadow:2px 2px 10px black;

}

.background form label
{
 font-family: century gothic;
 font-size: 11px;
}

.text
{
  padding-left: 5px;
  float: left;
}

input[type=password]
{
  float: right;
  width: 50%;
  padding: 2px;
  font-size: 10px;
  background-color:white;
}

.butn
{
    background-color: #7ebdf5;
    padding: 10px;
    height: 20px;
    line-height: 1px;
    margin-top: 7px;
    font-size: 16px;
    width: 30%;
    
}

.butn:hover
{
  background-color: black;
  color: white;
}

 }