#myCanvas {
    background-color: black;
    border: 2px solid black;
    margin-bottom: 5px;
}

h1 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 0px;
}

h2 {
    text-align: center;
    padding-right: 5px;
    /* border: 2px solid black; */
}

h3 {
    margin: auto;
}

h4 {
    margin-top: 10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    height: 30px;
}

.containerInput {
    display: flex;
    /* flex-wrap: wrap; */
    height: 30px;
    margin-left: 10px;
}

.align {
    align-items: center;
    width: 80px;
}

#rules {
    min-width: 200px;
    max-width: 200px;
}

.noBotMargin {
    margin-bottom: 0px;
}

.noTopMargin {
    margin-top: 0px;
}

input {
    width: 20px;
    height: 20px;
    margin: 0 5 0 5;
    /* padding-left: 6px; */
    border: none;
    background: rgb(220, 220, 220);
    box-shadow: 1px 1px 0px 1px #888888;
}

.containerInput input {
    padding-left: 6px;
}

.containerInput input:hover {
    transition-duration: 0.4s;
    box-shadow: 1px 1px 0px 1px #888888;
    width: 22px;
    height: 22px;
    padding-top: 1px;
    padding-left: 6px;
}

.resetButton {
    margin-left: 25px;
}

.botSpace {
    margin-bottom: 25px;
}

.slider {
    width: auto;
    margin-top: 8px;
    margin-bottom: 0px;
}

#deadMessage {
    min-height: 12px;
    color: red;
    font-size: 13px;
    display: none;
}

#sliderDivs {
    display: flex;
}

.sliderDiv {
    margin-right: 20px;
}

.thinLine {
    border-top: .5px solid black;
    width: 90%
}

button {
    background: rgb(170, 170, 170);
    border: none;
    color: black;
} 

button:hover {
    cursor: pointer;
    background: rgb(150, 150, 150);
}

button:after {    
    background: none repeat scroll 0 0 transparent;

    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: relative;
    background: black;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

button:hover:after { 
    width: 100%; 
    left: 0; 
}

.buttonResize {
    width: 80px;
    margin-left: 10px;
    font-size: 14px;
}

#buttonsAndSliders {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* border: 2px solid black; */
}


body {
    min-width: 1220px;
    margin: 0 20 0 20;
    background: rgb(200, 200, 200)
}

.spaced {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.sliderDiv * {
    text-align: center;
}

#buttons {
    float: left
}

#iterations {
    display: flex;
}

#ticks {
    margin-left: 10px;
}

select {
    -webkit-appearance: menulist-button;
    height: 23px;
    background: rgb(170, 170, 170)
}