* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}


body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        #05070d;

    color: white;

    overflow: hidden;

}



/* =========================
   BACKGROUND
========================= */


.background {

    position: fixed;

    inset: 0;

    z-index: -1;

    overflow: hidden;

}



.background::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    top: -250px;

    left: -200px;

    background:
        radial-gradient(
            circle,
            rgba(0,170,255,.45),
            transparent 70%
        );

    filter: blur(40px);

}



.background::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    bottom: -300px;

    right: -200px;

    background:
        radial-gradient(
            circle,
            rgba(0,90,255,.35),
            transparent 70%
        );

    filter: blur(50px);

}



.blur {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

}



.blur1 {

    width: 300px;

    height: 300px;

    background: #00aaff;

}



.blur2 {

    width: 350px;

    height: 350px;

    background: #0044ff;

}



/* =========================
   LOGIN WINDOW
========================= */


.loginWindow {

    width: 430px;

    padding: 42px;

    border-radius: 28px;


    background:

        rgba(255,255,255,0.07);


    border:

        1px solid rgba(255,255,255,.12);


    backdrop-filter:

        blur(25px);


    box-shadow:

        0 30px 80px rgba(0,0,0,.55);


    animation:

        appear .5s ease;

}



@keyframes appear {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:none;

    }

}



/* =========================
   LOGO
========================= */


.logo {

    text-align:center;

    margin-bottom:35px;

}



.logo h1 {

    font-size:42px;

    font-weight:800;

    letter-spacing:-2px;

}



.logo span {

    display:block;

    margin-top:10px;

    color:

    rgba(255,255,255,.65);

    font-size:14px;

}



/* =========================
   FORM
========================= */


.inputBox {

    margin-bottom:22px;

}



.inputBox label {

    display:block;

    margin-bottom:8px;

    color:

    rgba(255,255,255,.75);

    font-size:14px;

}



.inputBox input {


    width:100%;


    height:54px;


    padding:0 18px;


    border-radius:15px;


    outline:none;


    border:

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


    background:

        rgba(0,0,0,.25);


    color:white;


    font-size:15px;


    transition:.25s;

}



.inputBox input::placeholder {

    color:

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

}



.inputBox input:focus {


    border-color:#00bfff;


    box-shadow:

        0 0 20px rgba(0,190,255,.25);

}



/* =========================
   BUTTON
========================= */


form button {


    width:100%;


    height:56px;


    border:none;


    border-radius:16px;


    cursor:pointer;


    color:white;


    font-size:16px;


    font-weight:700;


    background:

        linear-gradient(
            135deg,
            #00bfff,
            #0055ff
        );


    transition:.25s;

}



form button:hover {


    transform:

        translateY(-3px);


    box-shadow:

        0 15px 35px rgba(0,130,255,.35);

}



form button:active {


    transform:scale(.97);

}



/* =========================
   INFO
========================= */


.info {

    margin-top:30px;

    text-align:center;

    color:

    rgba(255,255,255,.6);

    font-size:14px;

    line-height:1.6;

}



.info b {

    color:#00c8ff;

    font-weight:600;

}