/*******************************************************************************************
 * 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: calc(94% - 2pt);
    display: flex;
}

aside.sidebar {
    width: 15%;
}

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

footer {
    height: 3%;
}