*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.45)
    ),
    url('assets/img/bg-login.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.login{
    width:100%;
    max-width:430px;
    padding:35px;

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.35);

    animation:slideUp .5s ease;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.logo{
    text-align:center;
    margin-bottom:30px;
}

.logo h1{
    color:#fff;
    font-size:38px;
    font-weight:800;
    margin-bottom:8px;
}

.logo p{
    color:rgba(255,255,255,.8);
    font-size:14px;
}

form{
    background:none;
    padding:0;
    margin:0;
    max-width:100%;
    box-shadow:none;
}

label{
    color:#fff;
    font-size:14px;
    margin-bottom:8px;
    display:block;
}

input,
select,
textarea{
    width:100%;
    border:none;
    outline:none;

    padding:15px 18px;
    margin-bottom:16px;

    border-radius:14px;

    font-size:15px;

    color:#fff;

    background:rgba(255,255,255,.12);

    transition:.3s;
}

input::placeholder,
textarea::placeholder{
    color:rgba(255,255,255,.6);
}

input:focus,
select:focus,
textarea:focus{
    background:rgba(255,255,255,.18);

    box-shadow:
    0 0 0 4px rgba(255,136,0,.25);
}

.button{
    width:100%;
    border:none;

    padding:15px;

    border-radius:14px;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #ff7a18,
        #ffb347
    );

    transition:.3s;
}

.button:hover{
    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(255,122,24,.45);
}

.button:active{
    transform:scale(.98);
}

a{
    color:#fff;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

@media(max-width:480px){

    .login{
        width:92%;
        padding:25px;
    }

    .logo h1{
        font-size:32px;
    }
}