:root {
  --highlight-bg-color: #bcbcbc;
  --highlight-text-color: #2b2b2b;

  --secondary-color: #f0ffff;

  --standard-padding-hor: min(30px, 1.5vw);
  --standard-padding-ver: min(20px, 1vh);
  --standard-border-radius: 3px;
  --top-div-margin: 1vh;

  --main-background-color: #ffffff;
  --main-text-color: #000000;

  --main-font: Arial;

  /*font-family: OpenDyslexic;*/
  font-family: var(--main-font);
  font-size: 23px;
  color: var(--main-text-color);
  background-color: var(--main-background-color)
}

@font-face {
  font-family: OpenDyslexic; /* set name */
  src: url(styling/OpenDyslexic-Regular.woff2); /* url of the font */
}

@font-face {
  font-family: OpenDyslexic;
  src: url(styling/OpenDyslexic-Bold.woff2);
  font-weight: bold;
}

@font-face {
  font-family: OpenDyslexic;
  src: url(styling/OpenDyslexic-Italic.woff2);
  font-style: italic;
}

@font-face {
  font-family: OpenDyslexic;
  src: url(styling/OpenDyslexic-Bold-Italic.woff2);
  font-weight: bold;
  font-style: italic;
}

header {
    text-align: left;
    padding-left: var(--standard-padding-hor);
    padding-right: var(--standard-padding-hor);
    padding-top: 1px;
    padding-bottom: 1px;
}

main {
}

button {
    cursor: pointer;
    font-family: var(--main-font);

    border-radius: var(--standard-border-radius);
    border-color: var(--secondary-color);
    border-width: 3px;

    background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

.standard-padding {
    padding-left: var(--standard-padding-hor);
    padding-right: var(--standard-padding-hor);
    padding-top: var(--standard-padding-ver);
    padding-bottom: var(--standard-padding-ver);
}

.highlight {
    background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

.border {
    border-radius: var(--standard-border-radius);
}

.top-margin {
    margin-top: var(--top-div-margin);
}

.navigation {
    text-align: left;
}

.content {
    text-align: justify;
    line-height: 1.5;
    text-indent: 3ch;
}

.float-container {
    overflow: hidden;
}

footer {
}

@media screen and (max-width: 600px) {
    .navigation {;
    }
    .content {
    }
}

@media screen and (min-width: 601px) {
    .navigation {
        float: left;
        margin-top: 1vh;
        width: 13vw;
        max-width: 300px;
    }
    .content {
        --max-width: 1200px;
        width: 50vw;
        max-width: var(--max-width);
        margin-right: calc((100vw - min(50vw, var(--max-width)))/2); 
        float: right;
    }
    footer {
    }
    .right-align {
        float: right;
    }
    .left-align {
        float: left;
    }
}