* {
    box-sizing: border-box;
}


body {

    margin:0;

    background:#080808;

    color:white;

    font-family:Inter,Arial,sans-serif;

    animation:fadeIn .5s ease;

}



@keyframes fadeIn {

    from {
        opacity:0;
        transform:translateY(10px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}




/* Login */

.login-box {

    width:380px;

    padding:40px;

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

    backdrop-filter:blur(15px);

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

    border-radius:20px;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    box-shadow:
    0 20px 50px rgba(0,0,0,.5);

    animation:pop .6s ease;

}



@keyframes pop {

    from {
        opacity:0;
        scale:.9;
    }

    to {
        opacity:1;
        scale:1;
    }

}




h1,h2 {

    font-weight:600;

}



input {

    width:100%;

    padding:14px;

    margin:8px 0;

    border-radius:12px;

    border:none;

    outline:none;

    background:#151515;

    color:white;

    transition:.25s;

}



input:focus {

    background:#202020;

    transform:scale(1.02);

}





button {

    width:100%;

    padding:14px;

    margin-top:12px;

    border:none;

    border-radius:12px;

    background:#6d28d9;

    color:white;

    cursor:pointer;

    transition:.25s;

    font-size:15px;

}



button:hover {

    background:#8b5cf6;

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(139,92,246,.3);

}




a {

    color:#a78bfa;

    text-decoration:none;

}




/* Dashboard */


.sidebar {


    position:fixed;

    height:100vh;

    width:240px;

    padding:25px;

    background:

    rgba(255,255,255,.04);

    backdrop-filter:blur(15px);

    border-right:1px solid rgba(255,255,255,.08);

}



.sidebar button {


    margin-top:15px;

    background:#151515;

}



.sidebar button:hover {

    background:#6d28d9;

}




.content {


    margin-left:280px;

    padding:40px;

}




.card {


    background:

    rgba(255,255,255,.05);


    padding:30px;

    border-radius:20px;

    border:

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


    transition:.3s;

}



.card:hover {


    transform:translateY(-5px);


    background:

    rgba(255,255,255,.08);

}

.page {

    animation: slide .35s ease;

}


@keyframes slide {

    from {

        opacity:0;

        transform:translateX(15px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}