* {
    box-sizing:border-box;
}


body {

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:Arial, sans-serif;

    background:#030408;

    color:white;

    overflow:hidden;

}



.background {

    position:fixed;

    width:600px;

    height:600px;

    background:

    radial-gradient(
        circle,
        #2563eb55,
        transparent 60%
    );

    filter:blur(80px);

    animation:
    move 8s infinite alternate;

}



@keyframes move {

    from {

        transform:
        translate(-200px,-100px);

    }


    to {

        transform:
        translate(200px,150px);

    }

}



.container {

    position:relative;

    width:95%;

    max-width:600px;


    padding:40px;


    border-radius:30px;


    background:

    rgba(17,24,39,.75);


    backdrop-filter:
    blur(25px);


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


    box-shadow:

    0 0 50px rgba(0,0,0,.6);


    animation:
    appear .7s ease;

}



@keyframes appear {

    from {

        opacity:0;

        transform:
        translateY(40px);

    }


    to {

        opacity:1;

        transform:none;

    }

}



h1 {

    font-size:38px;

    margin-bottom:5px;

}



h2 {

    margin-top:25px;

}



.subtitle {

    color:#9ca3af;

    margin-bottom:30px;

}



input[type=file] {

    width:100%;

    padding:15px;

    background:#18181b;

    border-radius:15px;

    color:white;

}



button {

    width:100%;

    margin-top:20px;

    padding:15px;


    border:none;


    border-radius:15px;


    cursor:pointer;


    font-weight:900;


    font-size:16px;


    background:#60a5fa;


    color:#001;


    transition:.25s;

}



button:hover {

    transform:
    translateY(-4px);


    box-shadow:

    0 10px 30px #60a5fa55;

}



#uploadBtn {

    background:#34d399;

}



#uploadBtn:hover {

    box-shadow:

    0 10px 30px #34d39955;

}



#status {

    margin-top:20px;

    color:#9ca3af;

    min-height:20px;

}



.hidden {

    display:none;

}



.success {

    color:#34d399;

}



.error {

    color:#fb7185;

}



/* loading animation */


.loading {

    position:relative;

}


.loading::after {

    content:"";

    display:inline-block;

    width:14px;

    height:14px;

    margin-left:10px;

    border-radius:50%;

    border:3px solid white;

    border-top-color:transparent;

    animation:
    spin .8s linear infinite;

}



@keyframes spin {

    to {

        transform:
        rotate(360deg);

    }

}