style.less

// Variables
@font: 'Roboto Mono', monospace;
@woff2: format('woff2');
@woff: format('woff');
@padding: 10px;
@border-radius: 15px;

// Mixins
.padding {
    padding: @padding;
}
.border-radius (@radius: @border-radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

@font-face {
    font-family: @font;
    src: url('RobotoMono.woff2') @woff2,
         url('RobotoMono.woff') @woff;
}

// Material Icons
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') @woff2,
       url('material-icons.woff') @woff;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.CodeMirror, #evalBox {
    font-family: @font;
    height: auto;
    .border-radius;
}

#runButtonWrapper, #title {
    font-family: @font;
    text-align: center;
}

#runButtonWrapper, .CodeMirror, #evalBox {
    .padding;
}