/* Stylesheet für Webseite */
input[type='button'] {
    background-color: #A5C261;
    border-radius: 0.46rem;
    box-shadow: 0.2rem 0.2rem 0.3rem #555555;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    margin-left: 1.1rem;
    padding: 1.3rem 1.3rem;
}

input[type='button']:hover {
    background-color: #657e2a;
}

/* ul.navigationbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li a {
    text-align: center;
    padding: 14px 16px;
} */
li a:hover {
    color: black;
}

/* header {
   z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
} */
body {
    padding-bottom: 1rem;
    color: var(--bs-body-color);
}

p {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.8rem;
    font-optical-sizing: auto;
    word-break: break-word;
}

h1 {
    text-align: center;
    font-family: "Broadway", sans-serif;
    font-size: 3rem;
    font-optical-sizing: auto;
    color: darkblue;
    max-width: 100%;
    word-break: break-word;
}

h2 {
    text-align: center;
    font-family: "Arial Rounded MT Bold", serif;
    font-size: 2.7rem;
    font-optical-sizing: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    word-break: break-word;
}

h3 {
    font-family: "Arial Rounded MT Bold", serif;
    font-size: 2.4rem;
    font-optical-sizing: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    word-break: break-word;
}

h4, h5, h6 {
    font-family: "Arial Rounded MT Bold", serif;
    font-size: 2rem;
    font-optical-sizing: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    word-break: break-word;
}

.ghost {
    display: none;
}

.tablePermutation {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 30rem;
    display: block;
    overflow-x: auto;
}

.tablePermutation td {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.tablePermutation th {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.col1TablePermutation {
    width: 14rem
}

.col2TablePermutation {
    width: 8rem
}

.col3TablePermutation {
    width: 8rem
}

.tableASCIINonPrintable {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 44rem;
    display: block;
    overflow-x: auto;
}

.tableASCIINonPrintable td {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.tableASCIINonPrintable th {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

#col1TableASCIINonPrintable {
    width: 11rem
}

#col2TableASCIINonPrintable {
    width: 11rem
}

#col3TableASCIINonPrintable {
    width: 11rem
}

#col4TableASCIINonPrintable {
    width: 11rem
}

.tableASCIIPrintable {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 44rem;
    display: block;
    overflow-x: auto;
}

.tableASCIIPrintable td {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.tableASCIIPrintable th {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

#col1TableASCIIPrintable {
    width: 11rem
}

#col2TableASCIIPrintable {
    width: 11rem
}

#col3TableASCIIPrintable {
    width: 11rem
}

#col4TableASCIIPrintable {
    width: 11rem
}

.tableXOR {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 40rem;
    display: block;
    overflow-x: auto;
}

.tableXOR td {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.tableXOR th {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.col1TableXOR {
    width: 10rem
}

.col2TableXOR {
    width: 10rem
}

.col3TableXOR {
    width: 10rem
}

.col4TableXOR {
    width: 10rem
}

.col5TableXOR {
    width: 10rem;
}

.tableOneDimensionalArray {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 21rem;
    display: block;
    overflow-x: auto;
}

.tableOneDimensionalArray th {
    font-family: "Droid Sans Mono Dotted", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0.625rem 0.3125rem;
    border-style: solid;
    border-width: 0.0625rem;
    overflow: hidden;
    word-break: normal;
    text-align: center;
}

.col1TableOneDimensionalArray {
    width: 2.5rem
}

.col2TableOneDimensionalArray {
    width: 2.5rem
}

.col3TableOneDimensionalArray {
    width: 2.5rem
}

.col4TableOneDimensionalArray {
    width: 2.5rem
}

.col5TableOneDimensionalArray {
    width: 2.5rem
}

.col6TableOneDimensionalArray {
    width: 2.5rem
}

.col7TableOneDimensionalArray {
    width: 2.5rem
}

code {
    background-color: #b6b6be;
    font-family: Fixedsys, "Courier New", monospace;
    text-align: left;
}

samp {
    background-color: #b6b6be;
    text-align: left;
}

.yellow-code_html {
    color: #E8BF6A;
}

.green-code_html {
    color: #A5C261;
}

.green-code_javascript {

}

.yellow-code_javascript {
    color: #FFC66D;
}

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 32rem;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}

/* rtl:end:ignore */
/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

.first-divider {
    margin: 2rem 0;
}

.last-divider {
    margin: 2rem 0;
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
    letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

.form-control-dark {
    border-color: var(--bs-gray);
}

.form-control-dark:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

.text-small {
    font-size: 85%;
}

.dropdown-toggle {
    outline: 0;
}

.middle {
    text-align: center;
!important;
    vertical-align: middle;
!important;
}

.carousel-img {
    font-size: 2rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.carousel-text-bright {
    color: #ff0269;
    font-size: 3rem;
    font-family: "Britannic Bold", "Arial Rounded MT Bold", sans-serif;
}

.carousel-text-dark {
    color: #ff0269;
    font-size: 3rem;
    font-family: "Britannic Bold", "Arial Rounded MT Bold", sans-serif;
}

.carousel-header {
    color: #073e90;
    word-break: break-word;
}

@media (max-width: 440px) {
    .carousel-header {
        font-size: 2rem;
    }
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-light {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #101214;
}

.btn-light:hover {
    background-color: #86b7fe;
    border-color: #86b7fe;
    color: #101214;
}

.carousel-control-next {
    color: #4f5050;
}

@media (min-width: 1300px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-fluid {
        max-width: 1240px;
    }
}

.background-scroll {
    background-attachment: fixed;
}

.evolution_div {
    margin-top: 1rem;
}

figure {
    text-align: center;
}

figcaption {
    display: inline-block;
    text-align: left;
}

.biggermargin {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.bigmargin-top {
    margin-top: 5rem;
}

.biggermargin-bottom {
    margin-bottom: 2rem;
}

.biggermargin-top {
    margin-top: 3rem;
}

input, select, textarea, button, li {
    font-size: 1.8rem;
    font-family: inherit;
}

textarea.normal {
    width: 20rem;
    height: 5rem;
}

textarea {
    background-color: #f3f3f5;
    overflow-y: scroll;
    width: 100%;
    height: 15rem;
    font-weight: lighter;
    border-radius: 0.3rem;
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
}


textarea::-webkit-scrollbar {
    -webkit-appearance: none;
    width: auto;
    height: auto;
}

textarea::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    border: 1rem solid gray;
    background-color: rgba(0, 0, 0, .5);
}

label {
    display: block;
    color: darkslategray;
    font-style: oblique;
    font-size: 1.8rem;
    font-family: inherit;
}

.nav-list {
    font-size: inherit;
}

.p-foot {
    font-size: 1.3rem;
}

.p-featurette {
    font-size: 1.5rem;
    font-weight: 300;
}

.language-css, .language-html, .language-javascript {
    font-size: 1.7rem;
    font-family: "Source Code Pro", Consolas, "Courier New", serif;
}

/*Smartphone navbar*/
/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler .fa-bars {
    color: #fff;
}

/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler .fa-bars {
    color: #4f4f4f;
}

/* Color of the navbar AFTER scroll */
.navbar-scrolled {
    background-color: #fff;
}

/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
}

main {
    padding-top: 5rem;
}

.padding-top-4 {
    padding-top: 4rem;
}