body {
  background-color: #3c3c3d;
  background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
}

#mainDiv {
  height: 60vh;
  max-height: 700px;
  width: 45vh;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: 49%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #3c3c3d;
  border: 4px solid gray;
  -webkit-transition: -webkit-box-shadow 2s;
  transition: -webkit-box-shadow 2s;
  transition: box-shadow 2s;
  transition: box-shadow 2s, -webkit-box-shadow 2s;
  font-family: 'Share Tech Mono', monospace;
}

#mainDiv:hover {
  -webkit-box-shadow: 5px 5px gray, 10px 10px #676767, 15px 15px #4d4d4d;
          box-shadow: 5px 5px gray, 10px 10px #676767, 15px 15px #4d4d4d;
}

#mainDiv:hover #longDis p {
  -webkit-transition: color 2s;
  transition: color 2s;
  color: orange;
}

#mainDiv:hover #display p {
  -webkit-transition: color 2s;
  transition: color 2s;
  color: white;
}

#longDis, #display {
  font-size: 5vh;
  width: 100%;
  height: 10%;
  max-height: 10%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: black;
  text-align: right;
}

#longDis p, #display p {
  position: relative;
  bottom: 80%;
  margin-right: 5%;
  -webkit-transition: color 5s;
  transition: color 5s;
  z-index: 500;
}

#allButtons {
  height: 80%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (20%)[5];
  -ms-grid-columns: (25%)[4];
      grid-template: repeat(5, 20%)/repeat(4, 25%);
}

.buttonClass {
  font-size: 3vh;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  font-family: serif;
  color: black;
}

.buttonClass:hover {
  color: white;
}

#clear {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: 1 / 1 / 1 / span 3;
  width: 100%;
  height: 100%;
}

#clear:hover {
  background: #cc0000;
}

#clear:active {
  background: #a80000;
}

#zero {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 5/ 2 / 5 / 3;
}

#divide:hover, #multiply:hover, #add:hover, #subtract:hover {
  background: green;
}

#decimal:hover {
  color: white;
  background: gray;
}

#decimal:active {
  background: #5e5e5e;
}

#equals {
  -ms-grid-row: 5;
  grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 3 / 5;
}

#equals:hover {
  background: #cc8400;
  color: white;
}

#equals:active {
  background: #ba7800;
}

#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover, #seven:hover, #eight:hover, #nine:hover, #zero:hover {
  background: #6161ff;
}

#errorP {
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
  background: #eee;
  text-align: center;
  position: absolute;
  bottom: -70px;
  left: 6px;
  border-radius: 3px;
  padding: 2px 1px 1px 1px;
}

.show {
  opacity: 1;
  visibility: visible;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

@media (min-height: 300px) and (orientation: portrait) {
  #mainDiv {
    width: 80vw;
    height: 60vh;
  }
  #mainDiv:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  input[type=button] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #eee;
    width: 100%;
    height: 100%;
  }
  #allButtons {
    -ms-grid-rows: (20%)[5];
    -ms-grid-columns: (20vw)[4];
        grid-template: repeat(5, 20%)/repeat(4, 20vw);
  }
  #longDis {
    top: 9.5%;
  }
  #longDis p {
    color: #cc8400;
  }
  #display {
    top: 19.5%;
  }
  #display p {
    color: white;
  }
  #divide:hover, #multiply:hover, #add:hover, #subtract:hover, #equals:hover, #decimal:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #divide:active, #multiply:active, #add:active, #subtract:active, #equals:active, #decimal:active {
    background: green;
  }
  #decimal:active {
    background: #5e5e5e;
  }
  #equals {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    grid-column: 3 / 5;
  }
  #equals:active {
    background: #ba7800;
  }
  #one:active, #two:active, #three:active, #four:active, #five:active, #six:active, #seven:active, #eight:active, #nine:active, #zero:active {
    background: #6161ff;
  }
  #errorP {
    position: absolute;
    bottom: -10vh;
  }
}
/*# sourceMappingURL=styles.css.map */