body {
  background-color: #e8dac0;
  margin: 0;
  height: 100%;
  width: 100vw;
  position: fixed;
  font-family: IckyTicket;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-transform: uppercase;
  touch-action: manipulation;
}
body > * {
  padding: 2rem;
  box-sizing: border-box;
}
#letters {
  flex: 3 3 0;
  font-size: 8rem;
  text-align: center;
  letter-spacing: 1rem;
  line-height: 8rem;
  color: #dc8e49;
}
#text {
  flex: 6 6 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dc8e49;
}
#text > span {
  font-size: 5rem;
  text-align: center;
  letter-spacing: 1rem;
}
#progress-bar {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#progress-bar > div {
  width: 90%;
  height: 5rem;
  background-color: white;
  border-radius: 2.5rem;
  overflow: hidden;
}
#progress-bar > div > div {
  width: 0;
  height: 100%;
  background-color: #8e3613;
  transition: width 5s linear;
}
#buttons {
  flex: 7 7 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5vh 2rem;
}
#buttons > button {
  border: 0;
  border-radius: 1.5rem;
  margin: 1rem;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-family: IckyTicket;
  width: calc(calc(100% - 12rem) / 6);
  color: #8e3613;
  background-color: #f8f7f3;
  font-weight: bolder;
}
#buttons > button:hover:not(:disabled) {
  cursor: pointer;
  background-color: #dc8e49;
}
#buttons > button:disabled {
  background-color: #996956;
  color: #bfbfbf;
}
#footer {
  flex: 7 7 0;
  text-align: center;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  color: #dc8e49;
  max-height: 70vh;
}
#footer > div {
  aspect-ratio: 700 / 536;
  height: 85%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer > div > img {
  border-radius: 1rem;
  box-shadow: 0 0 40px #b77b45;
  max-width: 100%;
}
#footer > span {
  font-size: 3rem;
  letter-spacing: .35rem;
}
#footer > span:first-child {
  color: #8e3613;
  font-weight: bold;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
}
@font-face {
  font-family: "IckyTicket";
  src: url("IckyTicket.ttf");
}