@import "modules/header.css";
@import "modules/container.css";
@import "modules/footer.css";
@import "modules/nav.css";
@import "modules/footer.css";
@import "modules/downloads.css";

@import "elements/button.css";
@import "elements/misc.css";
@import "elements/table.css";
@import "elements/slider.css";

:root {
    --header-color: rgb(255, 54, 168);
    --main-content-color:rgb(245, 245, 245);
    --footer-color: rgb(153, 56, 224);
    --highlighting-color: black;
    --main-content-text-color: black;
    --header-text-color: white;
    --footer-text-color: white;
    --side-nav-text-color: var(--main-content-text-color);
    --header-highlighting-color: white;
    --footer-highlighting-color: var(--highlighting-color);
    --side-nav-highlighting-color: var(--highlighting-color);
    --link-color: black;
    --side-bar-color: white;
    --side-nav-color: var(--main-content-color);
    --menu-color: var(--main-content-color);
    --main-content-separator-color: rgba(211, 211, 211, .7);
    --slider-color: var(--menu-color);
    --slider-border-color: var(--main-content-separator-color);
    --slider-nav-prev-next-color: var(--slider-border-color);
    --main-button-background: rgb(20, 52, 66);
    --main-button-text-color: white;

    --main-padding: min(2.5%, 10pt) min(7.5%, 100pt);

    --main-font-size: 16pt;
    --header-font-size: 16pt;
    --footer-font-size: var(--header-font-size);

    --main-font: "Helvetica", sans-serif;
    --header-font: var(--main-font);
    --footer-font: var(--main-font);
}

@media only screen and (min-width: 1100px) {
    :root {
        --responsive-display-none-desktop: none;
        --main-font-size: 16pt;
        --header-font-size: 16pt;
        --footer-font-size: var(--header-font-size);
    }
}

@media only screen and (max-width: 1100px) {
    :root {
        --responsive-display-none-mobile: none;
        --main-font-size: 14pt;
        --header-font-size: 14pt;
        --footer-font-size: var(--header-font-size);
    }
}