body, html {
  background-color: #1B1B1B;
  margin: 0;
  border: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

@media (min-width: 768px) {
  #calculator { transform: scale(1.5); }
}

#calculator-output {
  border: 1.5px solid whitesmoke;
  padding: 5px;
  color: whitesmoke;
  text-align: right;
}

#output:empty::before {
  content: "0";
  color: #C0C0C0;
}

#calculator-input {
  border: 1.5px solid whitesmoke;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px;
}


/* Buttons */
.btn {
  height: 30px;
  padding: 5px 7px;
  border: 1px solid whitesmoke;
  color: whitesmoke;
  background-color: #1B1B1B;
}

.btn:hover {
  border: 1px solid whitesmoke;
  color: #1B1B1B;
  background-color: whitesmoke;
}

.btn1 {
  height: 30px;
  padding: 5px 7px;
  border: 1px solid whitesmoke;
  color: whitesmoke;
  background-color: #26282A;
}

.btn1:hover {
  border: 1px solid whitesmoke;
  color: #26282A;
  background-color: whitesmoke;
}

#clear, #equal {
  height: 65px;
  background-color: #0B0705;
}

#clear:hover, #equal:hover {
  border: 1px solid whitesmoke;
  color: #0B0705;
  background-color: whitesmoke;
}