#settings-container {
  display: flex;
  align-items: flex-start;
  padding: 2rem;
  gap: 3rem;
}

#settings-container > section {
  position: relative;
  width: 60rem;
  border-radius: 1.25rem;
  color: var(--white);
  padding: 2rem;
}

#settings-sidebar nav {  
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

#settings-sidebar button {
  width: 7.5rem;
  height: calc(0.4 * 7.5rem);
  font-size: 1.125rem;
  border-radius: var(--border-radius);
}

#settings-container > section:not(.active) {
  display: none !important;
}

#volume_settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#music_volume_slider, #sfx_volume_slider {
  width: 100%;
  margin-top: -1rem;
}

#profile_settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#profile_settings label {
  cursor: pointer;
  background-color: var(--background-color);
  border-radius: 50%;
}

#profile_settings_identity {
  display: grid;
  column-gap: 2rem;
  row-gap: 0.5rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto 1fr;
  width: fit-content;
}

#profile_settings_avatar {
  width: 7.5rem;
  aspect-ratio: 1 / 1;
}

#change_image_button_wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#change_image_button {
  font-size: 1rem;
  border: none;
  background: none;
  color: var(--yellow);
}

#profile_settings_username_wrapper {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

#username_button_wrapper {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

#profile_settings_control_wrapper {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

#profile_settings_username {
  width: 20rem;
}

#avatar_opt_wrapper {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

#avatar_opt_wrapper input {
  appearance: none;
}

#avatar_opt_wrapper label {
  display: block;
  max-width: 10rem;
  cursor: pointer;
  background-color: var(--black-low-opacity);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

#avatar_opt_wrapper input:checked + label {
  background-color: var(--yellow);
}

#avatar_opt_wrapper label img {
  width: 100%;
}

.sword-slider {
  position: relative;
}

.sword-slider img {
  height: 100%;
  position: absolute;
  z-index: -3;
  transform: translateX(-15rem);
  transition: transform 250ms ease-in-out;
}

.sword-slider.active img {
  transform: translateX(-2rem);
}

.sword-slider .button-translation-wrapper {
  transition: var(--default-transform-transition);
  transition-delay: 125ms;
}

.sword-slider.active .button-translation-wrapper {
  transform: translateX(1.25rem);
}

#profile_settings_control_wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

#profile_settings_control_wrapper button {
  font-size: 1rem;
  border-radius: var(--border-radius);
}

#save_failed_msg {
  color: var(--red);
}

#save_successful_msg {
  color: var(--yellow);
}

#information_card_list {
  margin-top: 1rem;
  height: 28rem;
  overflow: hidden auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
}

#information_card_list button {
  display: block;
  background: none;
  border: none;
}

#information_card_list img {
  width: 100%;
  height: 100%;
}

#card_info_modal_wrapper {
  margin-top: 1rem;
}

#general_info_wrapper {
  margin-bottom: 1rem;
}

#general_info_wrapper p {
  margin: 0.5rem 0;
}