/* ---------------------------------------------- */
/*    By Jeffrey Bissel                           */
/*        bissel@uni-bremen.de                    */
/*        jeffrey@bissel-art.de                   */
/* ---------------------------------------------- */

html, body {
    width: 100%;
    height: 100%;

    font-family: "Liberation Serif", Liberation, serif;
    font-size: 1em;
    font-weight: 400;
} 

body {
    padding: 0; margin: 0; border: 0;
    background-color: rgb(40, 40, 40);

    display: grid;
    grid-template-columns: 1fr [content-start] auto [content-end] 1fr;
    grid-template-rows: 1fr [content-start] auto [content-end] 1fr;
} 

canvas {
    grid-area: content;
}

.inputs {
    grid-row: 1;
    grid-column: 2 / -2;
    max-width: 600px;
    display: grid;
    padding-top: 1.5em;
    padding-bottom: 1em;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 2em);

    color: #CCC;
}

.inputs > span {
    padding-left: 1em;
    line-height: 2.3em;
    vertical-align: middle;
}
.inputs > span > span {
    color: goldenrod;
}

.button_wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

input {
    padding: 0;
    margin: 0;
    max-width: 100%;
}


/* ---------------------------------------------- */
/*           Range Slider                         */
/* ---------------------------------------------- */

/* http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */

input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;

    /* fix for FF unable to apply focus style bug  */
    border: 1px solid transparent; 

    /*required for proper track sizing in FF*/
    width: 95%;

    margin-left: 2.5%;
    margin-right: 2.5%;
}

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track,
input[type=range]::-ms-track {
    width: 100%;
    height: .35em;
    background: #ddd;
    border: none;
    border-radius: .1em;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: .35em;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-ms-track {
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: .1em;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: .1em;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -.4em;

    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -.4em;

    cursor: pointer;
}

input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    border: none;
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -.4em;

    cursor: pointer;
}

input[type=range]:hover::-webkit-slider-runnable-track,
input[type=range]:hover::-moz-range-track {
    background: #ccc;
}

/* ---------------------------------------------- */
/*           Button                               */
/* ---------------------------------------------- */

button {
    width: 4em;
    height: 2em;

    color: #ddd;

    line-height: 2em;
    text-align: center;

    background-color: rgba(100,100,100,.25);
    /* border: rgba(0,0,0,.25) .1em solid; */
    border: none;
    border-radius: .3em;


    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
}

button:hover {
    background-color: rgba(100,100,100,.5);
    cursor: pointer;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}