body {
    background-color: #333;
    color: #aaaaaa;
    font-family: sans-serif;
    margin-left: 2.1rem;
    margin-right: 2.1rem;
}

.wrapper {
    font-size: 20px;
    padding: 5px 12px;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #aaaaaa;
}

h3 {
    font-size: 20px;
}

input {
    padding: 0.2rem 0.5rem;
}

::placeholder {
    opacity: 1;
    transition: opacity 500ms;
    color: #555;
}

::-webkit-input-placeholder {
    opacity: 1;
    transition: opacity 500ms;
    color: #555;
}

:-ms-input-placeholder {
    opacity: 1;
    transition: opacity 500ms;
    color: #555;
}

input:focus {
    outline: none;
}

label[for="funktion"] {
    font-weight: bold;
}

:focus::placeholder { opacity:0  }

.wrapperVonBis {
    position: relative;
    display: grid;
    width: 10rem;
}

label[for="IntervalVon"] {
    display: inline-grid;
    grid-column: 1;
    grid-row: 1;
}

#IntervalVon {
    display: inline-grid;
    grid-column: 2;
    grid-row: 1;
    width: 5rem;
}

label[for="IntervalBis"] {
    display: inline-grid;
    grid-column: 1;
    grid-row: 2;
}

#IntervalBis {
    display: inline-grid;
    grid-column: 2;
    grid-row: 2;
    width: 5rem;
}

#anzahlSchritte {
    width: 20rem;
    transform: translateY(0.4rem);
}

#output {
    position: relative;
    font-size: 20px;
    font-weight: 300;
    color: #aaaaaa;
    width: 100%;
}

#anzahlSchritteOp {
    position: relative;
    width: 5rem;
    text-align: center;
}

#graph {
    position: absolute;
    width: 90%;
    transform: translateX(-50%);
    left: 50%;
    z-index: 10;
}

#balken {
    position: absolute;
    width: 90%;
    transform: translateX(-50%);
    left: 50%;
    z-index: 11;
}