.flexContainerHead {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.flexItemHead {
    padding: 5px;
    margin: auto;
}

.copyright {
    font: 0.8em serif;
}

/* puts a border around the object */
.box {
    text-align: center;
    padding: 4px;
    margin: 4px;
}



/* Position the theme switch */
#themeSwitch {
    /* Top center */
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 2;
    padding: 10px;

    /* Top left */
/*
    top: 0px;
    left: 0px;
    padding: 10px;
*/

    /* Top right, floating above all content */
/*
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    padding: 20px;
*/
}

/* Color definitions as CSS custom properties */
/* Dark theme (default) */
:root {
    --colFg: #ffffff;
    --colBg: #333333;
    --colRed: #fc0804;
    --colGreen: #48c21c;
    --colBlue: #2388E7;
    --colYellow: #fde214;
    --colDarkGreen: #38957e;
    --colHighlightGrey: #cccccc;
    --colHighlightDarkGrey: #A09292;
    --colYellowTransparent: #fde21466;
    --colHighlightExtra1: #b13ae8;
    --colHighlightExtra2: #e9944e;
    --colHighlightExtra3: #eb8b95;

    --colButton: #ffffff;
    --colButtonBg: #00000000;
    --colButtonHover: #ffffff;
    --colButtonHoverBg: #555555;
    --colExButtonActive: #ffffff;
    --colExButtonActiveBg: #666666;
}
/* Override colors for the bright theme (applied if the body element has a property "appTheme") */
[appTheme="bright"] {
    --colFg: #000000;
    --colBg: #ffffff;
    --colRed: #cc0502;
    --colGreen: #358f14;
    --colBlue: #1570d1;
    --colYellow: #dec402;
    --colDarkGreen: #286959;
    --colHighlightGrey: #777777;
    --colHighlightDarkGrey: #444444;
    --colYellowTransparent: #dec40266;
    --colHighlightExtra1: #9e1adb;
    --colHighlightExtra2: #e47d28;
    --colHighlightExtra3: #E77480;

    --colButton: #000000;
    --colButtonBg: #ffffff;
    --colButtonHover: #000000;
    --colButtonHoverBg: #cccccc;
    --colExButtonActive: #000000;
    --colExButtonActiveBg: #bbbbbb;
}
/* Bright scheme for color blind people */
[appTheme="deuteranopia"] {
    --colFg: #000000;
    --colBg: #ffffff;
    --colRed: #ff0000;
    --colGreen: #00ff00;
    --colBlue: #0000ff;
    --colYellow: #e0e000;
    --colDarkGreen: #ff00ff;
    --colHighlightGrey: #777777;
    --colHighlightDarkGrey: #444444;
    --colYellowTransparent: #e0e00066;
    --colHighlightExtra1: #00ffff;
    --colHighlightExtra2: #ed771d;
    --colHighlightExtra3: #99d5ff;

    --colButton: #000000;
    --colButtonBg: #ffffff;
    --colButtonHover: #000000;
    --colButtonHoverBg: #cccccc;
    --colExButtonActive: #000000;
    --colExButtonActiveBg: #bbbbbb;
}
/* Bright scheme for color blind people */
[appTheme="protanopia"] {
    --colFg: #000000;
    --colBg: #ffffff;
    --colRed: #c84c09;
    --colGreen: #48aba1;
    --colBlue: #067bc2;
    --colYellow: #e0e000;
    --colDarkGreen: #521d07;
    --colHighlightGrey: #777777;
    --colHighlightDarkGrey: #444444;
    --colYellowTransparent: #e0e00066;
    --colHighlightExtra1: #a7fff6;
    --colHighlightExtra2: #ff9b71;
    --colHighlightExtra3: #b09082;

    --colButton: #000000;
    --colButtonBg: #ffffff;
    --colButtonHover: #000000;
    --colButtonHoverBg: #cccccc;
    --colExButtonActive: #000000;
    --colExButtonActiveBg: #bbbbbb;
}

/* use the bright theme for printing */
@media print {
    :root {
        --colFg: #000000;
        --colBg: #ffffff;
        --colRed: #cc0502;
        --colGreen: #358f14;
        --colBlue: #1570d1;
        --colYellow: #dec402;
        --colDarkGreen: #286959;
        --colHighlightGrey: #777777;
        --colHighlightDarkGrey: #444444;
        --colYellowTransparent: #dec40266;
        --colHighlightExtra1: #9e1adb;
        --colHighlightExtra2: #e47d28;
        --colHighlightExtra3: #e77480;

        --colButton: #000000;
        --colButtonBg: #ffffff;
        --colButtonHover: #000000;
        --colButtonHoverBg: #cccccc;
        --colExButtonActive: #000000;
        --colExButtonActiveBg: #bbbbbb;
    }

    /* do not print the theme switcher */
    #themeSwitch {
        display: none !important;
    }
}



/* the default fore- and background colors */
.fg {
    color: var(--colFg);
    stroke: var(--colFg);
}
.bg {
    background-color: var(--colBg);
    fill: var(--colBg);
}

/* a reddish highlight color */
.highlightR {
    color: var(--colRed);
    stroke: var(--colRed);
}
/* a greenish highlight color */
.highlightG {
    color: var(--colGreen);
    stroke: var(--colGreen);
}
/* a blueish highlight color */
.highlightB {
    color: var(--colBlue);
    stroke: var(--colBlue);
}
.highlightYellow {
    color: var(--colYellow);
    stroke: var(--colYellow);
}
.highlightDarkGreen {
    color: var(--colDarkGreen);
    stroke: var(--colDarkGreen);
}
.highlightGrey {
    color: var(--colHighlightGrey);
    stroke: var(--colHighlightGrey);
}
.highlightDarkGrey {
    color: var(--colHighlightDarkGrey);
    stroke: var(--colHighlightDarkGrey);
}
/* further highlight colors */
.highlightExtra1 {
    color: var(--colHighlightExtra1);
    stroke: var(--colHighlightExtra1);
}
.highlightExtra2 {
    color: var(--colHighlightExtra2);
    stroke: var(--colHighlightExtra2);
}
.highlightExtra3 {
    color: var(--colHighlightExtra3);
    stroke: var(--colHighlightExtra3);
}

/* same colors, defined for borders around objects */
.borderHighlightR {
    border:  2px solid var(--colRed);
}
.borderHighlightG {
    border:  2px solid var(--colGreen);
}
.borderHighlightB {
    border:  2px solid var(--colBlue);
}
.borderHighlightYellow {
    border:  2px solid var(--colYellow);
}
.borderHighlightDarkGreen {
    border:  2px solid var(--colDarkGreen);
}
.borderHighlightGrey {
    border:  2px solid var(--colHighlightGrey);
}
.borderHighlightDarkGrey {
    border:  2px solid var(--colHighlightDarkGrey);
}
.borderHighlightExtra1 {
    border:  2px solid var(--colHighlightExtra1);
}
.borderHighlightExtra2 {
    border:  2px solid var(--colHighlightExtra2);
}
.borderHighlightExtra3 {
    border:  2px solid var(--colHighlightExtra3);
}

/* background colors */
.backgroundRed {
    background-color: var(--colRed);
    fill: var(--colRed);
}
.backgroundGreen {
    background-color: var(--colGreen);
    fill: var(--colGreen);
}
.backgroundBlue {
    background-color: var(--colBlue);
    fill: var(--colBlue);
}
.backgroundYellow {
    background-color: var(--colYellow);
    fill: var(--colYellow);
}
.backgroundYellowTransparent {
    background-color: var(--colYellowTransparent);
    fill: var(--colYellowTransparent);
}
.backgroundDarkGreen {
    background-color:  var(--colDarkGreen);;
    fill:  var(--colDarkGreen);;
}
.backgroundGrey {
    background-color: var(--colHighlightGrey);
    fill: var(--colHighlightGrey);
}
.backgroundDarkGrey {
    background-color: var(--colHighlightDarkGrey);
    fill: var(--colHighlightDarkGrey);
}
.backgroundExtra1 {
    background-color: var(--colHighlightExtra1);
    fill: var(--colHighlightExtra1);
}
.backgroundExtra2 {
    background-color: var(--colHighlightExtra2);
    fill: var(--colHighlightExtra2);
}
.backgroundExtra3 {
    background-color: var(--colHighlightExtra3);
    fill: var(--colHighlightExtra3);
}



body {
    color: var(--colFg);
    background-color: var(--colBg);
    font-size: 18px;
}

table, td {
    border: 1px solid var(--colFg);
}
th, thead {
    border: 2px solid var(--colFg);
}

input, select, label {
    background-color: var(--colBg);
    color: var(--colFg);
}
/* SVG elements */
line, circle, rect, ellipse {
    /*stroke: var(--colFg);*/
}



.jxgBoxBorder {
    border: 1px solid var(--colBg);
}

.button{
    color: var(--colButton);
    background-color: var(--colButtonBg);
    border-radius: 15px;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    cursor: pointer
}
.button:hover {
    color: var(--colButtonHover);
    background-color: var(--colButtonHoverBg);
}


/* exercises styles */
.exButton {
    color: var(--colcolButton);
    background-color: var(--colButtonBg);
    font-size: 18px;
    border-radius: 50%;
    margin: 15px;
    cursor: pointer
}
.exButton:hover {
    color: var(--colButtonHover);
    background-color: var(--colButtonHoverBg);
}
.exButtonActive {
    color: var(--colExButtonActive);
    background-color: var(--colExButtonActiveBg);
    font-size: 18px;
    border-radius: 50%;
    margin: 15px;
    cursor: pointer
}

.exTitle {
    font-size: 22px;
    text-align: center;
    text-decoration: underline;
}