form label {
    font-weight: bold;
    margin-left: 8px;
}

.controls {
    margin: 16px;
}

.controls form {
    display: inline;
}

.controls a, .controls a:visited {
    color: #0000FF;
    text-decoration: none;
}

.controls a:hover, .controls a:active {
    text-decoration: underline;
}

.controls {
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding-bottom: 8px;
    display: none;
    clear: both;
}

.microbit-svg {
  display: block;
  margin: 1em auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
  width: 400px;
  height: 300px;
  svg: {
    display: block;
    width: 100%;
    height: auto;
  }
}

.microbit-embed {
  display: block;
  position: absolute;
  width: 300px;
  svg: {
    display: block;
    width: 100%;
    height: auto;
  }
}

.strawberry {fill: #ff0000;}
.orange {fill: #ff8000;}
.banana {fill: #ffff00;}
.lime {fill: #80ff00;}
.mint {fill: #00ff00;}
.peppermint {fill: #00ff80;}
.ice {fill: #00ffff;}
.stilton {fill: #0080ff;}
.blueberry {fill: #0000ff;}
.woad {fill: #8000ff;}
.lychee {fill: #ff0080;}
.milk {fill: #cccccc;}
.truffle {fill: #222222;}
.chocolate {fill: #8b4513;}

#leds rect {
    fill: #111;
}
.on-1,.on-2,.on-3,.on-4,.on-5,.on-6,.on-7,.on-8,.on-9,.on { fill: red !important; }
.on-1 { opacity: 0.2; }
.on-2 { opacity: 0.3; }
.on-3 { opacity: 0.4; }
.on-4 { opacity: 0.5; }
.on-5 { opacity: 0.6; }
.on-6 { opacity: 0.7; }
.on-7 { opacity: 0.8; }
.on-8 { opacity: 0.9; }
.on-9 { opacity: 1; }

.microbit-svg .crocodile {
  display: block;
  width: 1em;
  height: 2.1em;
  background: #ccc;
  position: absolute;
  border-radius: 1em 1em 0 0 ;
  z-index: 2;
  box-shadow: 0 -0.05em 0.1em black;
}
.microbit-svg .crocodile:before,
.microbit-svg .crocodile:after {
  position: absolute;
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #ccc;
  margin-top: -0.5em;
  border-radius: 1em;
  z-index: 3;
}
.microbit-svg .crocodile:before {
  left: 0.36em;
  top: 3em;
  width: 0.3em;
  height: 6em;
  background: red;
  z-index: 1;
}
.microbit-svg .crocodile:after {
  top: 2.5em;
  left: -1em;
  width: 3em;
  height: 4em;
  border-radius: 3em 3em 5em 5em;
  background: red;
  z-index: 2;
}
.microbit-svg .crocodile.pin-0,
.microbit-svg .crocodile.pin-1,
.microbit-svg .crocodile.pin-2,
.microbit-svg .crocodile.pin-3v,
.microbit-svg .crocodile.pin-gnd {
  left: 1.6em;
  bottom: -3.1em;
  display: none;
}
.microbit-svg .crocodile.pin-1 {
  left: 6.4em;
}
.microbit-svg .crocodile.pin-2 {
  left: 11.9em;
}
.microbit-svg .crocodile.pin-3v {
  left: 17.4em;
}
.microbit-svg .crocodile.pin-gnd {
  left: 22.4em;
}

.microbit-embed .crocodile {
  display: block;
  width: 1em;
  height: 2.1em;
  background: #ccc;
  position: absolute;
  border-radius: 1em 1em 0 0 ;
  z-index: 2;
  box-shadow: 0 -0.05em 0.1em black;
}
.microbit-embed .crocodile:before,
.microbit-embed .crocodile:after {
  position: absolute;
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: #ccc;
  margin-top: -0.5em;
  border-radius: 1em;
  z-index: 3;
}
.microbit-embed .crocodile:before {
  left: 0.36em;
  top: 3em;
  width: 0.3em;
  height: 2em;
  background: red;
  z-index: 1;
}
.microbit-embed .crocodile:after {
  top: 2.5em;
  left: -0.5em;
  width: 2em;
  height: 2em;
  border-radius: 3em 3em 5em 5em;
  background: red;
  z-index: 2;
}
.microbit-embed .crocodile.pin-0,
.microbit-embed .crocodile.pin-1,
.microbit-embed .crocodile.pin-2,
.microbit-embed .crocodile.pin-3v,
.microbit-embed .crocodile.pin-gnd {
  left: 1.1em;
  bottom: -1em;
  display: none;
}
.microbit-embed .crocodile.pin-1 {
  left: 4.9em;
}
.microbit-embed .crocodile.pin-2 {
  left: 8.9em;
}
.microbit-embed .crocodile.pin-3v {
  left: 13em;
}
.microbit-embed .crocodile.pin-gnd {
  left: 16.8em;
}

#button-b:active, #button-a:active {
  fill: #222;
}