:root {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    cursor: default;

    --st-section-height: 4em;
    --st-section-padding: 3em;

    --st-font-size-xl: 32px;
    --st-font-size-l: 24px;
    --st-font-size-m: 16px;
    --st-font-size-s: 12px;
}

html { background-image: url("/silent-bg.png") }
body { background: var(--st-main-bg) }
header, footer { background-color: var(--st-main-bg); }
header, footer { height: var(--st-section-height); }


.m-auto { margin: auto; } .m-0 { margin: 0; } .m-1 { margin: 1em; }
.mr-sm-1 { margin-right: .25em; } .mr-sm-2 { margin-right: .5em; } .mr-sm-3 { margin-right: .75em; }
.mr-1 { margin-right: 1em; }
.ml-1 { margin-left: 1em; }
.mbe-0 { margin-block-end: 0; }
.mbs-0 { margin-block-start: 0; }
.p-0 { padding: 0; } .p-1 { padding: 1em; } .p-2 { padding: 2em; } .p-3 { padding: 3em; } .p-4 { padding: 4em; } .p-5 { padding: 5em; }
.pl-0 { padding-left: 0; } .pl-1 { padding-left: 1em; }
.pr-0 { padding-right: 0; } .pr-1 { padding-right: 1em; }
.text-primary { color: var(--st-text-primary); } .text-secondary { color: var(--st-text-secondary); }
.text-sm { font-size: var(--st-font-size-s); }
.h-100 { height: 100%; } .h-i { height: inherit; } .h-adaptive { height: calc(100% - (var(--st-section-height) * 2))}
.w-100 { width: 100%; } .w-75 { width: 75%; } .w-50 { width: 50%; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.d-flex { display: flex; }