@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
:root {
  --color-background: #FFFFFF;
  --color-background-calculator: #FFFFFF;
  --color-accent-1: #DF4695;
  --color-accent-2: #F8B62E;
  --color-button-text: #000000;
  --color-button-text-light: #FFFFFF;
  --color-button-background-dark: #F0F0F0;
  --color-button-background-hover: #FBFBFB;
  --color-button-background-dark-hover: #E0E0E0;
  --color-input: #FFFFFFA0;
  --color-output: #FFFFFF;
}

* {
  font-family: "Nunito", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

html {
  font-size: 10px;
}

#app {
  width: 100vw;
  height: 100vh;
  background-color: var(--color-background);
  display: grid;
  place-items: center;
}

.calculator {
  width: 40rem;
  height: 65rem;
  background-color: var(--color-background-calculator);
  border-radius: 1.5rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr calc(5 * 10rem);
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2);
}
.calculator--extended {
  width: 70rem;
}
.calculator__top {
  background: linear-gradient(45deg, var(--color-accent-1), var(--color-accent-2));
  padding: 3rem 2.5rem 0 2.5rem;
}
.calculator__input {
  color: var(--color-input);
  font-size: 2.5rem;
}
.calculator__output {
  color: var(--color-output);
  font-size: 5rem;
  text-align: right;
  font-weight: 700;
}
.calculator__bottom {
  display: grid;
  grid-template-columns: repeat(4, 10rem);
  grid-template-rows: repeat(5, 10rem);
}
.calculator__bottom--extended {
  grid-template-columns: repeat(7, 10rem);
}
.calculator__button {
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  color: var(--color-button-text);
  background-color: var(--color-background-calculator);
  user-select: none;
  cursor: pointer;
}
.calculator__button:hover {
  background-color: var(--color-button-background-hover);
}
.calculator__button--dark {
  background-color: var(--color-button-background-dark);
}
.calculator__button--dark:hover {
  background-color: var(--color-button-background-dark-hover);
}
.calculator__button--highlighted {
  background: linear-gradient(45deg, var(--color-accent-1), var(--color-accent-2));
  color: var(--color-button-text-light);
}

.sidebar {
  position: absolute;
  top: 2rem;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.sidebar__button {
  display: grid;
  place-items: center;
  margin: 1.5rem 0 0 2rem;
  background: linear-gradient(45deg, var(--color-accent-1), var(--color-accent-2));
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2);
}
.sidebar__button img {
  width: 4rem;
  height: 4rem;
  color: var(--color-button-text-light);
}

/*# sourceMappingURL=style.css.map */