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

html {
  color: var(--color-text);
  background-color: var(--color-background);
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
}

#app {
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: 3rem;
  padding-inline: 1rem;
  text-align: center;
}

.page-heading {
  margin: 0;
  font-stretch: 60%;
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 6rem);
  text-transform: uppercase;
  line-height: 1;
}

.page-intro {
  font-size: larger;
}

.page-section {
  margin-block: 3rem;
  padding: 1.5rem;
  border: 5px solid var(--color-furniture);
}

.page-section__heading {
  margin: 0;
  margin-block-end: 1.5rem;
  font-stretch: 120%;
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  text-align: start;
  opacity: 0.7;
}

.page-preview {
  font-stretch: 100%;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.3;
}

.page-randomise,
.page-send {
  margin: 0;
  color: var(--color-link);
  background-color: var(--color-background);
  font: inherit;
  text-transform: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.page-randomise {
  padding: 0;
  border: none;
}

.page-send {
  inline-size: 100%;
  padding: 1.5rem;
  font-stretch: 120%;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 4rem);
  border: 5px solid currentcolor;
}

.page-send:hover {
  color: var(--color-link-hover);
}

.page-send[disabled] {
  color: var(--color-furniture);
}

.page-generator {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 30rem) {
  .page-generator {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-generator :first-child {
    grid-column: span 2;
  }
}

.page-label {
  display: block;
  margin-block-end: 0.25rem;
  font-size: smaller;
  text-transform: uppercase;
  text-align: start;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.page-select {
  appearance: none;
  inline-size: 100%;
  padding: 0.5rem;
  color: var(--color-link);
  background-color: var(--color-background-alt);
  border: 2px solid var(--color-text);
  font: inherit;
  font-size: 1.25rem;
}

.page-endscreen {
  margin-block: 3rem;
}

.page-endscreen__heading {
  font-stretch: 150%;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 4rem);
  text-transform: uppercase;
  line-height: 1;
}

.page-endscreen__emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: clamp(10rem, 12vw, 12rem);
  line-height: 1;
}