html, body {
  width: 100%;
  height: 100%;
}

fieldset{
  margin-top: 10px;
}
legend{
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  letter-spacing: 10px;
  margin-top: 1px;
  text-align:center;
  padding: 20px 0 10px 0;
  font-size:30px;
}


.bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(image/1.jpg);
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}

.inner-container{
  width:400px;
  height:400px;
  position:absolute;
  top:calc(50vh - 200px);
  left:calc(50vw - 200px);
  overflow:hidden;
}

.box{
  position:absolute;
  height:100%;
  width:100%;
  font-family: 'Montserrat', sans-serif;
  color:#fff;
  background:rgba(0,0,0,0.13);
  padding:30px 0px;
}

.box input{
  display:block;
  width:300px;
  margin:20px auto;
  padding:15px;
  background:rgba(0,0,0,0.2);
  color:#A6A6A6;
  border:0;
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
  outline:none;
}

.box .resetbutton {
    width: 58px;
    margin-left: 28em;

}


.box .button{
  background:rgba(162,185,212,0.2);
  border:0;
  color:#fff;
  padding:10px;
  font-size:18px;
  width:330px;
  margin:20px auto;
  display:block;
  cursor:pointer;
  font-family: 'Montserrat', sans-serif;

}
.box button:active{
  background:#27ae60;
}
.box p{
  font-size:10px;
  text-align:center;
}
.box p span{
  cursor:pointer;
  color:#A6A6A6;
}