body {
  background-color: lightgray;
}

#main {
  flex: 0 0 auto;
  font-family: sans-serif;
  gap: 80px;
}
.row {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
}
button {
  font-size: 40px;
}
textarea {
  font-size: 30px;
}

.legend {
  font-size: 30px;
  text-align: right;
}

#yut-picker {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
}
.yut {
  background-image: url('/yut.png');
  border: 1px solid black;
  display: grid;
  grid-template-columns: auto;
  height: 95px;
  width: 230px;
}
.yut.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.yut.open button {
  display: none;
}
.yut.yut0 {
  background-position: -200px -554px;
}
.yut.yut1 {
  background-position: -200px -52px;
}
.yut.yut2 {
  background-position: -200px -149px;
}
.yut.yut3 {
  background-position: -200px -246px;
}
.yut.yut4 {
  background-position: -200px -344px;
}
.yut.yut5 {
  background-position: -200px -441px;
}

.tools {
  justify-content: space-between;
  margin: 20px 0;
}
.counter {
  font-size: 40px;
}
.counter > input {
  font-size: 40px;
  width: 50px;
}

@keyframes shake {
  10%, 90% {
    transform: rotate(-3deg);
  }

  20%, 80% {
    transform: rotate(6deg);
  }

  30%, 50%, 70% {
    transform: rotate(-10deg);
  }

  40%, 60% {
    transform: rotate(10deg);
  }
}