:root {
    --md-primary-fg-color: #003561;
    --md-accent-fg-color: #651e38;
    --md-default-bg-color: #fdffe000;
    --md-text-font: "RUBFlama"; 
    --md-footer-bg-color--dark: white;
    --border-radius: 4px;
    --rub-blau: 15, 54, 90;
    --form-note-font-size: 14px;
    --pad-main-footer: 3vh;
    --header-logo: url(../medien/rub-makerspace-logo_info.svg);
    --header-logo-height: 2.21rem;
    --header-logo-factor: 2.43;
}

[data-md-color-scheme="slate"] { /* Variables for Dark-Mode */
    --md-hue: 208;
    --md-default-bg-color: hsla(var(--md-hue), 15%, 21%, 1);
    --md-primary-fg-color: #454545;
    --md-accent-fg-color: var(--link-color);
    --md-footer-bg-color--dark: white;
    --header-bg-color: rgba(108, 27, 64, 1);
    --header-bg-color-for-alpha: 108, 27, 64; /* This can be used to use the color in differing amounts of transparency. 'rgba(var(--header-bd-color-for-alpha), 0.5)' would use this color with 50% transparency. */
    --counter-grid-color: #444444;
    --tabs-color: rgba(15, 54, 90, 1);
    --tabs-color-for-alpha: 15, 54, 90;
    --tabs-font-color: rgb(205, 205, 205);
    --tabs-nav-int: rgba(108, 27, 64, 1);
    --high-contrast-bg: rgb(25, 25, 25);
    --high-contrast-bg-for-alpha: 25, 25, 25;
    --high-contrast-font: rgb(240, 240, 240);
    --high-contrast-font-for-alpha: 240, 240, 240;
    --keywords-bg: rgba(108, 27, 64, 1);
    --md-footer-bg-color: white; /* Background-color of footer */
    --contact-form: rgb(51, 51, 51);
    --hover-color: var(--tabs-nav-int); /*text-color of links, when hovered */
    --link-color: rgba(141, 174, 16, 1); /* text-color of links, defined */
    --md-typeset-a-color: var(--link-color); /* text-color of links, applied */
    --md-typeset-color: var(--high-contrast-font); /* main text-color */
    --md-default-fg-color--light: rgba(var(--high-contrast-font-for-alpha), 0.8); /* Text-color in quote-boxes */
    --header-svg: url('../medien/header_alt_dark.svg'); /* Bunte Formen im Hintergrund des Headers */
}

[data-md-color-scheme="default"] { /* Variables for light-Mode */
    --md-primary-fg-color: #003561;
    --md-accent-fg-color: var(--link-color);
    --md-default-bg-color: #FFF5FA;
    --md-text-font: "RUBFlama"; 
    --md-footer-bg-color--dark: white;
    --md-default-fg-color--light: rgb(47, 47, 47);
    --header-bg-color: rgba(15, 54, 90, 1);
    --header-bg-color-for-alpha: 15, 54, 90;
    --counter-grid-color: #fff5fb;
    --tabs-color: rgba(247, 164, 168, 1);
    --tabs-color-for-alpha: 247, 164, 168;
    --tabs-font-color: rgb(58, 58, 58);
    --tabs-nav-int: rgb(170, 210, 119);
    --high-contrast-bg: rgb(228, 228, 228);
    --high-contrast-bg-for-alpha: 228, 228, 228;
    --high-contrast-font: rgb(21, 21, 21);
    --high-contrast-font-for-alpha: 21, 21, 21;
    --keywords-bg: rgba(247, 164, 168, 1);
    --md-footer-bg-color: var(--md-default-bg-color);
    --contact-form: rgb(199, 199, 199);
    --hover-color: var(--tabs-nav-int);
    --link-color: rgba(15, 54, 90, 1);
    --md-typeset-a-color: var(--link-color);
    --header-svg: url('../medien/header_alt_dark.svg'); /* Bunte Formen im Hintergrund des Headers */
}

@font-face {
    font-family: "RUBFlama";
    src: url('../medien/flamapro-basic.woff') format('woff2');
}

.header-logo {
    background: var(--header-logo);
    height: var(--header-logo-height);
    width: calc(var(--header-logo-height) * var(--header-logo-factor));
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}