body{
    user-select: none;;
}
form{
   position:absolute;
   height:300px;
   width:400px;
   border-radius: 5px;
   outline: 1px solid black;
   left:calc(50vw - 200px); 
   top:calc(50vh - 150px)
}
form>h1{
    margin: 0;
position: absolute;
top:0px;
height:30px;
left:10%;;
width:80%;
font-size: 25px;;
text-align: center;
color:darkblue;
}
#username, #pw, #pwc, #unactive-sign-up-btn, #active-sign-up-btn{


position:absolute;
width:80%;
height:25px;
left:10%;

outline:1px solid black;
border-radius: 3px;

;
}
#username{
    top:36px
}
#pw{
    top:77px
}
#pwc{
    top:118px;
}
#unactive-sign-up-btn{
    top:159px;
    text-align: center;
    background-color: rgb(52, 161, 234);
    color:white;
    cursor: not-allowed;
}
#active-sign-up-btn{
    top:159px;
    text-align: center;
    background-color: rgb(40, 40, 234);
    color:white;
    visibility: hidden;;
    outline:none;
    border:1px solid black;
}

#already{
    position:absolute;
    left:calc(50% - 82.5px);;
    height:25px;
    top:200px;
    font-size: 12px;;
   
}

#sign-in{
position:absolute;
right:calc(50% - 82.5px);
text-align: center;
top:200px;
color:white;
background-color:red;
border-radius: 3px;
height:25px;
width:60px;
}
#sign-up-with-google , #sign-up-with-facebook {
    position:absolute;
    top:241px;
    height:25px;
    width:145px;
    outline:1px solid black;
    font-size: 12px;
    color:white;
     box-sizing: border-box;
     padding: 6.5px 0 0 3px;;
     border-radius: 3px;;
     background-color: rgb(56, 53, 53);

}

#sign-up-with-google{
   left:10%;
   box-sizing: border-box;
   padding-top: 4px;
}
#sign-up-with-facebook{
right:10%;
box-sizing: border-box;
padding-top: 4px;
}

#pw>img:nth-child(1),#pwc>img:nth-child(1){
    position:absolute;
    height:15px;
    width:15px;
    left:5px;
    top:5px;
}
#pw>img:nth-child(2),#pwc>img:nth-child(2){
    position:absolute;
    height:15px;
    width:15px;
    right:5px;
    top:5px;
}
#username>img{
    position: absolute;
    height:15px;
    width:15px;
    left:2.5px;
    top:5px;
}
#active-sign-up-btn, #unactive-sign-up-btn, #sign-in{
    box-sizing:border-box;
    padding-top: 2.5px;;
}
#sign-up-with-google>img, #sign-up-with-facebook>img{
    position :absolute;
    height:20px;
   width:20px;
   top:2.5px;
   right:2.5px
}
#username>input, #pw>input, #pwc>input{
  position: absolute;
  top:0;
  left:28px;
  height:25px;
  width:80%;
  border: none;
  outline: none;;
  padding: 0;
  margin: 0;
  

} 
#pwc>span,#username>span, #pw>span{
    position:absolute;
    bottom: -16px;;
    font-size: 12px;;
    text-align: center;;
    width: 100%;;
    
    
}




 
        @media screen and (max-width:350px){
            form{
                top:60px;
                width:400px;;
                left:10vw;;
                height:340px;
         }
         #sign-up-with-google{
            top:241px;
            left:10%;
            width :80%;
            text-align: center;
        
        }
        #sign-up-with-facebook{
            top:281px;
            right:10%;
            width: 80%;;
            text-align: center;
            }
       
            }