/**
 *  VARIABLES
 */
:root {
    --font-size-std: 18px; /* 1.125em; /* defaults to 18px */
    --font-size-menu: 1.25em; /* defaults to 20px */
    --font-size-large: 1.5em; /* defaults to 24px */
    --font-size-larger: 2em;  /* defaults to 32px */
    --font-size-largest: 3em; /* defaults to 48px */

    --color-dark: #9c52af;
    --color-light: #cdcdcd;
    --color-white: #fff;
    --color-std: #000;
    --color-link: #9c52af;
    --color-link-highlight: #9c52af;
    --color-link-header: #000;
    --color-link-header-highlight: #666;
    --color-link-footer-highlight: #fff;

    --padding-small: 1em;
}


/**
 *  LAYOUT
 */
body {
}
.site {
}
.header {
    padding: 0.1px var(--padding-small);
    border-bottom: 6px solid var(--color-dark);
}
.header h1 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 1px;
    max-width: 800px;
}
.page {
    padding: var(--padding-small);
    position: relative;
}
.page .page-content {
    max-width: 50em; /* defaults to 800px */
    margin: 0 auto;
}
.footer {
    position: relative;
}
.footer .menu {
    width: 100%;
    padding: var(--padding-small) 0;
}
.footer .menu ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding-left: var(--padding-small)
}
@media (min-width: 800px) {
    .footer .menu ul {
        padding-left: 0;
    }
}
.lang-switch-wrapper {
    margin-left: auto;
    margin-right: auto;
}


/**
 *  FONTS
 */
@font-face {
    font-family: UniversBold;
    src: url('/static/fonts/UniversLTStd-Bold.otf');
}
@font-face {
    font-family: UniversSTD;
    src: url('/static/fonts/UniversLTStd.otf');
}
@font-face {
    font-family: UniversLight;
    src: url('/static/fonts/Univers-Light-Normal.woff');
}
h1, h2, h3, h4, h5, h6, p, li, a, label, input, textarea, span {
    font-family: UniversLight, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1 {
    font-size: var(--font-size-largest);
    font-weight: 900;
}
h2 {
    font-size: var(--font-size-larger);
    font-weight: 900;
}
h3 {
    font-size: var(--font-size-large);
    font-weight: 900;
}

.header h1 {
    font-size: var(--font-size-larger);
    text-transform: uppercase;
}
.header h1 a {
    font-family: UniversBold;
    font-weight: normal;
}

.page-content p,
.page-content li {
    font-size: var(--font-size-std);
}
.menu li {
    font-size: var(--font-size-menu);
}


/**
 *  COLORS
 */
body {
}
.site {
}
.header {
    /* background: var(--color-dark); */
}
.page {
    background: var(--color-white);
}
.footer {
    background: var(--color-light);
}
.footer .menu {
    background: var(--color-dark);
}

/* ********************************************************************************************
 *   SPECIAL ELEMENTS
 * ********************************************************************************************/

/**
 *  MENU
 */
.menu ul {
    list-style: none;
}
.menu li {
    display: inline-block;
    margin-left: 1em;
}
.menu li:first-child {
    margin-left: 0;
}


/**
 *  LINKS
 */

a {
    color: var(--color-link);
    text-decoration: none;
}
a:hover,
a:active {
    color: var(--color-link-highlight);
    border-bottom: 1px dotted var(--color-link-highlight);
}
.header a,
.footer a {
    color: var(--color-link-header);
}
.header a:hover,
.header a:active {
	color: var(--color-link-header-highlight);
}
.footer a:hover,
.footer a:active {
    color: var(--color-link-footer-highlight);
}

button a,
button a:hover {
    text-decoration: none;
    border-bottom: none;
}
.footer button a:hover {
    color: var(--color-link-highlight);
}