style.css

/***** Externe Elemente  *****/


h1 {
    margin-top: 100px;
    text-align: center;

}

h5 {
    margin-left: 5%;
    text-align: justify;
}

p {
    font-size: 20pt;
    margin-top: 2%;
    text-align: center;
}


/*******************************************/

/******* Abakus - Interne Elemente ********/

/* Haupt-Fenster */

.abacus-frame {
    position: relative;
    border-left: 50px solid burlywood;
    border-right: 50px solid burlywood;
    background-color: snow;
    border-radius: 20px;
}

/* Linien */

.lines {
    height: 2px;
    background-color: black;
    margin-bottom: 12%;
}



/* Kugeln */

.balls {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-top: -20px;
    float: left;
    cursor: pointer;

}

/* Kugeln - die Kinder von Lines */

.lines:nth-child(5) .balls {
    background-color: blue;
}

.lines:nth-child(4) .balls {
    background-color: green;
}

.lines:nth-child(3) .balls {
    background-color: darkgoldenrod;
}

.lines:nth-child(2) .balls {
    background-color: indianred;
}

.lines:nth-child(1) .balls {
    background-color: purple;
}


/* Zähler */

.counter {
    font-weight: bold;
}

/* Verschieben nach Position "rechts/links" mit Animation */

.right {
    transform: translateX(618px);
    transition: all 1.5s ease-in-out;
}

.left {
    transform: translateX(0%);
    transition: all 1.5s ease-in-out;
}