styles.css

:root {
    font-family: "Open Sans", sans-serif;
}

#sketch {
    display: inline-block;
    align-items: center;
    width: min-content;
    margin: 25px;
}

#sketch canvas {
    display: block;
    margin: auto;
}

#settings-bb {
    float: right;
    margin-top: 50px;
    width: calc(50% - 425px);
    margin-bottom: 50px;
}

#settings {
    width: 300px;
    height: max-content;
    text-align: center;
    padding: 20px;

    border: 1px solid black;
    background-color: #fafafa;
}

#statistics-bb {
    float: left;
    margin-top: 70px;
    width: calc(50% - 425px);
}

#statistics {
    float: right;
    width: 350px;
    height: max-content;
    text-align: center;
    padding: 20px 20px 30px;

    border: 1px solid black;
    background-color: #fafafa;
}

.settings-row, .statistics-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 0;
}

.settings-row {
    gap: 10px;
}

.statistics-row {
    gap: 20px;
}

.settings-col-left, .statistics-col-left {
    width: 50%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.settings-col-right, .statistics-col-right {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.settings-col-right {
    flex: 50%;
    width: 50%;
}

.statistics-col-right, .statistics-col-split {
    flex: 65%;
    width: 65%;
}

.settings-switch {
    display: inline-block;
    margin-left: 20px;
    width: 16px;
    height: 16px;
}

.settings-number {
    display: inline-block;
    margin-left: 20px;
    width: 50px;
}

.control-label {
    margin-bottom: 0;
}

#settings-toggle {
    display: block;
    text-align: center;
    padding: 1px 15px;
    margin: 20px auto auto;
}

#settings-content {
    position: relative;
    overflow: hidden;
    height: 450px;

    transition: height 0.25s ease-in-out;
    -webkit-transition: height 0.25s ease-in-out;
    -moz-transition: height 0.25s ease-in-out;
}

#settings-content.collapsed {
    height: 290px;
}

#basic-settings, #advanced-settings {
    position: absolute;
    width: 100%;
    left: 0;

    transition: left 0.25s ease-in-out;
    -webkit-transition: left 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out;
}

#basic-settings.collapsed {
    left: -300px;
}

#basic-settings .settings-row {
    padding: 5px 0;
}

#advanced-settings .settings-row {
    padding: 5px 0;
}

#advanced-settings.collapsed {
    left: 300px;
}

#advanced-settings label {
    font-size: 85%;
}

#advanced-settings .settings-number, #advanced-settings .settings-switch {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
}

#advanced-settings .settings-switch {
    height: 0.9rem;
}

#advanced-settings .settings-number {
    height: 1.4rem;
    font-size: 0.85rem;
}

#advanced-settings .settings-col-left {
    flex: 85%;
}

#advanced-settings .settings-col-right {
    flex: 35%;
}

.statistics-col-left, .statistics-col-right, .statistics-col-split {
    /*padding: 0 10px;*/
}

.statistics-number {
    font-family: monospace;
    font-size: 1.1rem;
}

.statistics-col-split {
    display: flex;
    justify-content: center;
    align-items: center;
}

.statistics-split-right {
    flex: 20%;
    text-align: right;
    color: #555;
}

.statistics-split-right > .statistics-number {
    display: inline-block;
    font-size: 0.9rem;
    white-space: nowrap;
}

.statistics-positive {
    color: green;
}

.statistics-negative {
    color: red;
}

#replay-btn-div {
    position: absolute;
    left: calc(50% + 195px);
    top: 400px;
    width: 100px;
}

#replay-btn {
    visibility: hidden;
}

@media screen and (max-width: 1575px) {
    #statistics-bb {
        float: right;
        margin-top: 0;
    }

    #settings, #statistics {
        float: left;
    }

    #settings-bb, #statistics-bb {
        width: 36%;
    }

    #sketch {
        float: left;
        margin-left: 25px;
        width: 60%;
    }

    #replay-btn-div {
        left: calc(30% + 220px);
    }
}

@media screen and (max-width: 1330px) {
    #settings-bb, #settings, #statistics-bb, #statistics {
        float: none;
    }

    #settings-bb, #statistics-bb {
        width: min-content;
        height: min-content;
        margin: 25px auto;
    }

    #sketch {
        float: none;
        display: block;
        margin: 25px auto;
        width: 100%;
    }

    #replay-btn-div {
        left: calc(50% + 195px);
    }
}

@media screen and (max-width: 820px) {
    #replay-btn-div {
        left: 595px;
    }
}