/*******************************************************************************************
 * This file contains the stlying used for layout.
 *******************************************************************************************/

@charset "UTF-8";

:root {
    /*
        3pt: expand bar
        4%: <article> padding
        1px: dummpy
    */
    --artile_main_width: calc(85% - 3pt - 4% - 1px);
}

body {
    height: 100vh;
    max-height: 100vh;
}

header {
    height: 3%;
}

main {
    /* 
        2pt: border in headr and footer 
    */
    height: 95%;
    display: flex;
}

aside.sidebar {
    width: 15%;
    padding-top: 30pt;
    min-width:250px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-right:10px;
    padding-bottom:30px;
}

article {
    width: var(--artile_main_width);
}

footer {
    height: 5%;
}