.switchGrid
  display: grid
  grid-template-columns: auto auto
  justify-content: space-evenly
  align-items: center

  @media only screen and (max-width: 680px)
    grid-template-columns: auto

.switchColumnGrid
  @extend .switchGrid
  align-items: start

.switchColumn
  display: flex
  flex-direction: column
  justify-items: start

details
  background-color: var(--card-bg-color)
  width: 85%
  margin: 0 auto

  hr
    width: 100%
    height: 2px
    border: 0
    margin-top: -1px
    background-color: var(--primary-color)

  summary
    display: block
    cursor: pointer
    padding: 1px 1px 1px 1px
    
    h3
      margin-left: 2%

  @media only screen and (max-width: 680px)
    width: 90%

.center
  text-align: center

@media only screen and (max-width: 460px)
  .generalSettingsFlexBox, .playerSettingsFlexBox, .externalPlayerSettingsFlexBox
    justify-content: flex-start