* {
        padding: 0;
        margin: 0;
    }

    body {
        /*background: linear-gradient(127deg, #45bec6, #e5e5e5);*/
        /*height: 100vh;*/
    }

    

    .login-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: black;
        padding: 6vh 6vw;
        opacity: .8;
        outline: none;
        border: none;
        border-radius: 10px;
        box-shadow: 5px 5px 10px #666666;
        background-color:#eee;
        font-size: 0px;
    }
    .login-div .close{
        position: absolute;
        top: 5%;
        left: 90%;
        transform: translate(-50%, -50%);
        display: flex;
       
    }

    .login-div .form-title {
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: 3vh;
        padding-left:4rem;
        letter-spacing: 4rem;
       
    }

    .input-div {
        position: relative;
        padding: 5px;
        margin-bottom: 2vh;
        
    }

    .input-div,
    .btn-div {
        text-align: center;
        vertical-align: middle;
        
    }

    
    .input-div label {
        position: absolute;
        left: 1rem;
        top: .5rem;
        font-size: 1rem;
        transition: 0.2s;
        
    }

    .input-div input:focus ~ label,
    .input-div input:valid ~ label {
        left: 0;
        top: -0.9rem;
        font-size: 0.9rem;
    }

    .btn-div button {
        outline: none;
        border: none;
        margin-top: 3vh;
        width: 90%;
        box-sizing: border-box;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 3px 3px 5px #999999;
        background-color: #4bbec6;
        color: black;
        font-size: 16px;
    }
    .input-div input {
        padding: 0 1rem;
        outline: none;
        caret-color: #000000;
        color:#000000;
        border: none;
        background-color: transparent;
        border-bottom: 1px solid #4bbec6;
        font-size: 1.6rem;
    }
    
    @media (max-width: 768px){
        .input-div input {
            width: 55vw;
            height: 5vh;
        }

    }
    
    @media (min-width: 768px){
    
        .input-div input {
            width: 40vw;
            height: 5vh;
        }
    }
   
    @media (min-width: 1200px){
        .input-div input {
            width: 15vw;
            height: 5vh;
        }
    }





    
.loginstarface {
    position: absolute;
    bottom: 10%;
    left: 50%;     
  
    margin-left: -200px;
    width: 400px;
    min-height: 100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;   
    
    
}
@media screen and (max-width: 767px) {
    #loginstarface {
        width: 250px;        
        
        margin-left: -40%;
        margin-top: 0;
    }
    #ncenter{
        margin-top: 10px;
    }
   
}

 @media (min-width: 768px){
    
      #loginstarface {
            width: 300px;           
            
        }
        #ncenter{
            margin-top: 5px;
        }
        
    }
   
    @media (min-width: 1200px){
        #loginstarface {
        width: 400px;
        
            
        }
        #ncenter{
            margin-top: 5px;
        }
    }






    .nloginstarface {
    position: absolute;
    bottom: 10%;
    left: 50%;     
  
    margin-left: -200px;
    width: 400px;
    min-height: 100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;   
    
    
}
@media screen and (max-width: 767px) {
    #nloginstarface {
        width: 250px;        
        
        margin-left: -40%;
        margin-top: 0;
    }
   
   
}

 @media (min-width: 768px){
    
      #nloginstarface {
            width: 300px;           
            
        }
       
        
    }
   
    @media (min-width: 1200px){
        #nloginstarface {
        width: 400px;
        
            
        }        
    }