*,
html {
  margin:0;
  padding:0;
}
body{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  height:80vh;
  background-color: #F5F5F5;
    font-family: Arial, Helvetica, sans-serif;
  font-style:arial;
}
.h1-welcome {
    color:#6B7280;
    font-size:6vh;
    position:relative;
    z-index: 1;
    right:6vh;
    height:8vh;
  
}

.h1-welcome::after {
  content:"back";
  color:#2563EB;
  position: absolute;
  z-index: -1;
  transform: translatex(5%);
}
img {
  width:10vh;
  height:10vh;
  border-radius:50%;
}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:30%;
  height:100%;
  border-radius:2vh;
  font-family: Arial, Helvetica, sans-serif;
  font-style:arial;
  box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.37);
  background-color: white;
  top:20vh;
}
.main h1 {
  font-size:6vh;
  color:#6B7280;
  margin-bottom:1vh;
}
.box-user {
  position: relative;
  margin-bottom:1vh;
}
.box-user i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: gray;
}
.box-pass {
  position: relative;
  margin-bottom:1vh;
}
.box-pass i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: gray;
}
#user {
  width:30vh;
  height:3vh;
  font-size:2.5vh;
    color:#555;
    padding: 7px 7px 7px 35px; 
}
#pass {
  width:30vh;
  height:3vh;
  font-size:2.5vh;
  color:#555;
  padding: 7px 7px 7px 35px; 
}
.btn {
  width:30vh;
  height:6vh;
  font-size:3vh;
  background-color: #2563EB;
  border:none;
  outline: none;
  border-radius:1vh;
  color:white;
}
.btn:hover {
  background-color: hsl(239.5,90.5%,62%);
}
@media(max-width:1000px){
  .main {
    width:80%;
    height:60%;
  }
}