@charset "UTF-8";
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
       appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@font-face {
  src: url("../fonts/roboto/Roboto-Regular.ttf");
  font-family: "roboto";
  font-weight: normal;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Italic.ttf");
  font-family: "roboto";
  font-weight: normal;
  font-style: italic;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Bold.ttf");
  font-family: "roboto";
  font-weight: bold;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-BoldItalic.ttf");
  font-family: "roboto";
  font-weight: bold;
  font-style: italic;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Thin.ttf");
  font-family: "roboto";
  font-weight: 100;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-ThinItalic.ttf");
  font-family: "roboto";
  font-weight: 100;
  font-style: italic;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.ttf");
  font-family: "roboto";
  font-weight: 300;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-LightItalic.ttf");
  font-family: "roboto";
  font-weight: 300;
  font-style: italic;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Medium.ttf");
  font-family: "roboto";
  font-weight: 500;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-MediumItalic.ttf");
  font-family: "roboto";
  font-weight: 500;
  font-style: italic;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Black.ttf");
  font-family: "roboto";
  font-weight: 900;
  font-style: normal;
}
@font-face {
  src: url("../fonts/roboto/Roboto-BlackItalic.ttf");
  font-family: "roboto";
  font-weight: 900;
  font-style: italic;
}
/*!
 * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype");
}
.fab,
.fa-brands {
  font-weight: 400;
}

/*!
 * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype");
}
.fas,
.fa-solid {
  font-weight: 900;
}

.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
}

.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular {
  font-family: "Font Awesome 6 Free";
}

.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands";
}

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.fa-square-twitter:before {
  content: "\f081";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-square-tumblr:before {
  content: "\f174";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-youtube-square:before {
  content: "\f431";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-0::before {
  content: "\30 ";
}

.fa-1::before {
  content: "\31 ";
}

.fa-2::before {
  content: "\32 ";
}

.fa-3::before {
  content: "\33 ";
}

.fa-4::before {
  content: "\34 ";
}

.fa-5::before {
  content: "\35 ";
}

.fa-6::before {
  content: "\36 ";
}

.fa-7::before {
  content: "\37 ";
}

.fa-8::before {
  content: "\38 ";
}

.fa-9::before {
  content: "\39 ";
}

.fa-bars::before {
  content: "\f0c9";
}

.fa-times::before {
  content: "\f00d";
}

html {
  /*Giant Font Size Bug fix */
  /* durch 100% Angabe kann die Einheit rem sinnvoll verwendet werden*/
  font-size: 100%;
  min-height: 101%;
  scroll-behavior: smooth;
}

body {
  font-family: "roboto", sans-serif;
  font-size: 1em;
  margin: 0;
  box-sizing: border-box;
}

div#wrapper {
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  box-sizing: border-box;
}

main {
  -webkit-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: 1.5rem;
  letter-spacing: 0.03rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

h4 {
  font-size: 0.75rem;
}

h1, h2, h3, h4 {
  font-weight: bold;
}

p {
  line-height: 1.4rem;
  letter-spacing: 0.03rem;
}
p a {
  color: inherit;
}

b, strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

/* basic padding and margin */
nav ul,
nav ul li {
  margin: 0;
  padding: 0;
}

/* give the menu text some space*/
nav ul li a {
  padding: 0 0.25rem;
}

div#wrapper,
header,
footer,
h2,
h1 {
  padding: 0.5rem;
}

main {
  padding-bottom: 0.5rem;
}

nav {
  font-size: 2rem;
}

nav ul {
  list-style: none;
}

header a,
nav a {
  text-decoration: none;
}

nav, nav ul, nav ul li {
  display: inline-block;
}

nav#footermenu {
  float: left;
}

nav#socialmenu {
  float: right;
}

nav::before, nav::after {
  content: "";
  display: block;
  clear: both;
}

footer nav {
  font-size: 1.5rem;
}

/* navigation */
/* colors*/
body {
  background-color: rgb(29, 15, 150);
  color: rgb(192, 192, 192);
}

div#wrapper {
  background-color: rgb(78, 8, 146);
  color: rgb(192, 192, 192);
}

main {
  background-color: rgb(78, 8, 146);
  color: rgb(192, 192, 192);
}
main a, main a:visited, main a:link {
  color: rgb(223, 223, 223);
}
main a:focus, main a:active, main a:hover {
  background-color: inherit;
  color: rgb(153, 163, 255);
}

header, footer, h1, h2, h3, h4 {
  background-color: rgb(5, 0, 10);
  color: rgb(192, 192, 192);
}

a.button_link_nach_oben, a.button_link_nach_oben:visited, a.button_link_nach_oben:link {
  background-color: darkred;
  color: rgb(192, 192, 192);
  /**/
}

a.button_link_nach_oben:hover, a.button_link_nach_oben:focus, a.button_link_nach_oben:target {
  background-color: rgb(50, 4, 94);
  color: rgb(223, 223, 223);
}

article, aside {
  background-color: rgb(50, 4, 94);
  color: rgb(223, 223, 223);
}
article a, article a:visited, article a:link, aside a, aside a:visited, aside a:link {
  color: inherit;
}

section {
  background-color: rgb(98, 19, 172);
  color: rgb(214, 214, 214);
}

section a, section a:visited, section a:link, article a, article a:visited, article a:link, aside a, aside a:visited, aside a:link {
  color: inherit;
}
section a:focus, section a:active, section a:hover, article a:focus, article a:active, article a:hover, aside a:focus, aside a:active, aside a:hover {
  background-color: inherit;
  color: rgb(153, 163, 255);
}

nav a.current-page, nav a.current-page:visited, nav a.current-page:link {
  background-color: rgb(98, 19, 172);
  color: rgb(214, 214, 214);
}
nav a, nav a:visited, nav a:link {
  background-color: darkred;
  color: rgb(192, 192, 192);
  /**/
}
nav a:hover, nav a:focus, nav a:active {
  background-color: rgb(88, 16, 88);
  color: rgb(192, 192, 192);
}

/* colors*/
/* stylistische änderungen*/
div#wrapper {
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

/* section is not in here, since that would make it very apparent if two section are directly besides each other*/
/* might decide later to remove those*/
main, header, footer, nav, h1, h2, h3, h4, header a, nav a,
nav ul, nav ul li {
  border-radius: 0.25rem;
}

section {
  display: flex;
  flex-wrap: wrap-reverse; /*so that the aside wraps to the top*/
  padding: 0.5rem 0 0.5rem 0.5rem;
}

section article {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
section article h2 {
  margin: 0;
}
section article:last-child {
  margin-bottom: 0;
}

section aside {
  padding: 0.5rem;
  margin-right: 0.5rem;
  min-width: 20%;
}
section aside a, section aside a:visited, section aside a:link {
  display: block;
}

/* classes and ids*/
.article-wrapper {
  min-width: 69%;
  margin-right: 0.5rem;
  flex-grow: 1;
}

.introduction-wrapper {
  margin-right: 0.5rem;
  flex-shrink: 1;
}

.button_link_nach_oben {
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  display: inline-block;
  text-decoration: none;
}

#siteLogo {
  width: 50px;
  height: auto;
  vertical-align: middle;
}

#siteBanner {
  /* todo: maybe use background-image here?*/
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom left;
     object-position: bottom left;
  width: 100%;
  height: 100%;
}

/* Navigation specific configurations */
/* lets make some layout */
/* youtube style video boxen */
.video-flexbox, .videos {
  background-color: rgb(98, 19, 172);
  color: rgb(214, 214, 214);
  padding: 0.25rem;
}

.video-box {
  background-color: rgb(78, 8, 146);
  color: rgb(192, 192, 192);
}
.video-box a:focus, .video-box a:active, .video-box a:hover {
  color: #dadada;
}
.video-box figure:focus, .video-box figure:active, .video-box figure:hover {
  background-color: #680bc2;
}
.video-box figure {
  padding: 0;
  margin: 0;
}
.video-box > a {
  text-decoration: none;
}
.video-box > a, .video-box > a:link, .video-box > a:visited {
  display: inline;
  background-color: darkred;
  color: rgb(192, 192, 192);
  /**/
}
.video-box video, .video-box img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: auto;
}

.video-flexbox {
  display: flex;
  flex-wrap: wrap;
}
.video-flexbox .video-box {
  border: 0.5em groove rgb(50, 4, 94);
  max-width: 500px;
  height: auto;
  margin: 0.25rem;
  display: inline-block;
}

.videos {
  border-bottom: 0.25rem solid rgb(88, 16, 88);
}
.videos .video-text {
  background-color: rgb(50, 4, 94);
  color: rgb(223, 223, 223);
  margin: 0.25rem 0.25rem 0 0.25rem;
  padding: 0 0.25rem;
}
.videos h2 {
  margin: 0;
  padding-left: 0.25rem;
}
.videos p {
  margin: 0;
  padding: 0.25rem;
}
.videos .video-flexbox {
  padding: 0;
}

/* youtube style video boxen */
/* next: schemes for video links as done by lrr*/
.playlists {
  background-color: rgb(5, 0, 10);
  color: rgb(192, 192, 192);
  padding: 0.25rem;
}
.playlists .video-box {
  border-radius: 0.5rem;
  margin: 0.25rem 0;
}
.playlists .video-box figure {
  height: 5rem;
  display: flex;
  border-radius: 0.5rem;
}
.playlists .video-box figcaption {
  padding: 0.25rem;
}
.playlists .video-box small {
  display: block;
}

.fa-twitter {
  color: #657786;
}

.fa-tumblr {
  color: #36465D;
}

.fa-youtube {
  color: #FF0000;
}

.fa-twitch {
  color: #f1f1f1;
}

#timezone,
#timezone form {
  display: inline;
}

.grid-container {
  max-width: 1024px;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
  grid-template-rows: 2em;
}
.grid-container > div {
  background-color: #2b2b2b;
  display: inline-block;
  text-align: center;
  border: 1px solid rgb(56, 56, 56);
}

.grid-container > div.currentDay {
  background-color: #7e2626;
  color: rgb(231, 231, 231);
}

.day-break {
  grid-column: 1;
  grid-column: span 9;
  grid-row: 10;
  border: 1px solid rgb(231, 231, 231);
  height: 1em;
}

#schedule-slot-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 2/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 4/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 6/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 8/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-5 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 11/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-6 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 13/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-7 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 15/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

#schedule-slot-8 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 17/span 2;
  border: 1px solid rgb(255, 255, 255);
  height: 2em;
}

.dayslot-01 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.dayslot-02 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.dayslot-03 {
  grid-column-start: 4;
  grid-column-end: 5;
}

.dayslot-04 {
  grid-column-start: 5;
  grid-column-end: 6;
}

.dayslot-05 {
  grid-column-start: 6;
  grid-column-end: 7;
}

.dayslot-06 {
  grid-column-start: 7;
  grid-column-end: 8;
}

.dayslot-07 {
  grid-column-start: 8;
  grid-column-end: 9;
}

.timeslot-10 {
  grid-row-start: 4;
}

.timeslot-09 {
  grid-row-start: 3;
}

.timeslot-17 {
  grid-row-start: 12;
}

.timeslot-18 {
  grid-row-start: 13;
}

.timeslot-20 {
  grid-row-start: 17;
}

.timesspan-02 {
  grid-row-end: span 2;
}

.timesspan-03 {
  grid-row-end: span 3;
}

.offset {
  position: relative;
  top: 1em;
}

/* div.unsighted-color {
  background-color: purple;
  border: 1px solid rgb(160, 33, 33);
  //height: 1em;
} */
.timeslot {
  position: relative;
  height: 100%;
}
.timeslot .video-box {
  border-radius: 0.25rem;
  z-index: 1000;
  height: 180px;
  width: auto;
}
.timeslot .video-box figure {
  height: 100%;
  display: flex;
}
.timeslot .video-box figure img {
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* header navigation */
.timeslot-detail {
  display: none;
  min-width: 500px;
  position: absolute;
  padding: 10px;
  background-color: inherit;
  border: 1px solid inherit;
}

div.grid-container .timeslot:hover .timeslot-detail {
  display: inline-block;
}

.top-left {
  top: 0;
  left: 0;
}

.bottom-left {
  bottom: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
}

.box-300 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box-100per {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.box-100per-rel {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid black;
}

.top-left-child-5-fine i {
  width: 90%;
  height: 90%;
  top: 2%;
  left: 2%;
}

.top-left-child-5 i {
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}

.top-left-child-2 i {
  width: 96%;
  height: 96%;
  top: 2%;
  left: 2%;
}

.helper-box-300 {
  position: relative;
  display: inline-block;
  height: 300px;
  width: 300px;
  border: 4px solid black;
}

.helper-box-80-percent {
  position: relative;
  display: inline-block;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

.translate-10 {
  transform: translateX(10%);
}

.translate-10-rev {
  transform: translateX(-10%);
}

.translate-10-180 {
  transform: translateX(10%) rotate(180degree);
}

.translate-10-rev-180 {
  transform: rotate(180degree) translateX(-10%);
}

.rotate-child-5 i {
  transform: rotateZ(5deg);
}

.rotate-child-5-top-left i {
  transform-origin: top left;
  transform: rotateZ(5deg);
}

.rotate-child-5-top-right i {
  transform-origin: top right;
  transform: rotateZ(-5deg);
}

.rotate-child-10 i {
  transform: rotateZ(10deg);
}

.rotate-45 {
  transform: rotateZ(45deg);
}

.rotate-90 {
  transform: rotateZ(90deg);
}

.rotate-135 {
  transform: rotateZ(135deg);
}

.rotate-180 {
  transform: rotateZ(180deg);
}

.rotate-225 {
  transform: rotateZ(225deg);
}

.rotate-270 {
  transform: rotateZ(270deg);
}

.rotate-315 {
  transform: rotateZ(315deg);
}

.link-cursor:hover {
  border-radius: 10px;
  background-image: linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0)), linear-gradient(rgb(219, 0, 0), rgb(219, 0, 0));
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size: 5% 30%, 30% 5%, 5% 30%, 30% 5%, 5% 30%, 30% 5%, 5% 30%, 30% 5%;
  background-repeat: no-repeat;
}

.fractal-linear-gradient {
  border-radius: 1rem;
  display: inline-block;
  position: relative;
  width: 90%;
  height: 90%;
}
.fractal-linear-gradient span {
  position: absolute;
  z-index: 5;
  display: inline-block;
  padding: 0.25rem;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}
.fractal-linear-gradient div {
  display: inline-block;
  position: relative;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}
.fractal-linear-gradient:hover, .fractal-linear-gradient:focus, .fractal-linear-gradient:active, .fractal-linear-gradient:hover span, .fractal-linear-gradient:focus span, .fractal-linear-gradient:active span {
  background-color: rgb(88, 16, 88);
  color: rgb(192, 192, 192);
}

.fractal-linear-gradient,
.fractal-linear-gradient div {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
  background-size: 90% 10%, 10% 90%, 90% 10%, 10% 90%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
}

.fractal-linear-gradient:hover,
.fractal-linear-gradient:hover div {
  background-image: linear-gradient(to right, rgba(70, 49, 49, 0.7), rgba(255, 0, 0, 0.7)), linear-gradient(to bottom, rgba(70, 49, 49, 0.7), rgba(255, 0, 0, 0.7)), linear-gradient(to left, rgba(70, 49, 49, 0.7), rgba(255, 0, 0, 0.7)), linear-gradient(to top, rgba(70, 49, 49, 0.7), rgba(255, 0, 0, 0.7));
}

.linear-gradient-4 {
  background-image: linear-gradient(to right, purple, blue), linear-gradient(to bottom, purple, blue), linear-gradient(to left, purple, blue), linear-gradient(to top, purple, blue);
  background-size: 90% 10%, 10% 90%, 90% 10%, 10% 90%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
}

.linear-gradient-5 {
  background-image: linear-gradient(to right, purple, blue), linear-gradient(to top, purple, blue), linear-gradient(to left, purple, blue), linear-gradient(to bottom, purple, blue);
  background-size: 90% 10%, 10% 90%, 90% 10%, 10% 90%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
}

.conic-gradient-3 {
  background-image: conic-gradient(rgb(110, 42, 62), rgb(17, 17, 39), rgba(0, 85, 50, 0.466)), conic-gradient(rgb(110, 42, 62), rgb(17, 17, 39), rgba(0, 85, 50, 0.466)), conic-gradient(rgb(110, 42, 62), rgb(17, 17, 39), rgba(0, 85, 50, 0.466)), conic-gradient(rgb(110, 42, 62), rgb(17, 17, 39), rgba(0, 85, 50, 0.466));
  background-size: 90% 10%, 10% 90%, 90% 10%, 10% 90%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
}

.container {
  display: flex;
}

.parent-container > div i,
.parent-container > div:not(div:first-of-type) {
  position: absolute;
}

.parent-container,
.parent-container div,
.parent-container i {
  display: inline-block;
}

.parent-container-300 > div {
  width: 300px;
  height: 300px;
}

.parent-container-full > div {
  width: 100%;
  height: 100%;
}

.green-link-color-scheme {
  background-color: rgb(11, 71, 11);
  color: rgb(206, 206, 206);
}
.green-link-color-scheme a:focus, .green-link-color-scheme a:active, .green-link-color-scheme a:hover {
  color: lightgray;
}
.green-link-color-scheme figure:focus, .green-link-color-scheme figure:active, .green-link-color-scheme figure:hover {
  background-color: #0c500c;
}

.dark-green-link-color-scheme {
  background-color: rgb(14, 39, 14);
  color: rgb(206, 206, 206);
}
.dark-green-link-color-scheme a:focus, .dark-green-link-color-scheme a:active, .dark-green-link-color-scheme a:hover {
  color: lightgray;
}
.dark-green-link-color-scheme figure:focus, .dark-green-link-color-scheme figure:active, .dark-green-link-color-scheme figure:hover {
  background-color: #112f11;
}

.blue-link-color-scheme {
  background-color: rgb(34, 53, 82);
  color: rgb(206, 206, 206);
}
.blue-link-color-scheme a:focus, .blue-link-color-scheme a:active, .blue-link-color-scheme a:hover {
  color: lightgray;
}
.blue-link-color-scheme figure:focus, .blue-link-color-scheme figure:active, .blue-link-color-scheme figure:hover {
  background-color: #253a59;
}

.dark-blue-link-color-scheme {
  background-color: rgb(10, 21, 37);
  color: rgb(206, 206, 206);
}
.dark-blue-link-color-scheme a:focus, .dark-blue-link-color-scheme a:active, .dark-blue-link-color-scheme a:hover {
  color: lightgray;
}
.dark-blue-link-color-scheme figure:focus, .dark-blue-link-color-scheme figure:active, .dark-blue-link-color-scheme figure:hover {
  background-color: #0c1a2d;
}

.yellow-link-color-scheme {
  background-color: rgb(84, 90, 18);
  color: rgb(243, 243, 243);
}
.yellow-link-color-scheme a:focus, .yellow-link-color-scheme a:active, .yellow-link-color-scheme a:hover {
  color: #f8f8f8;
}
.yellow-link-color-scheme figure:focus, .yellow-link-color-scheme figure:active, .yellow-link-color-scheme figure:hover {
  background-color: #5c6314;
}

.gold-link-color-scheme {
  background-color: rgb(61, 65, 13);
  color: rgb(206, 206, 206);
}
.gold-link-color-scheme a:focus, .gold-link-color-scheme a:active, .gold-link-color-scheme a:hover {
  color: lightgray;
}
.gold-link-color-scheme figure:focus, .gold-link-color-scheme figure:active, .gold-link-color-scheme figure:hover {
  background-color: #454a0f;
}

.silver-link-color-scheme {
  background-color: rgb(72, 73, 65);
  color: rgb(206, 206, 206);
}
.silver-link-color-scheme a:focus, .silver-link-color-scheme a:active, .silver-link-color-scheme a:hover {
  color: lightgray;
}
.silver-link-color-scheme figure:focus, .silver-link-color-scheme figure:active, .silver-link-color-scheme figure:hover {
  background-color: #4d4e46;
}

.primary-link-color-scheme {
  background-color: rgb(78, 8, 146);
  color: rgb(192, 192, 192);
}
.primary-link-color-scheme a:focus, .primary-link-color-scheme a:active, .primary-link-color-scheme a:hover {
  color: #cdcdcd;
}
.primary-link-color-scheme figure:focus, .primary-link-color-scheme figure:active, .primary-link-color-scheme figure:hover {
  background-color: #5b09aa;
}

.banner {
  width: 100%;
  height: 2.5rem; /*the size of the banner png*/
  margin-bottom: 0.5rem;
}
.banner a {
  padding: 0;
  margin: 0;
  line-height: 0;
}

.lienearGradientPrideTransToLesbian {
  background-image: linear-gradient(-90deg, rgb(5, 0, 10), rgb(173, 37, 0) 5%, rgb(74, 168, 204) 80%), linear-gradient(-90deg, rgb(5, 0, 10), rgb(208, 126, 71) 5%, rgb(200, 138, 150) 80%), linear-gradient(-90deg, rgb(5, 0, 10), white 5%, white 80%), linear-gradient(-90deg, rgb(5, 0, 10), rgb(172, 79, 134) 5%, rgb(200, 138, 150) 80%), linear-gradient(-90deg, rgb(5, 0, 10), rgb(133, 2, 79) 5%, rgb(74, 168, 204) 80%);
  background-size: auto 0.5em, auto 0.5em, auto 0.5em, auto 0.5em;
  background-position: 0 0, 0 0.5em, 0 1em, 0 1.5em, 0 2em;
  background-repeat: no-repeat;
}

.pride-flag-linear-gradient {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left, rgb(173, 37, 0), rgb(74, 168, 204)), linear-gradient(to left, rgb(208, 126, 71), rgb(200, 138, 150)), linear-gradient(to left, white, white), linear-gradient(to left, rgb(172, 79, 134), rgb(200, 138, 150)), linear-gradient(to left, rgb(133, 2, 79), rgb(74, 168, 204));
  background-size: 100% 20%, 100% 20%, 100% 20%, 100% 20%, 100% 20%;
  background-position: 0 0, 0 25%, 0 50%, 0 75%, 0 100%; /* Where is the background image anchored */
  background-repeat: no-repeat; /* Only show the image once, otherwise it will be, well, repeated over the full space! */
}

.transbian-gradient > :nth-child(odd), .transbian-gradient > :nth-child(odd) i,
.full-lesbian-gradient > div, .full-lesbian-gradient > div i,
.lesbian-single, .lesbian-single i {
  background-image: linear-gradient(to right, rgb(173, 37, 0), rgb(208, 126, 71), rgba(255, 255, 255, 0.705), rgb(172, 79, 134), rgb(133, 2, 79));
}

.transbian-gradient > :nth-child(even), .transbian-gradient > :nth-child(even) i,
.full-trans-gradient > div, .full-trans-gradient > div i,
.transgender-single, .transgender-single i {
  background-image: linear-gradient(to right, rgb(74, 168, 204), rgb(200, 138, 150), rgba(255, 255, 255, 0.705), rgb(200, 138, 150), rgb(74, 168, 204));
}

.uniform-bg-image-midsize > div, .uniform-bg-image-midsize > div i,
.bg-image-midsize, .bg-image-midsize i {
  background-size: 42% 7%;
  background-repeat: no-repeat;
}

.bg-image-top,
.bg-image-top i {
  background-position: top;
}

.bg-image-top-left,
.bg-image-top-left i {
  background-position: top left;
}

.bg-image-top-right,
.bg-image-top-right i {
  background-position: top right;
}

.flag-container {
  width: 100%;
  height: 200px;
  border: 1px solid black; /* a little border, so to better see what happens!*/
}

.code-space {
  background-color: rgb(5, 0, 10);
  color: rgb(192, 192, 192);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.extra-white-space {
  white-space: pre;
}

.line-of-code {
  margin: 0;
  display: block;
}

.comment {
  color: #00C700;
}

.html-code {
  color: #0092c7;
}

.css-code {
  color: rgb(214, 214, 25);
}

.code-attribute {
  color: rgb(125, 207, 240);
}

.code-value {
  color: rgb(238, 155, 0);
}

.css-functions {
  color: rgb(245, 245, 139);
}

.css-mixins {
  color: #DE82DE;
}

.fifty-percent-w {
  width: 50%;
  height: 200px;
  background-color: #ccc;
}

.float-left {
  float: left;
}
.float-left::before, .float-left::after {
  content: "";
  display: block;
  clear: both;
}

.float-right {
  float: right;
}
.float-right::before, .float-right::after {
  content: "";
  display: block;
  clear: both;
}

.clear-fix::before, .clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

.p-small {
  padding: 0.25rem;
}

.p-medium {
  padding: 0.5rem;
}

.medium-gap {
  gap: 0.5rem;
}

.border-solid {
  border: 1px solid black;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.24);
}

.dropdown-navi {
  display: none;
  list-style: none;
  min-width: 180px;
  position: absolute;
  padding-left: 0.25rem;
  margin: 0;
  border: 2px solid white;
  border-radius: 0.5rem;
}
.dropdown-navi ul, .dropdown-navi ul li {
  display: block;
  margin: 0;
}

.dropdown:hover .dropdown-navi {
  display: block;
}

.dropdown-btn {
  margin: 0;
  padding: 0;
  border: none;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.dropdown-btn > .fa-angle-down {
  transform: rotate(-90deg);
  transition: transform 0.2s linear;
}

.dropdown:hover .dropdown-btn > .fa-angle-down {
  transform: rotate(0deg);
}

.parent-container,
.parent-container > div:first-of-type {
  position: relative;
}

#open,
#close {
  display: none;
}

/* breakpoints*/
/* todo: display this different, another burgermenu?*/
@media (min-width: 1024px) {
  section {
    flex-wrap: nowrap;
  }
  section aside {
    max-width: 30%;
  }
}
/* on smaller tablet screens, the aside is mostly in the way*/
@media (max-width: 768px) {
  .article-wrapper {
    /* we want to make sure that the articles don't go over the section part, since that would look bad*/
    min-width: 100px;
  }
  aside {
    display: none;
  }
}
/* Iphone 11 as reference size*/
@media (max-width: 375px) {
  #burgermenu ul,
  #burgermenu a#open:target {
    display: none;
  }
  #burgermenu a#open,
  #burgermenu a#open:target ~ #close {
    display: inline-block;
  }
  #burgermenu a#open:target ~ ul {
    display: block;
  }
}

a[href="https://twitter.com/VeCrimson"] {
      display: none;
    }