style.css

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #6a6f8c;
  background: #c8c8c8;
  font: 600 16px/18px 'Open Sans', sans-serif;
}

h1 {
  color: white;
  font-size: 2.5rem !important;
  font-weight: 300;
  margin-top: 20px;
}

.error {
  text-align: center;
  color: rosybrown;
}

.noerror {
  text-align: center;
  color: rgb(145, 199, 160) !important;
}

.noerror h1{
line-height: 50px;
}

a {
  color: inherit;
  text-decoration: none
}

.login-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  min-width: 500px;
  min-height: 600px;
  position: relative;
  background-image: url(https://source.unsplash.com/random/?city/525x670);
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .2), 0 17px 50px 0 rgba(0, 0, 0, .3);
}

.backdrop {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  min-width: 500px;
  min-height: 600px;
  position: relative;
  background-color: rgba(40, 57, 101, .9);
  border: solid 3px rgba(46, 84, 181, 0.744);
}

.login-html {
  box-sizing: border-box;
  padding: 0px 400px;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
}

.login-html .tab,
.login-form .group .label,
.login-form .group .button {
  text-transform: uppercase;
}

.login-form .group {
  margin-bottom: 15px;
}

.login-form .group .label,
.login-form .group .input,
.login-form .group .button,
.noerror button{
  width: 300px;
  color: #fff;
  display: block;
}

.login-form .group .input,
.login-form .group .button,
.noerror button {
  box-sizing: border-box;
  border: none;
  padding: 15px 20px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(5px);
}

.login-form .group input[data-type="password"] {
  -webkit-text-security: circle;
  letter-spacing: 5px;
  font-weight: 900;
}

.login-form .group .label {
  color: #aaa;
  font-size: 12px;
  padding-bottom: 6px;
}

.login-form .group .button,
.noerror button {
  background: #3b6cff78;
  backdrop-filter: blur(5px) saturate(150%);
  transition: ease-out 0.1s;
}

.login-form .group .button:hover,
.noerror button:hover {
  background: #1d3fa878;
  transition: ease 0.5s;
}

.login-form .group .button:active,
.noerror button:active {
  box-sizing: border-box;
  background: #3b6cff78;
  transition: ease 0.5s;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.09);
}

.show {
  display: initial;
}

.hide {
  display: none;
}