:root {
  --text: #fefefe;
  --background: #212529;
  --primary: #6c757d;
  --secondary: #adb5bd;
  --accent: #6c757d;
  --gap1: 20px;
  --gap2: 10px;
  --boxRadius: 30px;
  --btnRadius: 10px;
  --size: 1.3rem;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Courier New", Courier, monospace;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calc-body {
  width: 380px;
  padding: var(--gap1);
  padding-bottom: calc(2 * var(--gap1));
  background-color: var(--background);
  border-radius: var(--boxRadius);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gap1);
}

.calc-heading {
  color: var(--secondary);
}

.calc-screen {
  width: 100%;
  min-height: 3.5rem;
  background-color: var(--accent);
  border: 2px solid var(--secondary);
  border-radius: calc(0.5 * var(--btnRadius));
  padding: var(--gap2);
  color: var(--text);
  font-size: calc(var(--size) + 0.4rem);
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  word-break: break-all;
}

.btn-row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap2);
}

.btn1,
.btn2,
.btn3 {
  padding: 14px;
  border-radius: var(--btnRadius);
  font-size: var(--size);
  font-weight: bold;
  border: none;
}
.btn1:hover,
.btn2:hover,
.btn3:hover {
  cursor: pointer;
  opacity: 0.8;
}
.btn1:active,
.btn2:active,
.btn3:active {
  outline: 2px solid white;
}
.btn1,
.btn2 {
  background-color: var(--secondary);
}
.btn2,
.btn3 {
  flex: 1;
}
.btn1 {
  width: calc(50% - 0.5 * var(--gap2));
}
.btn3 {
  background-color: var(--primary);
  color: var(--text);
}