body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url("image/sky-gd7f5d4755_1920.jpg");
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  font-family: sans-serif;

}


.box{
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.4);
    text-align: center;
    border-radius: 0px;
}
.box h1{
margin: 30px 100px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}
.box input[type="text"],.box input[type="password"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
}

.box input[type="submit"]{
    margin: 10px auto;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    background: #0fc3f5;
    transition: .3s;
    width: 259px;
    height: 60px;
    border-radius: 24px;


}
.box p{
  color: #fff;
}

.box input[type="submit"]:hover{
    background: red;
}
.box1 select{

position: relative;
margin: 1rem;
  padding: .70rem 1rem;
  background: none
  border:1px solid #ccc;
  border-radius: 3px;


  font-family: inherit;

  color: #000;

}
.box1 select:focus{

outline: 0;
border-color: #0891e6;

}
.box1{
  justify-content: flex-start;
  width: 300px;
  padding: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.4);
  text-align:  center;
}
.box2{

  text-align:  center;
}
.box1 h1{
  top: 50%;
    margin: 30px 10px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}
.box1 input[type="submit"]{

    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    background: #0fc3f5;
    transition: .3s;
    width: 225px;
    height: 40px;
    border-radius: 24px;


}
.box1 input[type="submit"]:hover:active{
    background: red;

}


.stil {
  justify-content: flex-start;
}
.li{
  color: #fff;
}
.box h1{
margin: 30px 100px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}

.box1 select{

position: relative;
margin: 1rem;
  padding: .70rem 1rem;
  background: none
  border:1px solid #ccc;
  border-radius: 3px;


  font-family: inherit;

  color: #000;

}
.box1 select:focus{

outline: 0;
border-color: #0891e6;

}

.asd{
  color: white;
}



.box2 input[type="submit"]:hover:active{
    background: red;

}