* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --color-black: #222;
}

body {
  color: var(--color-black);
  background-color: white;
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: var(--color-black);
  }
}

code {
  display: block;
  padding: 8px;
  overflow-x: auto;
  font-family: courier, monospace;
  background-color: #9494942d;
  border-radius: 3px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 236px);
  gap: 16px;
  place-content: center;
  min-height: 100vh;
  padding: 32px 16px;
}

.itemWrapper {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: solid 1px #ddd;
  border-radius: 8px;
}

.itemWrapper > p {
  width: 100%;
  padding-bottom: 8px;
  text-align: center;
}

/* lottie-playerのシークバーカスタム */
lottie-player {
  --lottie-player-seeker-track-color: #7bfcce ;
  --lottie-player-seeker-thumb-color: #4c8fed ;
}