* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", Arial, Helvetica, sans-serif;
}

:root {
  --bg-color: #0a0a0a;
  --screen-color: #101014;
  --btn-color: #1a1a1d;
  --btn-operator: #4fd3c4;
  --btn-equal: #7d5fff;
  --btn-ac-color: #ff4d6d;
  --btn-backspace-color: #ffb84d;
  --btn-func-color: #3c3c47;
  --btn-paren-color: #2b2b35;
  --btn-misc-color: #2f2f38;
  --btn-alt-func-color: #3d4561;
  --text-color: #f2f2f2;
  --font-big: 1.5rem;
  --font-large: 2rem;
  --screen-radius: 20px;
  --radius: 32px;
  --btn-radius: 50%;
}

::-webkit-scrollbar {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom right,
    rgb(255, 167, 52),
    rgb(245, 132, 39),
    rgb(219, 129, 11)
  );
  border-radius: var(--radius);
}

body {
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  position: relative;
  background-color: var(--screen-color);
  padding: 20px;
  border-radius: 30px;
  width: 350px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.container::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-radius: var(--radius);
  z-index: -1;
  background: linear-gradient(
    to bottom right,
    rgb(255, 167, 52),
    rgb(245, 132, 39),
    rgb(219, 129, 11)
  );
}

.screen {
  background-color: #2c2c2c;
  color: var(--text-color);
  font-size: var(--font-large);
  padding: 20px;
  border-radius: var(--screen-radius);
  text-align: right;
  overflow-x: auto;
  margin-bottom: 20px;
}

.btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

button {
  height: 60px;
  width: 65px;
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-color);
  color: var(--text-color);
  font-size: var(--font-big);
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #444;
}

button:active {
  transform: scale(0.96);
}

#plus,
#minus,
#multiply,
#divide {
  background-color: var(--btn-operator);
  color: #000;
}

#plus:hover,
#minus:hover,
#multiply:hover,
#divide:hover {
  background-color: #3dc0b3;
}

#equal {
  background-color: var(--btn-equal);
}

#equal:hover {
  background-color: #6b4dff;
}

#AC {
  background-color: var(--btn-ac-color);
}

#bs {
  background-color: var(--btn-backspace-color);
}

#clc,
#percent {
  background-color: var(--btn-misc-color);
}

#√,
#x² {
  background-color: var(--btn-func-color);
}

#\( \) {
  background-color: var(--btn-paren-color);
}

#plus-minus {
  background-color: var(--btn-alt-func-color);
}

#brakets {
  background-color: var(--btn-alt-func-color);
}

#AC:hover {
  background-color: #e0435f;
}

#bs:hover {
  background-color: #e6a23c;
}

#clc:hover,
#percent:hover {
  background-color: #444652;
}

#√:hover,
#x²:hover {
  background-color: #4b4b59;
}

#brakets:hover {
  background-color: #393947;
}

#plus-minus:hover,
#brakets:hover {
  background-color: #4a5370;
}