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

body {
  height: 100vh;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  background-image: url("../images/math .jpg"); }

#calculator {
  width: 48vmin;
  height: 84vmin;
  color: #ecf0f1; }
  #calculator #result {
    background-color: #323232;
    height: 19vmin;
    text-align: right;
    line-height: 19vmin;
    font-size: 8vmin;
    padding: 0 2vmin;
    color: #19B5FE;
    font-weight: 100; }
  #calculator #preview {
    background-color: #323232;
    height: 8vmin;
    text-align: right;
    line-height: 8vmin;
    font-size: 3vmin;
    padding: 0 2vmin;
    color: #19B5FE;
    font-weight: 300; }
  #calculator .key {
    padding: 0;
    height: 12vmin;
    background-color: #7f7f7f;
    box-sizing: border-box;
    text-align: center;
    line-height: 12vmin;
    font-size: 3vmin;
    border: 1px solid #b2b2b2; }
    #calculator .key:hover {
      background-color: #b2b2b2; }
    #calculator .key:active, #calculator .key.active {
      background-color: #737373;
      border-radius: 50px; }
  #calculator #key-DIVISION, #calculator #key-MULTIPLY, #calculator #key-MINUS, #calculator #key-PLUS, #calculator #key-EQL {
    color: #19B5FE;
    background-color: #191919; }
    #calculator #key-DIVISION:hover, #calculator #key-MULTIPLY:hover, #calculator #key-MINUS:hover, #calculator #key-PLUS:hover, #calculator #key-EQL:hover {
      background-color: #b2b2b2; }
  #calculator #key-AC, #calculator #key-DEL {
    color: #EB9532;
    background-color: #4c4c4c; }
  #calculator #key-EQL {
    height: 24.1vmin;
    line-height: 24vmin; }
  #calculator .key-group {
    padding: 0; }

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