:root {
  --bg: #000000;
  --text: #FFFFFF;
}

[data-theme="white"] {
  --bg: #FFFFFF;
  --text: #000000;
}

[data-theme="black"] {
  --bg: #000000;
  --text: #FFFFFF;
}

[data-theme="blue"] {
  --bg: #6667AB;
  --text: #FFFFFF;
}

[data-theme="green"] {
  --bg: #90EE90;
  --text: #000000;
}

[data-theme="pink"] {
  --bg: #FFB6C1;
  --text: #000000;
}

[data-theme="purple"] {
  --bg: #CBC3E3;
  --text: #000000;
}

[data-theme="yellow"] {
  --bg: #F5DF4D;
  --text: #000000;
}

[data-theme="red"] {
  --bg: #BB2649;
  --text: #FFFFFF;
}

* {
  box-sizing: border-box;
  /* WIDTH AND HEIGHT INCLUDES PADDING AND BORDER */
}


html,
body {
  font-family: "Google Sans", sans-serif;
  background-color: var(--bg);
  touch-action: manipulation;
  color: var(--text);
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

input,
textarea,
select {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
}

button {
  font-family: "Google Sans", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  cursor: pointer;
  border: none;
}

button, a {

  -webkit-tap-highlight-color: transparent;
}


::selection {
  background-color: var(--text);
  color: var(--bg);
}

#calculator {
  background-color: var(--bg);
  position: absolute;
  height: 100dvh;
  width: 100%;
}

#buttons {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  background-color: var(--bg);
  position: absolute;
  display: grid;
  height: 75dvh;
  width: 100%;
  top: 25dvh;
}

.buttons {
  background-color: var(--bg);
  color: var(--text);
  font-size: 5vh;
  border: none;
}