.vcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

html {
  background-color: #e74c3c; }
  html body {
    height: 100vh;
    background-image: url("../images/maths_careers.png");
    background-size: cover; }
  html #calculator {
    width: 48vmin;
    height: 84vmin;
    background-color: #1abc9c;
    color: #e74c3c; }
    html #calculator #result {
      background-color: #2c3e50;
      height: 15vmin;
      text-align: right;
      line-height: 16vmin;
      font-size: 8vmin;
      padding: 0 2vmin; }
    html #calculator #preview {
      background-color: #7f8c8d;
      height: 8vmin;
      text-align: right;
      line-height: 8vmin;
      font-size: 3vmin;
      padding: 0 2vmin; }
    html #calculator .key {
      padding: 0;
      height: 12vmin;
      width: 12vmin;
      background-color: #1abc9c;
      box-sizing: border-box;
      text-align: center;
      line-height: 12vmin;
      font-size: 3vmin;
      border-radius: 10px; }
      html #calculator .key#equals {
        width: 24vmin; }
      html #calculator .key#plus {
        height: 24vmin;
        line-height: 24vmin; }
      html #calculator .key:hover {
        background-color: #1abc9c; }
      html #calculator .key:active {
        background-color: #17a689; }
    html #calculator .key-group {
      padding: 0; }

/*# sourceMappingURL=main.css.map */