.container {
    display: flex;
    flex-direction: row;
  }

#Deck {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  height: 250px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

#Deck li {
  flex: 0 0 calc(20% - 10px); /* 5つの要素が1行に収まるように幅を調整 */
  height: 12%;
  margin-right: 10px; /* 要素の間にスペースを設定 */
  margin-bottom: 10px; /* 改行する際のスペースを設定 */
}

#TipSelector {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

#TipSelector li {
  flex: 0 0 calc(20% - 10px); /* 5つの要素が1行に収まるように幅を調整 */
  margin-right: 10px; /* 要素の間にスペースを設定 */
  margin-bottom: 10px; /* 改行する際のスペースを設定 */
}

.Mega{
  background-color: lightgreen;
}

.Giga{
  background-color: lightcoral;
}

.Standard{
  background-color: lightcyan;
}

#Recover {
  width: 100%;
  height: 200px;
  background-color: #f9f9f9;
}