FccSimon.css

body {
    font-family: Gill Sans, sans-serif;
    background-color: #999;
    margin: 0;
    cursor: default; }

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center; 
    justify-content: center; }

.block {
    display: block; }

.inline {
    margin: 4vmin;
    font-size: 3vmin;
    display: inline; }

.wrapcolors {
    box-shadow: 0 0 8vmin #999;
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%; }

.btn {
    cursor: pointer;
    width: 50vmin;
    height: 50vmin; }

.green {
    background-color: lime;
    opacity: 0.4;
    box-shadow: inset 0 0 0 2vmin black;
    border-top-left-radius: 100%; }

.red {
    background-color: red;
    opacity: 0.4;
    box-shadow: inset 0 0 0 2vmin black;
    border-top-right-radius: 100%; }

.yellow {
    background-color: yellow;
    opacity: 0.4;
    box-shadow: inset 0 0 0 2vmin black;
    border-bottom-left-radius: 100%; }

.blue {
    background-color: blue;
    opacity: 0.4;
    box-shadow: inset 0 0 0 2vmin black;
    border-bottom-right-radius: 100%; }

.pushed {
    opacity: 1;
    box-shadow: inset 0 0 0 2vmin #595959; }

.controls {
    position: absolute;
    top: 25vmin;
    left: calc(50% - 25vmin);
    box-shadow: inset 0 0 0 3vmin #595959;
    background-color: #888;
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%; 
    flex-wrap: wrap; 
    text-align: center; 
    align-content: center; }

.logo {
    font-family: Impact, fantasy;
    font-size: 8vmin; 
    flex: 0 0 100%; }

.button {
    box-shadow: .1vmin .1vmin .1vmin .2vmin black;
    cursor: pointer;
    margin: 0 auto;
    background-color: #777;
    width: 3vmin;
    height: 3vmin;
    border-radius: 50%; }

.lcd {
    font-family: Andale Mono, monospace;
    color: rgba(255,0,0,0.8);
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: inset .1vmin .1vmin .1vmin .1vmin black;
    background-color: #777;
    width: 6vmin;
    height: 3vmin; }

.start-button:active, .strict-button:active {
    box-shadow: 0 0 .1vmin .1vmin black; }

.power-label {
    font-size: 3vmin; }

.switch-holder {
    box-shadow: inset .1vmin .1vmin .1vmin .1vmin black;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #777;
    width: 98%;
    height: 2vmin; }

.power-switch {
    box-shadow: inset 0 0 .2vmin .1vmin white;
    cursor: pointer;
    width: 50%;
    border-radius: 5px;
    height: 100%;
    background-color: black; }

.button-on {
    background-color: rgba(255,0,0,0.5); }

.margin-toggle {
    margin-left: 50%; }