body {
    font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
    margin: 12px 0;
}

.robot-container {
    position: relative;
    text-align: center;
    cursor: pointer;
}

    .robot-container img {
        width: 100%;
    }

.circles-container, .number-container {
    width: 85%;
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 5px 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 4px grey;
    background: #eee;
    transition: all 0.5s ease-in-out;
}

    .circles-container.dark {
        background: #000;
        transition: all 0.5s ease-in-out;
    }

.circle {
    display: block;
    width: 24px;
    height: 24px;
    margin: 4px;
    border-radius: 50%;
    background: #000;
}

.binary-container {
    height: 34px;
}

    .binary-container .number-container {
        position: static;
    }

.strikethrough {
    position: relative;
}

    .strikethrough:before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        right: 0;
        border-top: 1px solid;
        border-color: black;
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }