/* @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"; */
* {
    margin: 0%;
    padding: 0%;
}
/* 
#canvas1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(#25364f, #4d71a5, #9bc4ff)
} */

.wrapper{
  /* margin-top: 2px; */
  position: absolute;
  transform: translate(-50%,-50%);
  width: 350px;
  height: 250px;
  background: black;
  opacity: 0.69;
  top: 50%;
  left: 52%;
  /* right: 54%; */
  border-radius: 29px;
}
body {
    margin: 0;
    padding: 0px;
    font-family: sans-serif;
    background: url(img/login-back.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    /* background-position-x: -10px; */
    
}

/* Login box containing user and pass input box along with buttons*/
.lgin-box{
    width: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* color: rgba(7, 11, 68, 0.842); */
    color: teal;
    text-shadow: black 3px 7px 6px;
    
}

.lgin-box h1 {
    border-radius: 15px;
    background-color: whitesmoke;
    opacity: 0.85;
    float: left;
    font-size: 40px;
    /* border-bottom: 6px solid black; */
    margin-bottom: -15px;
    padding: 10px 53.5px;
    /* box-shadow: rgba(136, 155, 155, 0.747) 0px 0px 10px 10px; */
}


.txtbox {
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    /* margin: 10px 0; */
    border-bottom: 1px solid;
    /* transform: translate(0%, 20%); */
}
/* text above the user input */
.txtbox p {
    transform: translate(7.4%, 40%);
    margin-bottom: 20px;
    color: white;
    /* opacity: 1000%; */
}
/* buttons */
.login-btn {
    border-radius: 10px;
    transform: translate(15%, 0%);
    padding: 6px 20px;
    margin-top: 10px;
    margin-left: 34px;
}

input {
    color: teal;
    margin-top: 5px;
    transform: translate(23.5%, 0%);
}

i {
    color: whitesmoke;
    margin-left: 42px;
    margin-right: -35px;
}