@import "./home-page.css";
@import "./searchable-tree-menu.css";
@import "./web-component-tables.css";
@import "./wow.css";

:root {
    /*--base-color-h: 210deg;*/
    /*--base-color-s: 81%;*/
    /*--base-color-l: 53%;*/

    --base-color-h: 210deg;
    --base-color-s: 81%;
    --base-color-l: 53%;

    --base-color: hsl(var(--base-color-h) var(--base-color-s) var(--base-color-l));

    --header-button-color: hsl(calc(var(--base-color-h) - 2deg) calc(var(--base-color-s) - 2%) calc(var(--base-color-l) - 2%));
    --header-button-border-color: hsl(calc(var(--base-color-h) - 11deg) calc(var(--base-color-s) + 11%) calc(var(--base-color-l) + 21%));

    --nav-btn-deg-0-color: var(--base-color);
    --nav-btn-deg-1-color: var(--base-color);
    --nav-btn-deg-2-color: hsl(var(--base-color-h) calc(var(--base-color-s) - 10%) calc(var(--base-color-l) - 10%));
    --nav-btn-deg-3-color: hsl(var(--base-color-h) calc(var(--base-color-s) - 20%) calc(var(--base-color-l) - 20%));

    --base-background-color: #cfd8dc;
    --base-font-color: white;
}

body {
    margin: 0;
}

main-frame {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

main-frame-header {
    background-color: var(--base-color);
    color: var(--base-font-color);
    grid-column: 1/3;

    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.5rem;
}

main-frame-header button.header-btn {
    background-color: var(--header-button-color);
    padding: 0.5rem;
    outline: none;
    color: var(--base-font-color);
    border-radius: 0.2rem;
    text-shadow: 0 0 4px #000;
    border: 1px solid var(--header-button-border-color);
    margin-left: 0.2rem;
}

main-frame-header button.menu-btn {
    display: none;
}

main-frame div.main-frame-body {
    display: flex;
    height: 100%;
}

main-frame-navigator {
    display: flex;
    flex-direction: column;
    background-color: var(--base-background-color);
    height: 100%;
}

div.main-frame-router-view {
    overflow: scroll;
    flex-grow: 1;
}

.content-container {
    box-sizing: border-box;
    padding: 1rem;
    display: block;
}

@media (max-width: 600px) {
    main-frame-header button.menu-btn {
        display: inline-block;
    }

    main-frame-navigator {
        display: none;
        height: 100%;
        position: absolute;
    }

    main-frame div.main-frame-body {
        display: block;
        overflow: hidden;
    }
}