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

body{

    background:#0f172a;

    color:#fff;

    font-family:Arial, sans-serif;

    height:100vh;

    overflow:hidden;

}

.app{

    display:flex;

    height:100vh;

}

.main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar{

    height:70px;

    background:#111827;

    border-bottom:1px solid #1e293b;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    font-size:22px;

    font-weight:bold;

    color:#38bdf8;

}

.topbar-title{

    color:#cbd5e1;

    font-size:15px;

}

.topbar-links{

    display:flex;

    align-items:center;

    gap:15px;

}

.topbar-links a{

    color:#fff;

    text-decoration:none;

    transition:0.2s;

}

.topbar-links a:hover{

    color:#38bdf8;

}

/*
|--------------------------------------------------------------------------
| MOBILE MENU BUTTON
|--------------------------------------------------------------------------
*/

.mobile-menu-btn{

    display:none;

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#1e293b;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:900px){

    .mobile-menu-btn{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}