/*
* Base styles 
*/
body{
    font-family: sans-serif;
    padding-bottom: 5em;
}
h1{
    margin-top: 0;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
label{
    font-weight: bold;
    margin-right: 4px;
}
.radio-label{
    font-weight: normal;
}
.row-label{
    display: inline-block;
    min-width: 9em;
}
input[type="radio"]{
    margin-right: 1em;
}
canvas{
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.container{
    max-width: 800px;
    margin: 0 auto;
}
.source-link{
    padding: 1em 0 2em;
    text-align: right;
}
/*Can't use flex justify-content: center, or canvas might go off left side of page*/
.canvas-container{
    text-align: center;
}
.hint{
    color: #777;
}
.controls-container > div{
    margin-top: 1em;
}

/* 
* Loading message 
*/
.loading .controls-container{
    display: none;
}
.loading-message{
    display: none;
}
.loading .loading-message{
    display: initial;
}