@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');

*{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family :font-family: 'Poppins', sans-serif;
}
body{
    display : flex;
    justify-content : center;
    align-items : center;
    min-height : 100vh;
    background-color : #000;
}

section {
display : flex;
justify-content : center;
align-items : center;
width : 100%;
height : 100vh;
background: url('/assets/images/kontruksi3.jpg') no-repeat;
background-size : cover;
background-position : center;
animation: animateBg 5s linear infinite;
}

@keyframes animateBg {
100% {
filter: hue-rotate(90deg);
}
}
.login-box {
position : relative;
width : 400px;
height : 450px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius : 20px;
display: flex;
justify-content : center;
align-items : center;
backdrop-filter:blur(15px);
}
h2 {
    font-size : 2em;
    color : #fff;
    text-align : center;

}
.input-box{
    position : relative;
   width : 310px;
   margin: 30px 0;
   border-bottom: 2px solid #fff;
}
.input-box label {
position : absolute;
top : 50%;
left : 5px;
transform : translateY(-50%);
font-size : 1rem;
color : #fff;
pointer-events : none;
transition : .5s;
}

.input-box input:focus~label, 
.input-box input:valid~label {
top : -5px;
}

.input-box input {
    width :100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size : 1em;
    color : #fff;
    padding: 0 35px 0 5px;
}
.input-box .icon {
    position: absolute;
    right: 8px;
    color: #fff;
    font-size : 1.2em;
    line-height : 57px;
}
button {
    width: 100%;
    height: 40px;
    background : #fff;
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    color: #000;
    font-weight: 500;
}
@media (max-width: 360px) {
    .login-box{
        width: 100%;
        height: 100vh;
        border: none;
        border-radius: none;
    }
    .input-box{
        width: 290px;
    }
}