body {
  background: #dddddd;
  font-family: Segoe UI, sans-serif;
}

h1 {
  margin-top: 3rem;
  text-align: center;
}

.calcContainer {
  border: 1px solid black;
  max-width: 400px;
  margin-top: 4rem;
  box-shadow: 0 0 10px black;
}

#expressionText, #inputOutputText {
  color: white;
  background-color: #555;
  height: 40px;
  text-align: right;
}

.button {
  height: 50px;
  background-color: #555;
  color: white;
}

.button:hover {
  background-color: #c9c9c9 !important;
  color: black !important;
}

#inputOutputText {
  font-size: 22px;
}

.info {
  max-width: 1000px;
}

.infoCheck {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

#workaroundInfo, .infoLegend {
  background: #fff;
  border: 1px solid grey;
  padding: 1rem;
  margin: 2rem 0;
  box-shadow: 3px 3px 3px grey;
}

.infoTitle {
  text-align: center;
  text-decoration: underline;
  font-size: 20px;
}

.shortcuts {
  margin: 0 auto;
  border: 1px solid grey;
  box-shadow: 3px 3px 3px grey;
}