h3 {
  margin: 0;
  margin-bottom: 0.5em;
}

h3:not(:first-child) {
  margin-top: 1em;
}

aside > button, aside > :not(.confirmation-container) > button, aside label, .confirmation-container {
  width: 13em;
  max-width: 100%;
}

aside > button, aside > :not(.confirmation-container) > button, aside label {
  margin: 0.5em 0;
  display: block;
  text-align: left;
}

aside label {
  padding: 0.5em;
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border-radius: var(--button-border-radius);
}

aside label:not(:has(input[type="checkbox"])) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

aside input[type="checkbox"] {
  margin-right: 0.1em;
}

aside p {
  margin: 0;
}

#loadgameList, #cleargameList {
  list-style: inside;
}

.main-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
}

.confirmation-container {
  padding: 0.5em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
  border: 1px solid var(--box-border-color);
  border-radius: var(--box-border-radius);
}

.confirmation-container input[type="text"], .confirmation-container select {
  grid-column: span 2;
}

.confirmation-container button {
  margin: 0;
}