@font-face
{
    font-family : 'Delight-Med';
    src : url('/fonts/Geist-Medium.ttf');
}

@font-face
{
    font-family : 'Delight-Sembd';
    src : url('/fonts/Geist-Semibold.ttf');
}

@font-face
{
    font-family : 'Delight-Bold';
    src : url('/fonts/Geist-Bold.ttf');
}

@font-face
{
    font-family : 'Delight-Reg';
    src : url('/fonts/Geist-Regular.ttf');
}

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

    body{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.75) 15%,
            rgba(255,255,255,0.3) 35%,
            rgba(255,255,255,0) 60%
        ),
        url('/images/background.jpg');

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

    /* CARD */

.card{
    width:min(90vw, 56rem);

    display:flex;

    border-radius:2rem;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
        0 1.5rem 3rem rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.25);

    overflow:hidden;
}

/* IMAGE */

.card-image{
    width:22rem;
    min-width:18rem;

    flex-shrink:0;

    border-radius:1.5rem;

    overflow:hidden;

    margin:1.125rem 0 1.125rem 1.125rem;
}

.card-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* FORM */
.card-form{
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:3rem;

    position:relative;
}

/* LOGO */

.logo{
    margin-bottom:1.5rem;
}

.logo img{
    width:7.5rem;
}

/* TITLE */

.card-form h1{
    font-family:'Delight-Bold';

    font-size:2.6rem;

    line-height:1.1;

    color:#0047b3;

    margin-bottom:.5rem;
}

.subtitle{
    font-family:'Delight-Med';

    font-size:1rem;

    color:#0047b3;

    opacity:.9;

    margin-bottom:2rem;
}

/* INPUT GROUP */

.input-group{
    display:flex;
    flex-direction:column;
    font-family:'Delight-Med';
    gap:1rem;

    margin-bottom:1rem;
}

/* INPUT */

.input-field{
    width:100%;
    font-family:'Delight-Med';
    height:3.5rem;

    padding:0 1.4rem;

    border-radius:1.5rem;

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

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

    backdrop-filter:blur(10px);

    color:#333;
}

.input-field::placeholder{
    color:#aaa;
}

.input-field:focus{
    box-shadow:0 0 0 .15rem rgba(255,255,255,.4);
}

/* PASSWORD */

.password-wrapper{
    position:relative;
}

.password-wrapper .input-field{
    padding-right:3.5rem;
}

.toggle-password{
    position:absolute;

    right:1rem;
    top:50%;

    transform:translateY(-50%);

    width:1.25rem;
    height:1.25rem;

    cursor:pointer;
}

/* OPTIONS */

.login-option{
    display:flex;

    justify-content:space-between;
    align-items:center;
    color:white;
    margin-top:1rem;
    margin-bottom:2rem;
}

.remember-me{
    display:flex;
    align-items:center;

    gap:.5rem;

    font-family:'Delight-Med';

    font-size:.95rem;
}

.forgot-password{
    text-decoration:none;

    color:white;

    font-size:.95rem;

    font-family:'Delight-Med';
}

/* BUTTON */

.btn-submit{
    width:100%;

    height:3.75rem;

    border:none;

    border-radius:1.5rem;

    background:#F0B840;

    color:white;

    font-size:1.1rem;

    font-family:'Delight-Sembd';

    box-shadow:
        0 .8rem 1.5rem rgba(0,71,179,.25);

    transition:.25s;
}

.btn-submit:hover{
    background:#0d56d1;

    transform:translateY(-3px);
}

.input-field{
    transition:
    transform .2s,
    box-shadow .2s;
}

.input-field:focus{
    transform:translateY(-2px);

    box-shadow:
    0 .4rem 1rem rgba(0,0,0,.08),
    0 0 0 .15rem rgba(255,255,255,.4);
}

.btn-submit{
    box-shadow:
    0 .35rem 1rem rgba(0,71,179,.12);
}

.btn-submit:hover{
    background:#eef3ff;

    transform:translateY(-2px);
}

.btn-submit:active{
    transform:translateY(1px);
}

.topbar{
    position:fixed;

    top:1.5rem;
    left:2rem;
    right:2rem;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:100;
}

.topbar-left{
    font-family:'Delight-Bold';

    font-size:1.25rem;

    color:#0047b3;
}

.topbar-right{
    font-family:'Delight-Med';

    font-size:.9rem;

    color:#666;
}