.hidden {
  display: none;
}

.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;
}

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

body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

:root {
  /* Colors */
  /* Primary color */
  --color-primary: hsl(172, 67%, 45%);
  /* Neutral colors */
  --color-neutral-0: hsl(0, 100%, 100%);
  --color-neutral-1: hsl(189, 47%, 97%);
  --color-neutral-2: hsl(185, 41%, 84%);
  --color-neutral-3: hsl(184, 14%, 56%);
  --color-neutral-4: hsl(186, 14%, 43%);
  --color-neutral-5: hsl(183, 100%, 15%);
  /* Status color */
  --color-error: hsl(4, 100%, 67%);
  /* Spacing sizes */
  --size-xs: clamp(0.5rem, calc(0.35rem + 0.4vw), 1rem);
  --size-sm: clamp(1rem, calc(1.25rem + 0.5vw), 1.75rem);
  --size-md: clamp(1.5rem, calc(2rem + 0.5vw), 3rem);
  --size-lg: clamp(6rem, calc(6rem + 1vw), 10rem);
  /* Font sizes */
  --fs-sm: clamp(1rem, calc(0.8rem + 0.7vw), 1.3rem);
  --fs-md: clamp(1.5rem, calc(1.3rem + 1vw), 2rem);
  --fs-lg: clamp(2rem, calc(1.8rem + 1.2vw), 3rem);
  /* Font weight */
  --fw-bold: 700;
  /* Tablet and Desktop */
}
@media screen and (min-width: 40rem) {
  :root {
    /* Font sizes */
    --fs-sm: clamp(1rem, calc(0.8rem + 0.2vw), 3rem);
    --fs-md: clamp(1.3rem, calc(1.3rem + 0.3vw), 5rem);
    --fs-lg: clamp(2rem, calc(2rem + 0.5vw), 9rem);
  }
}

.calculator {
  width: clamp(20rem, 100vw, 30rem);
  background: var(--color-neutral-0);
  border-radius: var(--size-sm);
  padding: var(--size-md);
  gap: var(--size-md);
}
.calculator__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--size-sm);
}
.calculator__output {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-sm);
  background: var(--color-neutral-5);
  width: 100%;
  padding: var(--size-sm);
  border-radius: var(--size-sm);
}
.calculator__result {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media screen and (min-width: 60rem) {
  .calculator {
    padding: var(--size-sm);
    width: auto;
    height: auto;
  }
  .calculator__controls {
    height: 100%;
    justify-content: space-between;
    width: clamp(20rem, 20rem + 5vw, 40rem);
  }
  .calculator__output {
    height: 100%;
    min-height: 22rem;
    width: clamp(20rem, 20rem + 5vw, 40rem);
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
.fast-slow-hover {
  transition: 500ms ease;
  cursor: pointer;
}
.fast-slow-hover:hover {
  transition: 200ms ease;
}

.open-div {
  animation: open-up 400ms ease forwards;
  will-change: max-height;
}

@keyframes open-up {
  from {
    max-height: 0;
  }
  to {
    max-height: 5rem;
  }
}
.attribution {
  width: 100%;
  text-align: center;
  padding-block-end: var(--size-sm);
}
.attribution__text {
  color: var(--color-neutral-5);
}
.attribution__link {
  color: var(--color-primary);
}
.attribution__link:hover {
  color: var(--color-neutral-4);
}

.button {
  background: transparent;
  cursor: pointer;
  border: none;
}
.button--rectangle {
  border-radius: calc(var(--size-sm) - 1rem);
  padding-block: calc(var(--size-xs) - 0.3rem);
}
@media screen and (min-width: 65rem) {
  .button--rectangle {
    padding: var(--size-xs) calc(var(--size-sm) - 0.5rem);
  }
}
.button--wide {
  width: 100%;
}
.button--primary {
  background: var(--color-primary);
  color: var(--color-neutral-5);
}
.button--primary:hover {
  background: var(--color-neutral-2);
}
.button--secondary {
  background: var(--color-neutral-5);
  color: var(--color-neutral-0);
}
.button--secondary:hover {
  background: var(--color-neutral-2);
  color: var(--color-neutral-5);
}
.button--selected {
  background: var(--color-primary);
  color: var(--color-neutral-5);
}
.button--selected:hover {
  background: var(--color-primary);
}
@media screen and (min-width: 60rem) {
  .button--custom {
    margin-block-start: auto;
  }
}

.icon--small {
  width: clamp(0.5rem, 0.3rem + 0.3vw, 0.8rem);
  height: auto;
}
.icon--medium {
  width: clamp(0.8rem, 0.5rem + 0.5vw, 1.2rem);
  height: auto;
}
.icon--large {
  width: clamp(1rem, 1rem + 1vw, 2.5rem);
  height: auto;
}
.icon--larger {
  width: clamp(4rem, 4rem + 1vw, 10rem);
  height: auto;
}
.icon--primary {
  color: var(--color-primary);
}
.icon--bold {
  stroke: var(--color-primary);
  stroke-width: 0.5px;
}
.icon--secondary {
  color: var(--color-neutral-4);
}

.text {
  font-family: "Space Mono", monospace, sans-serif;
}
.text--primary {
  color: var(--color-primary);
}
.text--secondary {
  color: var(--color-neutral-0);
}
.text--tertiary {
  color: var(--color-neutral-4);
}
.text--smaller {
  font-size: calc(var(--fs-sm) - 0.1rem);
}
.text--small {
  font-size: var(--fs-sm);
}
.text--medium {
  font-size: var(--fs-md);
}
.text--large {
  font-size: var(--fs-lg);
}
.text--bold {
  font-weight: var(--fw-bold);
}
.text--center {
  text-align: center;
}
.text--uppercase {
  text-transform: uppercase;
}
.text__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--size-xs) / 3);
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.form__field {
  width: 100%;
}
.form__field--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-sm);
}
@media screen and (min-width: 60rem) {
  .form__field--grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-xs);
  }
}
.form__field--flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--size-xs);
}
.form__input-wrapper {
  position: relative;
  width: 100%;
}
.form__input {
  width: 100%;
  border-radius: calc(var(--size-sm) - 1rem);
  background-color: var(--color-neutral-1);
  color: var(--color-neutral-5);
  text-align: right;
  border: 0.2rem solid transparent;
}
.form__input::-moz-placeholder {
  color: var(--color-neutral-3);
}
.form__input::placeholder {
  color: var(--color-neutral-3);
}
.form__input:focus {
  outline: 0.2rem solid var(--color-primary);
}
.form__input:hover {
  outline: 0.2rem solid var(--color-primary);
  cursor: pointer;
}
.form__unit {
  position: absolute;
  top: 50%;
  left: var(--size-xs);
  transform: translateY(-50%);
}
.form__label {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media screen and (min-width: 60rem) {
  .form {
    flex-direction: row;
  }
}
.error__input {
  outline: 0.2rem solid var(--color-error);
  background: transparent;
  z-index: 1;
}
.error__input:focus {
  outline: 0.2rem solid var(--color-error);
}
.error__input:hover {
  outline: 0.2rem solid var(--color-error);
  cursor: pointer;
}
.error__message {
  color: var(--color-error);
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: calc(var(--size-md) + 1rem);
}
@media screen and (min-width: 60rem) {
  header {
    padding-block: var(--size-md) var(--size-sm);
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-2);
}

@media screen and (min-width: 60rem) {
  main {
    margin-block: auto;
  }
}

footer {
  margin-block-start: var(--size-md);
}
@media screen and (min-width: 80rem) {
  footer {
    margin-block-start: 0;
  }
}