.uppercase {
  text-transform: uppercase;
}

.fs-800 {
  font-size: 2.5rem;
}

.fs-700 {
  font-size: 2rem;
}

.fs-500 {
  font-size: 1.4rem;
}
@media (min-width: 376px) {
  .fs-500 {
    font-size: 1.7rem;
  }
}

.fs-400 {
  font-size: 0.9rem;
}

.fs-300 {
  font-size: 0.65rem;
}

.dark-theme {
  background-color: hsl(222, 26%, 31%);
}
.dark-theme .theme-container,
.dark-theme h1,
.dark-theme p {
  color: hsl(0, 0%, 100%);
}
.dark-theme .theme-container-input {
  background-color: hsl(223, 31%, 20%);
}
.dark-theme .theme-container-input input {
  background-color: hsl(223, 31%, 20%);
}
.dark-theme .theme-container-input input:checked {
  background-color: hsl(6, 63%, 50%);
}
.dark-theme .theme-container-input input:checked:hover {
  background-color: hsl(6, 63%, 65%);
}
.dark-theme .calc {
  background-color: hsl(224, 36%, 15%);
}
.dark-theme .calc-screen {
  background-color: hsl(224, 36%, 15%);
  color: hsl(0, 0%, 100%);
}
.dark-theme button {
  background-color: hsl(30, 25%, 89%);
  color: hsl(221, 14%, 31%);
  box-shadow: 0px 7px 0px -1px hsl(28, 16%, 65%);
}
.dark-theme button:hover, .dark-theme button:focus {
  background-color: hsl(30, 25%, 100%);
}
.dark-theme .reset,
.dark-theme .delete {
  background-color: hsl(225, 21%, 49%);
  color: hsl(0, 0%, 100%);
  box-shadow: 0px 7px 0px -1px hsl(224, 28%, 35%);
}
.dark-theme .reset:hover, .dark-theme .reset:focus,
.dark-theme .delete:hover,
.dark-theme .delete:focus {
  background-color: hsl(224, 60%, 80%);
}
.dark-theme .equals {
  background-color: hsl(6, 63%, 50%);
  color: hsl(0, 0%, 100%);
  box-shadow: 0px 7px 0px -1px hsl(6, 70%, 34%);
}
.dark-theme .equals:hover, .dark-theme .equals:focus {
  background-color: hsl(6, 77%, 62%);
}

.light-theme {
  background-color: hsl(0, 0%, 90%);
}
.light-theme .theme-container,
.light-theme h1,
.light-theme p {
  color: hsl(60, 10%, 19%);
}
.light-theme .theme-container-input {
  background-color: hsl(0, 5%, 81%);
}
.light-theme .theme-container-input input {
  background-color: hsl(0, 5%, 81%);
}
.light-theme .theme-container-input input:checked {
  background-color: hsl(25, 98%, 40%);
}
.light-theme .theme-container-input input:checked:hover {
  background-color: hsl(25, 98%, 55%);
}
.light-theme .calc {
  background-color: hsl(0, 5%, 81%);
}
.light-theme .calc-screen {
  background-color: hsl(0, 0%, 93%);
  color: hsl(60, 10%, 19%);
}
.light-theme button {
  background-color: hsl(45, 7%, 89%);
  color: hsl(60, 10%, 19%);
  box-shadow: 0px 7px 0px -1px hsl(35, 11%, 61%);
}
.light-theme button:hover, .light-theme button:focus {
  background-color: hsl(45, 7%, 100%);
}
.light-theme .reset,
.light-theme .delete {
  background-color: hsl(185, 42%, 37%);
  color: hsl(0, 0%, 100%);
  box-shadow: 0px 7px 0px -1px hsl(185, 58%, 25%);
}
.light-theme .reset:hover, .light-theme .reset:focus,
.light-theme .delete:hover,
.light-theme .delete:focus {
  background-color: hsl(185, 46%, 59%);
}
.light-theme .equals {
  background-color: hsl(25, 98%, 40%);
  color: hsl(0, 0%, 100%);
  box-shadow: 0px 7px 0px -1px hsl(25, 99%, 27%);
}
.light-theme .equals:hover, .light-theme .equals:focus {
  background-color: hsl(25, 98%, 63%);
}

.color-theme {
  background-color: hsl(268, 75%, 9%);
}
.color-theme .container,
.color-theme h1,
.color-theme p {
  color: hsl(52, 100%, 62%);
}
.color-theme .theme-container-input {
  background-color: hsl(268, 71%, 12%);
}
.color-theme .theme-container-input input {
  background-color: hsl(268, 71%, 12%);
}
.color-theme .theme-container-input input:checked {
  background-color: hsl(176, 100%, 44%);
}
.color-theme .theme-container-input input:checked:hover {
  background-color: hsl(176, 100%, 79%);
}
.color-theme .calc {
  background-color: hsl(268, 71%, 12%);
}
.color-theme .calc-screen {
  background-color: hsl(268, 71%, 12%);
  color: hsl(52, 100%, 62%);
}
.color-theme button {
  background-color: hsl(268, 47%, 21%);
  color: hsl(52, 100%, 62%);
  box-shadow: 0px 7px 0px -1px hsl(290, 70%, 36%);
}
.color-theme button:hover, .color-theme button:focus {
  background-color: hsl(268, 38%, 43%);
}
.color-theme .reset,
.color-theme .delete {
  background-color: hsl(281, 89%, 26%);
  color: hsl(0, 0%, 100%);
  box-shadow: 0px 7px 0px -1px hsl(285, 91%, 52%);
}
.color-theme .reset:hover, .color-theme .reset:focus,
.color-theme .delete:hover,
.color-theme .delete:focus {
  background-color: hsl(281, 63%, 46%);
}
.color-theme .equals {
  background-color: hsl(176, 100%, 44%);
  color: hsl(198, 20%, 13%);
  box-shadow: 0px 7px 0px -1px hsl(177, 92%, 70%);
}
.color-theme .equals:hover, .color-theme .equals:focus {
  background-color: hsl(176, 84%, 80%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  min-height: 100vh;
  font-family: "League Spartan", sans-serif;
  font-size: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.flex {
  display: flex;
}

.grid {
  display: grid;
}

.flow > * + * {
  margin-top: var(--flow-space, 2rem);
}

.container {
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-container {
  border: none;
}
.theme-container-input, .theme-container-label {
  display: flex;
  width: 4rem;
  cursor: pointer;
}
.theme-container-input {
  justify-content: center;
  background-color: red;
  padding-block: 0.25rem;
  border-radius: 1rem;
}
.theme-container-input input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1.15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: red;
  cursor: pointer;
}
.theme-container-label {
  margin-bottom: 0.5rem;
  justify-content: space-evenly;
}
.theme-container label {
  font-size: 1rem;
  cursor: pointer;
}
.calc-container {
  width: min(32.25rem, 90vw);
  max-width: 32.25rem;
  overflow: hidden;
}

.calc {
  padding: 1.25rem;
  border-radius: 0.75rem;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (min-width: 376px) {
  .calc {
    height: -moz-fit-content;
    height: fit-content;
    gap: 2rem;
  }
}
.calc-row {
  width: 100%;
  justify-content: space-between;
}
.calc-screen {
  height: 6rem;
  border-radius: 0.75rem;
  justify-content: flex-end;
  align-items: center;
  font-size: 2.5rem;
  padding-right: 0.5em;
  margin-bottom: 1rem;
}
@media (min-width: 376px) {
  .calc-screen {
    height: 7.25rem;
    border-radius: 0.75rem;
    font-size: 3rem;
  }
}
.calc-screen-output {
  height: -moz-min-content;
  height: min-content;
}

button {
  cursor: pointer;
  border: none;
  width: 21%;
  border-radius: 0.25em;
  padding-top: 0.75rem;
  min-height: 3.5rem;
}
@media (min-width: 376px) {
  button {
    border-radius: 0.5rem;
    font-size: 2.5rem;
  }
}

.longBtn {
  width: 47%;
}

.first-section {
  align-items: flex-end;
  width: min(32rem, 90vw);
  padding-bottom: 0.5rem;
}
.first-section h1 {
  margin-right: auto;
}
.first-section p {
  margin-right: 2rem;
  padding-bottom: 0.25rem;
  letter-spacing: 0.1rem;
}
@media (min-width: 376px) {
  .first-section {
    width: min(32rem, 90vw);
  }
}/*# sourceMappingURL=app.css.map */