/*
@use 'sass:math';

@mixin fluid-text($max: 48, $min: 16) {
  $maxViewportWidth: 1400;
  $minViewportWidth: 360;

  $maxSize: math.div($max, 16);
  $minSize: math.div($min, 16);
  $maxWidth: math.div($maxViewportWidth, 16);
  $minWidth: math.div($minViewportWidth, 16);

  $slope: math.div(($maxSize - $minSize), ($maxWidth - $minWidth));
  $yAxisIntersection: -$minWidth * $slope + $minSize;

  font-size: clamp(
    #{$minSize * 1rem},
    #{$yAxisIntersection * 1rem} + #{$slope * 100vw},
    #{$maxSize * 1rem}
  );
}

h1 { @include fluid-text(40, 28) }
h2 { @include fluid-text(36, 26) }
h3 { @include fluid-text(32, 24) }
h4 { @include fluid-text(28, 22) }
h5 { @include fluid-text(24, 20) }
h6 { @include fluid-text(20, 18) }
body { @include fluid-text(18, 16) }

maxSize = 18/16*1rem
minSize = 16/16*1rem
maxWidth = 1400/16
minWidth = 360/16

slope = ((18/16*1rem) - (16/16*1rem)) / ((1400/16) - (360/16))
yAxisIntersection = -(360/16*((18/16*1rem) - (16/16*1rem)) / ((1400/16) - (360/16))+(16/16*1rem))
fs = (-(360/16*((18/16*1rem) - (16/16*1rem)) / ((1400/16) - (360/16))+(16/16*1rem))*1rem) + (((18/16*1rem) - (16/16*1rem)) / ((1400/16) - (360/16))*100vw)

*/

* {
    --max: 18;
    --min: 16;
    --maxViewportWidth: 1400;
    --minViewportWidth: 360;
    --maxSize: calc(var(--max) / 16);
    --minSize: calc(var(--min) / 16);
    --maxWidth: calc(var(--maxViewportWidth) / 16);
    --minWidth: calc(var(--minViewportWidth) / 16);
    --slope: calc((var(--maxSize) - var(--minSize)) / (var(--maxWidth) - var(--minWidth)));
    --yAxisIntersection: calc((0 - var(--minWidth)) * var(--slope) + var(--minSize));
    --fs: calc((var(--yAxisIntersection) + 1rem) + (var(--slope) * 100vw));

    /* https://fonts.google.com/selection/embed */
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" clamp(62.5, 75, 100);
    /* https://www.youtube.com/watch?v=6l6IJLlSoLo */
    /* https://github.com/aleksanderlamkov/pixels-vs-rem/tree/main */
    /* https://html-css-js.com/css/generator/font/ */
    font-size: clamp(.75rem, 1rem, 1.25rem);
    /* letter-spacing: 0.06em; */
    line-height: 1.3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --header-height: 3.15rem;
}

:root {
    color-scheme: light dark;
}

html,
body {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    color: light-dark(black, white);
    background-color: light-dark(white, black);
}

header {
    width: 100%;
    height: var(--header-height);
    border-bottom: 1px solid light-dark(orange, blue);
    box-shadow: 0 0.1em 1em light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
    background-color: light-dark(#6d6d6d, #363636);;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.brand-logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.brand-logo-img {
    margin-left: .5em;
    margin-right: .5em;
    border-radius: 50%;

}

@media (prefers-color-scheme: dark) {
    .brand-logo-img {
        filter: invert(1);
    }
}

.brand-logo-text {
    font-family: "Arial Black", sans-serif;
    font-size: 1.25rem;
    letter-spacing: -1px;
    word-spacing: 0px;
    color: light-dark(white, white);
    font-weight: 700;
    text-decoration: overline;
    font-style: normal;
    font-variant: small-caps;
    text-transform: capitalize;
}

.top-menu-div-user-logo {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;

    a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;

        img {
            width: 1.75em;
            height: 1.75em;
            margin-left: 1em;
            margin-right: 1em;
            border-radius: 50%;
            border: 1px solid grey;
            box-shadow: 0.25em 0.25em 0.3em light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
        }
    }
}

main {
    /* padding-top: 10px; */
    width: 100%;
    height: calc(100dvh - var(--header-height));
    /* https://www.youtube.com/watch?v=JYfiaSKeYhE */
    display: grid;
    grid-template-columns: 10rem 1fr;
}

.sidebar {
    /* background-color: aqua; */
    -webkit-box-shadow: 10px 0px 5px -2px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
    box-shadow: 10px 0px 5px -2px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
    /* box-shadow: 0.08rem 0 1rem -0.05rem light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: none;
    scrollbar-width: none;
}

.menu-list-link-active {
    background-color: light-dark(greenyellow, #336600) !important;
    color: orange !important;

}

.menu-list-link-active:hover {
    background-color: light-dark(rgb(255, 252, 47), #FFCC00) !important;
    color: light-dark(black, white) !important;
    ;
}

.window {
    overflow-y: auto;
    padding: 0 0 0 .5em;
    scrollbar-width: thin;
}

.menu-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .2em 0;
    box-shadow: 0 0.1em 1em rgba(189, 189, 189, 0.3);
}

.menu-list-link {
    width: 100%;
    border-bottom: 1px solid rgba(192, 192, 192, 0.5);
    background-color: rgba(219, 219, 219, 0.603);
    display: block;
    text-wrap: nowrap;
    text-decoration: none;
    height: 100%;
    align-content: center;
    padding: .7em .5em;
    color: light-dark(black, white);

    span {
        padding: 0 0 0 0.5em;
    }
}

.menu-list-link:hover {
    background-color: light-dark(orange, rgb(145, 95, 8));

    span {
        color: light-dark(white, black);
        ;
    }
}



.fw-min {
    font-weight: 100;
    font-variation-settings: "wdth" 62.5;
}

.fw-max {
    font-weight: 900;
    font-variation-settings: "wdth" 100;
}

.fs {
    width: var(--fs);
    max-width: var(--fs);
    height: var(--fs);
    max-height: var(--fs);
    background-color: greenyellow;
}

table.blueTable {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

table.blueTable td,
table.blueTable th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}

table.blueTable tbody td {
    font-size: 1rem;
    color: black;
}

table.blueTable tr:nth-child(even) {
    background: #D0E4F5;
}

table.blueTable thead {
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
    position: sticky;
    top: 0;
}

table.blueTable thead th {
    font-size: 1.25rem;
    letter-spacing: -1px;
    word-spacing: 0px;
    font-weight: 500;
    text-decoration: none;
    font-style: normal;
    font-variant: small-caps;
    text-transform: capitalize;
    color: white;
    text-align: center;
    border-left: 2px solid #D0E4F5;
    padding: .5rem .5rem;
}

table.blueTable thead th:first-child {
    border-left: none;
}

table.blueTable tfoot {
    font-size: 1rem;
    font-weight: bold;
    color: light-dark(white, white);
    background: #D0E4F5;
    background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    border-top: 2px solid #444444;
}

table.blueTable tfoot td {
    font-size: 1rem;
}

table.blueTable tfoot .links {
    text-align: right;
}

table.blueTable tfoot .links a {
    display: inline-block;
    background: #1C6EA4;
    color: light-dark(white, white);
    padding: 2px 8px;
    border-radius: 5px;
}

.button-red {
    background-color: red;
    border: none;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
}