Адаптивная форма авторизации для сайта

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="avtorizovasya">
  <div class="avto-vaslas">
  <h1>login</h1>
  </div>
  <div class="vasuged-kupalas">
  <h3>Имя пользователя:</h3>
  <input type="text" placeholder="Username"/><br>
  <h3>Пароль:</h3>
  <input type="password" placeholder="Password"/>
  <br>
  <input type="button" value="Вход" class="aloplus-mudesa"/>
  <br>
  <a class="naugs-palasug">Подписаться!</a>
  <br>
  <h6 class="vsamus-pugasd">Не можете получить доступ к своей учетной записи?</h6>
  </div>
</div>
<div class="gsalus-medas">
  <div class="gasces-nomlaged">Ошибка: попробуйте еще раз?</div>
</div>

body {
  background: linear-gradient(to top, #0d4079 20%, #60078c 50%, #bb1ad8 80%);
  margin: 0px;
  font-family: 'Ubuntu', sans-serif;
  background-size: 100% 110%;
}
h1, h2, h3, h4, h5, h6, a {
  margin:0; padding:0;
}
.avtorizovasya {
  margin:0 auto;
  max-width:500px;
}
.avto-vaslas {
  color:#fff;
  text-align:center;
  font-size:300%;
}

}
.vasuged-kupalas {
  border:.5px solid #fff;
  background:#4facff;
  border-radius:10px;
  box-shadow:0px 0px 10px #000;
}
.vasuged-kupalas h3 {
  text-align: left;
  margin-left: 40px;
  color: #fff;
  text-shadow: 0 1px 0 #4c4646;
}
.vasuged-kupalas {
  box-sizing:border-box;
  padding-top:15px;
  padding-bottom:10%;
  margin:5% auto;
  text-align:center;
}
.avtorizovasya input[type="text"],
.avtorizovasya input[type="password"] {
  max-width:400px;
  width: 80%;
  line-height:3em;
  font-family: 'Ubuntu', sans-serif;
  margin:1em 2em;
  border-radius:5px;
  border:2px solid #f2f2f2;
  outline:none;
  padding-left:10px;
}
.vasuged-kupalas input[type="button"] {
  height:30px;
  width:100px;
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:20px;
  color: slategrey;
  text-transform:uppercase;
  font-family: 'Ubuntu', sans-serif;
  cursor:pointer;
}
.naugs-palasug{
  color:#f2f2f2;
  margin-left:-70%;
  cursor:pointer;
  text-decoration:underline;
}
.vsamus-pugasd {
  color:#E86850;
  margin:20px 0px 20px -57%;
  text-decoration:underline;
  cursor:pointer;
}
.gasces-nomlaged {
  color:#f2f2f2;
  text-decoration:underline;
  cursor:pointer;
}

/*Media Querie*/
@media only screen and (min-width : 150px) and (max-width : 530px){
  .vasuged-kupalas h3 {
  text-align:center;
  margin:0;
  }
  .naugs-palasug, .vsamus-pugasd {
  margin:10px 0;
  }
  .aloplus-mudesa {
  margin-bottom:10px;
  }
}

$('.gsalus-medas').hide(0);

$('.aloplus-mudesa , .vsamus-pugasd').click(function(){
  $('.avtorizovasya').slideUp(500);
  $('.gsalus-medas').slideDown(1000);
});

$('.gasces-nomlaged').click(function(){
  $('.gsalus-medas').hide(0);
  $('.avtorizovasya').slideDown(1000);
});