@import url('../fonts/lcd-bold.css');

@keyframes blink {  
    0% { opacity: 1; }
    100% { opacity: 0.1; }
}
@-webkit-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0.1; }
}

html,body {
    overflow: hidden;
    font-family: verdana, sans-serif;
    font-size: 12px;
}
body {
    padding: 50px;
    padding-top: 100px;
    background-color: #000000;
    color: white;
}
p {
    margin: 0;
}
.clock {
    font-size: 340px;
    font-family: lcdbold;
    text-shadow: 0.05em 0.05em 0em black;
    padding: 0.1em;
    position: relative;
    text-align: center;
}
.stopped{
    color: red;
}
.paused,
.armed {
    color: yellow;
}

/* blinking */
.paused {
    -webkit-animation: blink 0.5s ease infinite alternate;
    -moz-animation: blink 0.5s ease infinite alternate;
    -ms-animation: blink 0.5s ease infinite alternate;
    -o-animation: blink 0.5s ease infinite alternate;
    animation: blink 0.5s ease infinite alternate;
}
.started {
    color: lime;
}
body.controls {
    padding: 8px;
}
fieldset {
    border: 1px solid gray;
    padding: 8px;
    margin: 8px;
    border-radius: 2px;
}
fieldset p {
    margin: 8px 0;
}
fieldset label {
    display: inline-block;
    width: 75px;
}
button {
    background-color: #333;
    padding: 8px;
    border: 1px outset silver;
    color: #EEE;
    border-radius: 2px;
}
input {
    padding: 4px;
    border: 1px inset gray;
    background-color: #333;
    color: #EEE;
    border-radius: 2px;
}
.arm, .start, .stop {
    color: #333;
}
.arm {
    background-color: orange;
}
.start {
    background-color: lime;
}
.stop {
    background-color: crimson;
}