/*
    NOTES:
    dashes as a rule are for debugging purposes
 */
:root
{
    /* If the variable is to be used everywhere in the application, place it in this file, otherwise place it in its own files' root */
    --sz_header_height: 65px;
    --margin_default: 10%;
    --margin_mobile: 10px;
    --color_primary: rgba(55,124,190, 1);
    --color_primary_light: rgba(55,124,190, 0.1);
    --color_secondary: rgba(55,124,190, 0.3);
    --color_tertiary: rgba(150,150,150, 1);
    --color_bg_dark: rgba(1,23,47, 1);
    --padding: 3px;
    --sz_border_bottom: 2px;
    --sz_button: 40px;
    --sz_button_margin: 10px;
    --sz_width_min: 300px;
    --border: 1px solid silver;
}

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Fira Sans", sans-serif;
}

.fira-sans-extralight
{
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: normal;
}

#main
{
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    grid-gap: var(--padding);
}
    #main > header
    {
        position: sticky;
        top: 0;
        left: 0;
        height: var(--sz_header_height);
        z-index: 1;
        margin-left: var(--margin_default);
        margin-right: var(--margin_default);
    }
    #main > :nth-child(2)
    {
    }
#content
{
    display: block;
    position: relative;
    box-sizing: border-box;
    margin-left: var(--margin_default);
    margin-right: var(--margin_default);
}
.hidden
{
    display: none !important;
}

*[title]
{
    position: relative;
    padding: var(--sz_button_margin);
    padding-top: calc(2 * var(--sz_button_margin) );
}
    *[title]:before
    {
        content: attr(title);
        text-transform: uppercase;
        display: flex;
        position: absolute;
        top: var(--sz_button_margin);
        color: var(--color_primary);
        font-weight: bold;
        width: calc(100% - (2 * var(--sz_button_margin)));
    }
    .before_left *[title]:before
    {
        left: 0 !important;
        text-align: left;
        justify-content: flex-start;
        padding-left: unset;
    }
/********************* Start Media queries for different layouts */

@media screen and (max-width: 1200px)
{
    #main > header,
    #content
    {
        margin-left: calc(var(--margin_default) / 2);
        margin-right: calc(var(--margin_default) / 2);
    }
}

@media screen and (max-width: 1024px)
{
    #main > header,
    #content
    {
        margin-left: 0;
        margin-right: 0;
    }
    *[title]:before
    {
        padding-left: var(--sz_button_margin);
        margin-left: 0;
        text-align: center;
        justify-content: center;
    }
}

@media screen and (max-width: 768px)
{

}