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

:root {
  --main-background-theme-1: hsl(222, 26%, 31%);
  --toggle-background-theme-1: hsl(223, 31%, 20%);
  --screen-background-theme-1: hsl(224, 36%, 15%);
  --key-background-theme-1: hsl(225, 21%, 49%);
  --key-shadow-theme-1: hsl(224, 28%, 35%);
  --key-red-theme-1: hsl(6, 63%, 50%);
  --key-red-shadow-theme-2: hsl(6, 70%, 34%);
  --key-gray-theme-1: hsl(30, 25%, 89%);
  --key-gray-shadow-theme-1: hsl(28, 16%, 65%);
  --text-gray-theme-1: hsl(221, 14%, 31%);
  --text-white-theme-1: hsl(0, 0%, 100%);

  --main-background-theme-2: hsl(0, 0%, 90%);
  --toggle-background-theme-2: hsl(0, 5%, 81%);
  --screen-background-theme-2: hsl(0, 0%, 93%);
  --key-background-theme-2: hsl(185, 42%, 37%);
  --key-shadow-theme-2: hsl(185, 58%, 25%);
  --key-red-theme-2: hsl(25, 98%, 40%);
  --key-red-shadow-theme-2: hsl(25, 99%, 27%);
  --key-gray-theme-2: hsl(45, 7%, 89%);
  --key-gray-shadow-theme-2: hsl(35, 11%, 61%);
  --text-gray-theme-2: hsl(60, 10%, 19%);
  --text-white-theme-2: hsl(0, 0%, 20%);

  --main-background-theme-3: hsl(268, 75%, 9%);
  --toggle-background-theme-3: hsl(268, 71%, 12%);
  --screen-background-theme-3: hsl(281, 89%, 26%);
  --key-background-theme-3: hsl(285, 91%, 52%);
  --key-shadow-theme-3: hsl(176, 100%, 44%);
  --key-red-theme-3: hsl(177, 92%, 70%);
  --key-red-shadow-theme-3: hsl(268, 47%, 21%);
  --key-gray-theme-3: hsl(290, 70%, 36%);
  --key-gray-shadow-theme-3: hsl(52, 100%, 62%);
  --text-gray-theme-3: hsl(198, 20%, 13%);
  --text-white-theme-3: hsl(0, 0%, 100%);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.calc {
  border-radius: 10px;
  padding: 20px;
}

.header {
  margin-bottom: 1rem;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.themeDiv {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.themeDiv > p {
  font-size: 10px;
  font-weight: 700;
  padding-bottom: 0.5rem;
}

.themeOption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 4rem;
}

.numbersTheme {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  font-weight: 400;
}

.toggle {
  width: 100%;
  height: 1.5rem;
  border-radius: 20px;
  padding: 0.3rem 0.4rem;
  display: flex;
  cursor: pointer;
}

.buttonToggle {
  width: 14px;
  height: 14px;
  border-radius: 20px;

  position: relative;
  left: 0;
  transition: left 0.3s ease;
}

.result {
  height: 6rem;
  font-size: 2.5rem;
  font-weight: bold;
  padding: 20px;
  border-radius: 10px;
  text-align: right;
  margin-bottom: 20px;
}

.displayHistory {
  height: 1rem;
}

.buttons {
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option {
  display: flex;
  gap: 10px;
}

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

.box {
  font-weight: bolder;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.reset {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: bolder;
}

.resultado {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: bolder;
}

button:hover {
  opacity: 0.8;
}

footer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

footer a {
  color: rgb(255, 115, 0);
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

footer a:hover {
  text-decoration: underline;
}

h6 {
  font-size: 13px;
}

/* theme */

.body-theme-1 {
  background-color: var(--main-background-theme-1);
}

.body-theme-2 {
  background-color: var(--main-background-theme-2);
}

.body-theme-3 {
  background-color: var(--main-background-theme-3);
}

.header-theme-1 {
  color: var(--text-white-theme-1);
}

.header-theme-2 {
  color: var(--text-white-theme-2);
}

.header-theme-3 {
  color: var(--text-white-theme-3);
}

.toggle-theme-1 {
  background-color: var(--toggle-background-theme-1);
}

.toggle-theme-2 {
  background-color: var(--toggle-background-theme-2);
}

.toggle-theme-3 {
  background-color: var(--toggle-background-theme-3);
}

.buttonToggle-theme-1 {
  background-color: var(--key-red-theme-1);
}

.buttonToggle-theme-2 {
  background-color: var(--key-red-theme-2);
}

.buttonToggle-theme-3 {
  background-color: var(--key-red-theme-3);
}

.screen-theme-1 {
  background-color: var(--screen-background-theme-1);
}

.screen-theme-2 {
  background-color: var(--screen-background-theme-2);
}

.screen-theme-3 {
  background-color: var(--screen-background-theme-3);
}

.toggle-theme-1 {
  background-color: var(--toggle-background-theme-1);
}

.toggle-theme-2 {
  background-color: var(--toggle-background-theme-2);
}

.toggle-theme-3 {
  background-color: var(--toggle-background-theme-3);
}

.box-theme-1 {
  background-color: var(--key-gray-theme-1);
  color: var(--text-gray-theme-1);
  border-bottom: 3px solid var(--key-gray-shadow-theme-1);
}

.box-theme-2 {
  background-color: var(--key-gray-theme-2);
  color: var(--text-gray-theme-2);
  border-bottom: 3px solid var(--key-gray-shadow-theme-2);
}

.box-theme-3 {
  background-color: var(--key-gray-theme-3);
  color: var(--text-gray-theme-3);
  border-bottom: 3px solid var(--key-gray-shadow-theme-3);
}

.del-theme-1 {
  color: var(--text-white-theme-1);
  background-color: var(--key-background-theme-1);
  border-bottom: 3px solid var(--key-shadow-theme-1);
}

.del-theme-2 {
  color: var(--text-white-theme-2);
  background-color: var(--key-background-theme-2);
  border-bottom: 3px solid var(--key-shadow-theme-2);
}

.del-theme-3 {
  color: var(--text-white-theme-3);
  background-color: var(--key-background-theme-3);
  border-bottom: 3px solid var(--key-shadow-theme-3);
}

.resultado-theme-1 {
  color: var(--text-white-theme-1);
  background-color: var(--key-red-theme-1);
  border-bottom: 3px solid var(--key-red-shadow-theme-1);
}

.resultado-theme-2 {
  color: var(--text-white-theme-2);
  background-color: var(--key-red-theme-2);
  border-bottom: 3px solid var(--key-red-shadow-theme-2);
}

.resultado-theme-3 {
  color: var(--text-white-theme-3);
  background-color: var(--key-red-theme-3);
  border-bottom: 3px solid var(--key-red-shadow-theme-3);
}