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

html,
body{

width:100%;
height:100%;

font-family:
Inter,
sans-serif;

background:
var(--bg);

color:
var(--text);

overflow:hidden;

}

a{

text-decoration:none;

color:inherit;

}

button{

font:inherit;

cursor:pointer;

border:none;

}

.app{

display:flex;

height:100vh;

width:100%;

background:var(--bg);

}

.main{

flex:1;

display:flex;

flex-direction:column;

overflow:hidden;

}

#content{

flex:1;

overflow:auto;

padding:35px;

background:var(--bg);

}

.page{

max-width:1600px;

margin:auto;

width:100%;

}

/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app {
        display: block;
        min-height: 100vh;
        height: auto;
    }

    .main {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    #content {
        width: 100%;
        min-width: 0;
        overflow: visible;
        padding: 24px 20px;
    }

    .page {
        width: 100%;
        max-width: 100%;
    }

}

@media (max-width: 600px) {

    #content {
        padding: 18px 14px;
    }

}