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

body{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#4b0082,#7b2cbf,#c77dff);

    background-attachment:fixed;

    overflow:hidden;

}

.container{

    width:420px;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(18px);

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

    box-shadow:0 0 40px rgba(199,125,255,.35);

    padding:40px;

    border-radius:25px;

    text-align:center;

    color:white;

    animation:fadeIn .8s ease;

}

h3{

    letter-spacing:5px;

    font-size:15px;

    opacity:.8;

}

h1{

    margin-top:15px;

    font-size:34px;

}

.status{

    margin-top:30px;

    opacity:.8;

}

.progress{

    margin-top:25px;

    width:100%;

    height:18px;

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

    border-radius:20px;

    overflow:hidden;

    box-shadow:inset 0 0 10px rgba(255,255,255,.15);

}

.fill{

    height:100%;

    width:36%;

    background:white;

    border-radius:20px;

    box-shadow:0 0 15px white;

    animation:load 2s ease;

}

@keyframes load{

    from{

        width:0;

    }

    to{

        width:36%;

    }

}

h2{

    margin-top:20px;

    font-size:42px;

}

.bottom{

    margin-top:15px;

    opacity:.85;

    line-height:28px;

}

button{

    margin-top:35px;

    padding:15px 40px;

    border:none;

    border-radius:50px;

    background:white;

    color:#7b2cbf;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s ease;

}

button:hover{

    transform:scale(1.05);

    background:#f5ebff;

    color:#7b2cbf;

    box-shadow:0 0 25px rgba(255,255,255,.5);

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}