.container {
  max-width: 480px;
}

.wide .container {
  max-width: 960px;
}

:root {
  --theme: hsl(14, 99%, 72%);
  --theme-hover: hsl(14, 99%, 66%);
  --theme-active: hsl(14, 99%, 60%);
  --theme-disabled: hsl(14, 10%, 72%);
}

.btn {
  font-weight: bold;
}

.btn-primary {
  --bs-btn-bg: var(--theme);
  --bs-btn-border-color: var(--theme);
  --bs-btn-hover-bg: var(--theme-hover);
  --bs-btn-active-bg: var(--theme-active);
  --bs-btn-hover-border-color: var(--theme-hover);
  --bs-btn-active-border-color: var(--theme-active);
  --bs-btn-disabled-bg: var(--theme-disabled);
  --bs-btn-disabled-border-color: var(--theme-disabled);
}

.toggle-btn {
  --bs-btn-bg: rgba(255, 255, 255, 0.8);
  --bs-btn-hover-bg: hsla(14, 99%, 66%, 0.5);
  --bs-btn-active-bg: var(--theme);
  --bs-btn-active-color: white;
  --bs-btn-active-border-color: var(--theme);
}

.progress-bar {
  background-color: var(--theme);
}

.nowrap {
  white-space: nowrap;
}

.btn {
  white-space: nowrap;
}

.btn-large.btn-large {
  white-space: initial;
}

.btn svg {
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

.btn-large svg {
  margin: 20px auto;
  width: 48px;
  height: 48px;
  display: block;
}

#preview .preview-block {
  text-align: right;
  width: 130px;
  height: 154px;
  display: inline-block;
  margin: 8px;
}

#preview .preview-block img {
  width: 130px;
  height: 130px;
  background-color: white;
  object-fit: contain;
}

.fs-7 {
  font-size: 0.75rem;
}

.fs-8 {
  font-size: 0.625rem;
}

.item-type-book {
  border-left: 6px hsl(132, 60%, 35%) solid;
}

.item-type-toy {
  border-left: 6px hsl(312, 60%, 35%) solid;
}

.color-book {
  background-color: hsl(132, 60%, 35%);
}

.color-toy {
  background-color: hsl(312, 60%, 35%);
}

.leaderboard .you {
  font-weight: bold;
}

.leaderboard>div.person.rank0>div.name::before {
  content: "\1F947";
  /* Gold Medal Emoji */
  margin-right: 5px;
}

.leaderboard>div.person.rank1>div.name::before {
  content: "\1F948";
  /* Silver Medal Emoji */
  margin-right: 5px;
}

.leaderboard>div.person.rank2>div.name::before {
  content: "\1F949";
  /* Bronze Medal Emoji */
  margin-right: 5px;
}

.lds-loader {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}