:root
{
    /* colors */
    /* One day maybe the colors are assoc with each child? */
    --color_bg: rgba(153,255,153, 0.2);
    --color_bg_1: #EBFFEB;
    --color_green: rgba(153,255,153, 1);
    --color_green_dk: darkgreen;
    --sz_icons: 50px;
    --sz_margin: 3px;
    --color_gray: rgba(153,153,153, 1);
    --color_gray_lt: rgba(153,153,153, 0.30);
    --color_red: rgba(250,5,0, 1);
    --color_red_50: rgba(250,5,0, 0.5);
    --color_blue: rgba(50, 50, 200, 0.8);
}
html
{
    height: 100%;
}
body
{
    background-color: var(--color_bg);
    font-family: arial;
    height: calc(100% - (2 * 7px));
}
#main
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--sz_icons) 1fr var(--sz_icons) 1fr calc(1.75 * var(--sz_icons));
    grid-gap: calc(1 * var(--sz_margin));
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
    @media only screen and (max-width: 600px)
    {
        width: 350px;
        height: 550px;
        padding: calc(2 * var(--sz_margin));
        border: 1px dashed red;
    }
    #main > div
    {
        position: relative;
    }

.hidden
{
    display: none !important;
}