body{
    background-color: purple;;
    user-select: none;
}
.login-wrapper{
    position:absolute;
    width:300px;  
    height:200px;
    left:calc((100vw - 300px)/2);
    top:calc(50vh - 100px);
    border-radius: 10px;
    background-color: white;
    ;
    transition:0.2s;

}
.expand-wrapper{
    height:240px;

}
#loginBtn{
    position:absolute;
    left:20px;
    top:160px;
    width:260px;
    height:25px;
    text-align: center;
    background-color: rgb(16, 16, 211);
    color:white;
    border-radius: 3px;
    border:none;
    visibility: hidden;;
    
}
#loginBtn:hover{
    background-color:rgb(13, 13, 174); ;
}
 #username>input, #password>input{
    position:absolute;
    height:30px;
    width:80%;
    border:none;
    outline:none;
    border-radius: 3px;;
    
    box-sizing: border-box;
    
    left:10%;
    background-color: white;
    border:1px solid black;

}
.username-cover, .pw-cover{
    position:absolute;

    height:20px;
    left:12%;
  
    
}

#username>img, #password>img{
    position: absolute;

    left:10%;
    width:30px;

    height:30px;;
}
#pw-show-icon{
position:absolute;
height:20px;
right:35px;
top:115px;
z-index: 200;
visibility: hidden;
}

#username>input,.username-cover,#username>img{
  top:60px;
  transition: 0.3s;;
  background-color: white;

}
#username>input, #password>input{
    padding-left: 40px;;
}
.username-cover{
    top:61px;
}
#password>input{
    
    top:110px;
    transition: 0.3s;;
    background-color: white;

}
.pw-cover{
top:108px;
background-color: white;
transition: 0.3s;;
}
.username-cover, .pw-cover{
    left:calc(10% + 40px)
}
.pw-cover{
    height:27px;
    top:111px;
}


.login-wrapper>h1{
    width:100%; 
    top:0;
    margin:0;
    height:20px;
    text-align: center;
    color :darkblue
}

.login-wrapper>a{
position: absolute;
height:20px;
width:70px;
border-radius: 3px;;
background-color: red;;
color:white;
right:70px;
text-decoration: none;
text-align: center;
font-size: 12px;;
bottom:10px;
box-sizing: border-box;
padding-top: 3px;;
}
.login-wrapper>span{
    position:absolute;
    left:40px;
    bottom:15px;
    font-size: 12px;

}
#user-icon, #pw-icon{
    position:absolute;
    left:11%;
    top:64px;
    height:18px;
    width:18px;
    z-index: 100;
    
}
.pw-cover{
    height:20px;
}
#pw-icon{
    top:115px;
}
.move-user-cover{
    top:50px;
}
.move-pw-cover{
    top:98px;
}

@media screen and (max-device-width:400px){
    .login-wrapper{
        top:20px;
    }
}