input#user {
    font-family:emoji;
}
input#pass {
    font-family:emoji;
}
.loginBody{
    -webkit-padding-top:100px;
    -webkit-background-color:#DCDCDC;
    
    padding-top:40px;
    background-color:#DCDCDC;
    display:flex;
    

}
#frm{
    -webkit-border:solid gray 1px;
    -webkit-width:20%;
    -webkit-border-radius:5px;
    -webkit-margin:100px auto;
    -webkit-background:white;
    -webkit-padding:50px;
    
    border:solid gray 1px;
    width:20%;
    border-radius:5px;
    margin:100px auto;
    background:white;
    padding:50px;
}

#btn{
    -webkit-margin-top:3%;
    -webkit-color:#fff;
    -webkit-background:#000000;
    -webkit-padding:5px;
    -webkit-border-radius: 25px;
    -webkit-border:none;
    -webkit-width:20%;
    -webkit-height:45px;
    
    margin-top:3%;
    color:#fff;
    background:#000000;
    padding:5px;
    border-radius: 25px;
    border:none;
    width:20%;
    height:45px;
}

#btn:hover{
    background-color:#fba214;
}
.loginTitle{
    -webkit-margin:20px 0px;
    -webkit-font-size:60px;
    -webkit-font-family:bahnschrift;
    -webkit-color: #000000;
    
    margin:20px 0px;
    font-size:60px;
    font-family:bahnschrift;
    color: #000000;
}

.loginForm{
    -webkit-margin-left:0px;
    
    margin-left:0px;
}

.loginInput{
    -webkit-width: 70%;
    -webkit-padding-left: 20px;
    -webkit-padding-top:5px;
    -webkit-padding-bottom:5px;
    -webkit-margin-top:2%;
    -webkit-margin-bottom:1%;
    -webkit-border:none;
    
    width: 70%;
    padding-left: 20px;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:2%;
    margin-bottom:1%;
    border:none;

}

.loginInput::placeholder {
    -webkit-color:#999999;
    
    color:#999999;
}


#col-1 {
 
  -webkit-margin:50px 0px 0px 16%;
 
  
margin:50px 0px 0px 16%;
}

#col-2 {
  -webkit-padding:10px;
  -webkit-width: 525px;
  -webkit-margin-left:22%;
  padding:10px;
  width: 525px;
  margin-left:22%;

}

@media(max-width:1024px){
        .loginInput{
        -webkit-width: 40%;
        -webkit-padding-left: 20px;
        -webkit-padding-top:5px;
        -webkit-padding-bottom:5px;
        -webkit-margin-top:2%;
        -webkit-margin-bottom:1%;
        -webkit-border:none;
        
        width: 40%;
        padding-left: 20px;
        padding-top:5px;
        padding-bottom:5px;
        margin-top:2%;
        margin-bottom:1%;
        border:none;
    
    }
    #col-1 {
     
      -webkit-margin:50px 0px 0px 16%;
     
      
    margin:50px 0px 0px 16%;
    }
    
    #col-2 {
      
      -webkit-padding:10px;
      -webkit-width: 525px;
      -webkit-margin-left:15%;
      padding:10px;
      width: 525px;
      margin-left:15%;
    
    }
}

@media(max-width:872px){
        .loginInput{
        -webkit-width: 40%;
        -webkit-padding-left: 20px;
        -webkit-padding-top:5px;
        -webkit-padding-bottom:5px;
        -webkit-margin-top:2%;
        -webkit-margin-bottom:1%;
        -webkit-border:none;
        
        width: 40%;
        padding-left: 20px;
        padding-top:5px;
        padding-bottom:5px;
        margin-top:2%;
        margin-bottom:1%;
        border:none;
    
    }
    #col-1 {
     
      -webkit-margin:50px 0px 0px 11%;
      margin:50px 0px 0px 11%;
    }
    
    
}

@media(max-width:729px){
        .loginInput{
        -webkit-width: 70%;
        -webkit-padding-left: 20px;
        -webkit-padding-top:5px;
        -webkit-padding-bottom:5px;
        -webkit-margin-top:2%;
        -webkit-margin-bottom:1%;
        -webkit-border:none;
        
        width: 70%;
        padding-left: 20px;
        padding-top:5px;
        padding-bottom:5px;
        margin-top:2%;
        margin-bottom:1%;
        border:none;
    
    }
    #col-1 {
     
      -webkit-margin:50px 0px 0px 7%;
      margin:50px 0px 0px 7%;
    }
    
    #col-2 {
      -webkit-padding:10px;
      -webkit-width: 525px;
      -webkit-margin-left:13%;
      padding:10px;
      width: 525px;
      margin-left:13%;
    
    }
}

@media(max-width:616px){
    .loginBody{
  
        -webkit-padding-top:40px;
        -webkit-background-color:#DCDCDC;
        -webkit-display: flex;
        -webkit-align-items: center;
        -webkit-flex-direction: column;
    padding-top:40px;
    background-color:#DCDCDC;
    display: flex;
    align-items: center;
    flex-direction: column;
    

}
    .loginTitle{
            -webkit-font-size:36px;
        font-size:36px;
    }
     .loginInput{
        -webkit-width: 70%;
        -webkit-padding-left: 20px;
        -webkit-padding-top:5px;
        -webkit-padding-bottom:5px;
        -webkit-margin-top:2%;
        -webkit-margin-bottom:1%;
        -webkit-border:none;
        
        width: 70%;
        padding-left: 20px;
        padding-top:5px;
        padding-bottom:5px;
        margin-top:2%;
        margin-bottom:1%;
        border:none;
    
    }
    #col-1 {
     
      -webkit-margin:0px;
     
      
    margin:0px;
    }
    
    #col-2{
        -webkit-padding:0;
        -webkit-margin-left:0;
        padding:0;
        margin-left:0;
    }
  div.centered1{
       -webkit-display: flex;
      -webkit-flex-direction:column;
      -webkit-margin-left:28%;
      
      display: flex;
      flex-direction:column;
      margin-left:28%;
      

  }
}