@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=Inter&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

body {
  --clr-bkg: #b6b6b6;
  --clr-pri: #D4D4D4;
  --clr-sec: #F2F2F3;
  --clr-ter: #A7B4BD;
  --clr-acc: #F89D96;
  --clr-txt: #1E1E1E;
  --clr-sub: #ba0b0b;
  --clr-sdw: rgba(130, 124, 121, 0.4);
  transition: color 0.5s ease-in-out;
}

[data-theme=Dark] {
  --clr-bkg: #292929;
  --clr-pri: #323232;
  --clr-sec: #404040;
  --clr-ter: #5A5D5F;
  --clr-acc: #903C3C;
  --clr-txt: #f3f3fb;
  --clr-sub: #FF6A6A;
  --clr-sdw: rgba(29, 29, 29, 0.4);
}

@font-face {
  font-family: "DSEG7";
  src: url("../fonts/DSEG7Modern-BoldItalic.ttf");
  font-weight: 700;
}
button {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  color: var(--clr-txt);
  line-height: 0.5em;
}

.calc__display {
  font-family: "DSEG7", monospace;
  font-weight: 700;
  font-size: clamp(1.25rem, 8vw, 2rem);
  color: #00ECF8;
}

.tape {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--clr-txt);
}

.offcanvas {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 8vw, 2rem);
  color: var(--clr-txt);
}
.offcanvas span {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--clr-txt);
  opacity: 0.9;
}

.modal {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--clr-txt);
}

h2 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 8vw, 2rem);
  color: var(--clr-txt);
}

input {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--clr-txt);
}

a {
  color: var(--clr-sub);
}
a:visited {
  color: var(--clr-sub);
}

svg {
  fill: var(--clr-txt);
}

button {
  width: min((100vw - 48px) / 5, 75px);
  height: min((100vw - 48px) / 5, 75px);
  background-color: var(--clr-sec);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 4px var(--clr-sdw);
  transition: 0.1s ease-in-out;
}
button:hover {
  filter: brightness(0.9);
}
button:active {
  box-shadow: 0 2px 2px var(--clr-sdw);
  filter: brightness(0.85);
  transform: translateY(2px);
}

.btn--text {
  font-size: 1rem;
  background-color: var(--clr-ter);
  width: calc(50% - 4px);
  height: auto;
  padding: 1em;
}
.btn--sm button {
  font-size: 1rem;
  height: min((100vw - 48px) / 5 / 2, 38px);
}
.btn--md {
  width: min((100vw - 48px) / 5 * 4 / 5, 50px);
  height: min((100vw - 48px) / 5 * 4 / 5, 50px);
}
.btn--ter {
  background-color: var(--clr-ter);
}
.btn--acc {
  background-color: var(--clr-acc);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--clr-pri);
  width: min(60%, 320px);
  border-radius: 8px;
  padding: 8px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.modal__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px;
  height: 87%;
  overflow-y: auto;
}
.modal__footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.modal--full {
  width: min(425px, 100%);
  height: min(580px, 100%);
}
.modal--show {
  opacity: 1;
  pointer-events: auto;
}
.modal label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal input {
  background-color: transparent;
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--clr-sec);
}
.modal input[type=radio] {
  appearance: none;
  background-color: var(--clr-bkg);
  margin: 0;
  color: var(--clr-ter);
  width: 1em;
  height: 1em;
  border: 0.125em solid var(--clr-ter);
  border-radius: 50%;
}
.modal input[type=radio]:checked {
  border-color: var(--clr-acc);
  box-shadow: inset 0 0 0 0.125em var(--clr-bkg), inset 0 0 0 1em var(--clr-acc);
}
.modal input:focus {
  outline: none;
  border-color: var(--clr-ter);
}
.modal input::-webkit-inner-spin-button, .modal input::-webkit-outer-spin-button {
  appearance: none;
}

body {
  background-color: var(--clr-bkg);
}

main {
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}

@media (min-width: 700px) {
  main {
    flex-flow: row wrap;
    align-items: center;
  }
}
.offcanvas {
  position: fixed;
  height: 0;
  z-index: 4;
  display: flex;
  flex-direction: row;
}
.offcanvas__bkg {
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
.offcanvas__bkg--show {
  opacity: 1;
  pointer-events: auto;
}
.offcanvas__bkg--modal {
  z-index: 5;
}
.offcanvas__menu {
  background-color: var(--clr-pri);
  height: 100vh;
  max-width: 0;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  transition: max-width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.offcanvas__menu li {
  white-space: nowrap;
  margin: 0.5em 1em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}
.offcanvas__menu li span {
  text-align: end;
}
.offcanvas__menu--show {
  max-width: 250px;
}
.offcanvas__btn {
  margin: 8px;
}
.offcanvas__svg {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
  transition: transform 0.3s ease-in-out;
}
.offcanvas__svg--rotate {
  transform: rotate(90deg);
}

#menu__github {
  margin-top: auto;
}
#menu__github svg {
  width: clamp(1.25rem, 8vw, 2rem);
  height: clamp(1.25rem, 8vw, 2rem);
  opacity: 0.75;
}

.tape {
  background-color: var(--clr-bkg);
  min-width: 250px;
  width: 100%;
  max-height: 100vh;
  padding: 8px;
  text-align: end;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tape ul {
  width: 240px;
}
.tape__minus {
  color: var(--clr-sub);
}
.tape__clear {
  text-align: center;
  margin: 0.5em;
}
.tape__items {
  margin-right: 1em;
}
.tape__total {
  margin-bottom: 1em;
}

.calc {
  background-color: var(--clr-pri);
  background-image: url(../images/bkgd.svg);
  width: min(426px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 8px 4px var(--clr-sdw);
  border-radius: 10px;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
.calc__resizer {
  width: 100%;
  text-align: center;
  position: relative;
}
.calc__resizer label {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.calc__resizer input {
  width: 0;
  height: 0;
}
.calc__svg {
  transition: transform 0.3s 0.7s ease-in-out;
}
.calc__svg--rotate {
  transform: rotate(180deg);
}
.calc__display {
  width: 100%;
  height: 2em;
  background-color: #1E1E1E;
  position: relative;
  flex-shrink: 0;
}
.calc__digit {
  position: absolute;
  top: 0;
  right: 0;
  text-shadow: 0 0 0.4em #00ECF8;
  margin: 0.5em 8px;
}
.calc__digit--off {
  opacity: 0.05;
  text-shadow: none;
}
.calc__buttons {
  max-height: 550px;
  overflow: hidden;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "margin margin margin items items" "tax tax sign percent percent" "clear clear clear memory memory" "numpad numpad numpad memory memory" "numpad numpad numpad operators operators";
  gap: 8px;
  transition: max-height 1s ease-in-out;
}
.calc__buttons--hidden {
  max-height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.calc__margin {
  grid-area: margin;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__items {
  grid-area: items;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__tax {
  grid-area: tax;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__sign {
  grid-area: sign;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__percent {
  grid-area: percent;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__clear {
  grid-area: clear;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__memory {
  grid-area: memory;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__numpad {
  grid-area: numpad;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}
.calc__operators {
  grid-area: operators;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 8px;
}

@media (min-width: 426px) {
  .calc {
    margin: 2vw;
  }
  .calc__resizer {
    display: none;
  }
}
@keyframes hidden {
  to {
    height: 100%;
  }
  from {
    height: 0%;
    padding: 0%;
  }
}/*# sourceMappingURL=style.css.map */