SettingsPage {
  div.container {
    background-color: hsla(0, 0%, 100%, .3)
    padding: 1rem
    margin: 1rem 0

    display: grid
    grid-template-columns: 8rem 1fr
    grid-gap: 2rem

    section.groups {
      display: grid
      align-content: start
      grid-gap: 1px

      div {
        background: #fff
        cursor: pointer

        padding: .3rem .5rem

        -active {
          background: #000
          color: #fff
        }

        :hover {
          background: #000
          color: #fff
        }
      }
    }

    section.group-settings {
      display: grid
      grid-gap: 1rem

      div.setting {
        margin-bottom: 3rem
        h2 {
          font-size: 1rem
          text-transform: uppercase
          letter-spacing: 2px

          margin: 0 0 1rem .3rem
          border-bottom: 2px solid #3e3e3e
        }

        div {
          p, div {
            margin-top: .2rem
            margin-left: .3rem
          }

          input {
            font-size: 1rem

            padding: .5rem
            border: 1px solid gainsboro

            width: 600px
            max-width: 600px
          }
        }
      }
    }
  }
}