c3ioc-hugo/static/css/style.css

/**
  *
  * DO NOT MODIFY THE CSS FILE DIRECTLY. The CSS is generated from the SCSS file. Make
  * all changes in the SCSS files and then regenerate this CSS file. All changes made
  * this CSS file will be lost.
  *
  * To regenerate the CSS file install Sass and then run:
  * sass style.scss style.css
  *
  */
/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "SylexiadSansMedium-Bold";
  src: url("../fonts/SylexiadSansMedium-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/SylexiadSansMedium-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SylexiadSansMedium-Bold.otf") format("opentype"), url("../fonts/SylexiadSansMedium-Bold.svg") format("svg"), url("../fonts/SylexiadSansMedium-Bold.ttf") format("truetype"), url("../fonts/SylexiadSansMedium-Bold.woff") format("woff"), url("../fonts/SylexiadSansMedium-Bold.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SylexiadSansMedium";
  src: url("../fonts/SylexiadSansMedium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/SylexiadSansMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/SylexiadSansMedium.otf") format("opentype"), url("../fonts/SylexiadSansMedium.svg") format("svg"), url("../fonts/SylexiadSansMedium.ttf") format("truetype"), url("../fonts/SylexiadSansMedium.woff") format("woff"), url("../fonts/SylexiadSansMedium.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AtkinsonHyperlegible-Bold";
  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Atkinson-Hyperlegible-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Atkinson-Hyperlegible-Bold.otf") format("opentype"), url("../fonts/Atkinson-Hyperlegible-Bold.svg") format("svg"), url("../fonts/Atkinson-Hyperlegible-Bold.ttf") format("truetype"), url("../fonts/Atkinson-Hyperlegible-Bold.woff") format("woff"), url("../fonts/Atkinson-Hyperlegible-Bold.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AtkinsonHyperlegible-Regular";
  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Atkinson-Hyperlegible-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Atkinson-Hyperlegible-Regular.otf") format("opentype"), url("../fonts/Atkinson-Hyperlegible-Regular.svg") format("svg"), url("../fonts/Atkinson-Hyperlegible-Regular.ttf") format("truetype"), url("../fonts/Atkinson-Hyperlegible-Regular.woff") format("woff"), url("../fonts/Atkinson-Hyperlegible-Regular.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexicThree-Bold";
  src: url("../fonts/OpenDyslexic3-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/OpenDyslexic3-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenDyslexic3-Bold.otf") format("opentype"), url("../fonts/OpenDyslexic3-Bold.svg") format("svg"), url("../fonts/OpenDyslexic3-Bold.ttf") format("truetype"), url("../fonts/OpenDyslexic3-Bold.woff") format("woff"), url("../fonts/OpenDyslexic3-Bold.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexicThree-Regular";
  src: url("../fonts/OpenDyslexic3-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/OpenDyslexic3-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenDyslexic3-Regular.otf") format("opentype"), url("../fonts/OpenDyslexic3-Regular.svg") format("svg"), url("../fonts/OpenDyslexic3-Regular.ttf") format("truetype"), url("../fonts/OpenDyslexic3-Regular.woff") format("woff"), url("../fonts/OpenDyslexic3-Regular.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Regular";
  src: url("../fonts/Ubuntu-R.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu-R.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-R.otf") format("opentype"), url("../fonts/Ubuntu-R.svg") format("svg"), url("../fonts/Ubuntu-R.ttf") format("truetype"), url("../fonts/Ubuntu-R.woff") format("woff"), url("../fonts/Ubuntu-R.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu-Light";
  src: url("../fonts/Ubuntu-L.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu-L.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-L.otf") format("opentype"), url("../fonts/Ubuntu-L.svg") format("svg"), url("../fonts/Ubuntu-L.ttf") format("truetype"), url("../fonts/Ubuntu-L.woff") format("woff"), url("../fonts/Ubuntu-L.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu-Medium";
  src: url("../fonts/Ubuntu-M.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu-M.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-M.otf") format("opentype"), url("../fonts/Ubuntu-M.svg") format("svg"), url("../fonts/Ubuntu-M.ttf") format("truetype"), url("../fonts/Ubuntu-M.woff") format("woff"), url("../fonts/Ubuntu-M.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu-Bold";
  src: url("../fonts/Ubuntu-B.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu-B.eot?#iefix") format("embedded-opentype"), url("../fonts/Ubuntu-B.otf") format("opentype"), url("../fonts/Ubuntu-B.svg") format("svg"), url("../fonts/Ubuntu-B.ttf") format("truetype"), url("../fonts/Ubuntu-B.woff") format("woff"), url("../fonts/Ubuntu-B.woff2") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Fonts */
.font-Ubuntu {
  font-family: "Ubuntu Regular", sans-serif;
  font-size: 14pt;
}
.font-Ubuntu h1 {
  font-family: "Ubuntu-Bold";
}
.font-Ubuntu h2,
.font-Ubuntu .lang {
  font-family: "Ubuntu-Medium";
}

@media (prefers-color-scheme: dark) {
  .font-Ubuntu {
    font-family: "Ubuntu-Medium";
  }
  .font-Ubuntu h1 {
    font-family: "Ubuntu-Light";
  }
  .font-Ubuntu h2,
.font-Ubuntu .lang {
    font-family: "Ubuntu Regular";
  }
}
.font-SylexiadSans {
  font-family: SylexiadSansMedium, sans-serif;
  font-size: 16.8pt;
}
.font-SylexiadSans h2,
.font-SylexiadSans .lang {
  font-family: SylexiadSansMedium-Bold, sans-serif;
}

.font-AtkinsonHyperlegible {
  font-family: AtkinsonHyperlegible-Regular, sans-serif;
  font-size: 15.2pt;
}
.font-AtkinsonHyperlegible h2,
.font-AtkinsonHyperlegible .lang {
  font-family: AtkinsonHyperlegible-Bold, sans-serif;
}

.font-OpenDyslexicThree {
  font-family: OpenDyslexicThree-Regular, sans-serif;
  font-size: 12.4pt;
}
.font-OpenDyslexicThree h2,
.font-OpenDyslexicThree .lang {
  font-family: OpenDyslexicThree-Bold, sans-serif;
}

.font-serif {
  font-family: serif;
}
.font-serif h2,
.font-serif .lang {
  font-family: serif;
  font-weight: bold;
}

.font-sans {
  font-family: sans-serif;
}
.font-sans h2,
.font-sans .lang {
  font-family: sans-serif;
  font-weight: bold;
}

body {
  font-size: 13pt;
  line-height: 1.5em;
  margin: 0 auto;
  background: #efefef;
  color: #333333;
}

:root {
  color-scheme: light dark;
}

a {
  text-decoration: none;
  color: #763bff;
}

a:hover,
a:focus {
  color: #5f0096;
}

header {
  position: relative;
  background-image: url("../img/header_img_placeholder.jpg");
  background-repeat: no-repeat;
  background-size: cover 100%;
  padding: 1.5em 1em;
}

main {
  /* wraps the German and English version*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

main > * {
  margin: 0 1em;
  flex-basis: 25rem;
  flex-grow: 1;
}

h1 {
  display: inline-block;
  background: linear-gradient(to right, #c31fba, #6600ea);
  padding: 0.4em;
  border-top-left-radius: 0.75em;
  border-bottom-right-radius: 0.75em;
  color: white;
  line-height: 1em;
}

h2 {
  color: #bf1eb7;
}

ul {
  background: #e2e2e2;
  border-width: 3px 0 0 0;
  border-style: solid;
  -o-border-image: linear-gradient(to right, #c31fba, #6600ea) 100% 1;
  border-image: linear-gradient(to right, #c31fba, #6600ea) 100% 1;
}

footer {
  background-color: #e2e2e2;
  text-align: center;
  padding: 1em;
}

.lang {
  font-size: 1.2em;
}

.skiplink {
  position: absolute;
  bottom: -2em;
  right: 1em;
}

/* Utility classes */
.display-none {
  display: none;
}

.js {
  display: none;
}

/* Choosing fonts via JS */
#accessibility-options button {
  position: absolute;
  top: 0;
  right: 0;
  font-size: inherit;
  color: #efefef;
  background-color: #6600ea;
  border: 0;
  border-bottom-left-radius: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0.4em 0.6em;
}
#accessibility-options button:hover {
  background-color: #5b00d2;
  cursor: pointer;
}
#accessibility-options button:focus {
  outline: none;
}

#font-selection {
  color: #333333;
  background: #efefef;
  border-radius: 15px;
  border: 1px solid #6600ea;
}
#font-selection ul {
  -moz-columns: 3 150pt;
  columns: 3 150pt;
  margin: 0;
  padding: 0;
  border: 0;
  background: #efefef;
}
#font-selection li {
  min-width: 13em;
  list-style: none;
  line-height: 0;
  height: 22pt;
  display: block;
}
#font-selection legend {
  width: auto;
  color: inherit;
  padding: 0.2rem 0.7rem;
  background-color: inherit;
  border: 1px solid #6600ea;
  border-radius: 15px;
}
#font-selection label:hover {
  cursor: pointer;
}
#font-selection input[type=radio] {
  margin-right: 5pt;
}

/* Choosing fonts via CSS (no-JS fallback)*/
#toggle:checked ~ .fontchange {
  font-family: OpenDyslexicThree-Regular;
}
#toggle:checked ~ .fontchange .lang {
  font-family: OpenDyslexicThree-Bold;
}
#toggle:checked ~ .fontchange h2 {
  font-family: OpenDyslexicThree-Bold;
}

/* Media queries */
@media only screen and (min-width: 50em) {
  body {
    max-width: 900pt;
  }

  main > * {
    flex-basis: 20rem;
  }

  header {
    background-size: 100%;
  }

  .skiplink {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
  }

  #accessibility-options {
    position: absolute;
    top: 0;
    right: 0;
    font-size: inherit;
    color: #efefef;
    background-color: #6600ea;
    border: 0;
    border-bottom-left-radius: 1.5em;
    font-weight: bold;
    padding: 0 0 0 0.5em;
  }

  #font-selection {
    margin: auto;
    color: #efefef;
    background-color: #6600ea;
  }
  #font-selection legend {
    border: 0;
    padding-top: 2em;
    padding-left: 0;
    margin-left: 0;
  }
  #font-selection ul {
    -moz-columns: 1;
    columns: 1;
    color: #efefef;
    background-color: #6600ea;
    margin: 0;
  }
  #font-selection li:hover {
    background-color: #5b00d2;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: #040012;
    color: #ccc;
  }

  a {
    text-decoration: none;
    color: #2ea0ff;
  }

  a:hover,
a:focus {
    color: #b162f4;
  }

  h1 {
    color: black;
  }

  h2 {
    color: #e20cef;
  }

  ul {
    background: black;
  }

  #accessibility-options button {
    color: black;
  }

  #accessibility-options button:hover {
    background-color: #8432ee;
  }

  #font-selection {
    color: #ccc;
    background: #040012;
  }
  #font-selection ul {
    background: #040012;
  }
  #font-selection legend {
    border: 1px solid #6600ea;
  }

  footer {
    background: black;
  }
}
@media (prefers-color-scheme: dark) and (min-width: 50em) {
  #font-selection {
    color: black;
    background: #6600ea;
  }
  #font-selection ul {
    color: black;
    background: #6600ea;
  }
  #font-selection li:hover {
    background-color: #8432ee;
  }
}

/*# sourceMappingURL=style.css.map */