h1, h3
  position: relative
  display: block
  margin: 15px
  padding: 0
  text-align: center

h3
  font-size: 26px

a
  color: white
  text-decoration: none

.menu-wrap
  position: absolute
  font-family: "Chinese Rocks Rg"
  color: white
  background-color: #080809
  width: 400px
  height: 500px
  border-radius: 4px
  overflow: scroll
  scrollbar-width: none
  -ms-overflow-style: none
  &::-webkit-scrollbar
    display: none

menu
  display: flex
  width: 100%
  flex-direction: column
  padding: 0
  gap: 4px

  a, span
    padding: 0 10px
    background-color: #272728
    height: 50px
    display: flex
    flex-direction: row
    align-items: center
    overflow: hidden
    text-overflow: ellipsis
    box-sizing: content-box
    white-space: wrap
    cursor: pointer
    justify-content: space-between
    font-size: 22px

    &:hover
      cursor: pointer
      background-color: #7e1921
      &::after
        color: #d41936

    label
      cursor: pointer
      overflow: hidden
      text-overflow: ellipsis
      max-width: 200px
    i
      cursor: pointer
      color: yellow

    button
      font-size: 16px
      font-family: "Chinese Rocks Rg"
      color: white
      background-color: #d41936
      border: none
      border-radius: 4px
      &:hover
        background-color: #e92d49
        cursor: pointer
        margin: 0

  a
    &::after
      position: absolute
      right: 15px
      font-size: 32px
      content: ">"

.modal-bg
  height: 100vh
  width: 100vw
  margin: 0
  top: 0
  left: 0
  background-color: #00000080
  z-index: 100
  position: fixed
  display: flex
  align-items: center
  justify-content: center

  .modal
    position: relative
    background-color: black
    padding: 45px
    display: flex
    flex-direction: column

    h3
      margin: 0
      margin-bottom: 10px

    input
      margin: 10px 25px
      height: 50px
      background-color: grey
      border: none
      color: white
      font-family: "Chinese Rocks Rg"
      font-size: 22px
      outline: none
      cursor: default
      caret-color: white
      &::placeholder
        color: #e3e3e3
      &:focus
        outline: 2px solid #f10000

    span
      display: flex
      justify-content: center
      gap: 15px

      button
        font-family: "Chinese Rocks Rg"
        height: 40px
        width: 100px
        background-color: #575758
        border: none
        color: white
        cursor: pointer
        font-size: 18px

        &:active
          background-color: #a5a5a6

    .char-list
      display: flex
      position: relative
      width: 100%
      flex-direction: column
      gap: 5px
      height: 500px
      overflow: auto
      scrollbar-width: none
      align-items: center
      -ms-overflow-style: none
      margin-top: 15px
      margin-bottom: 15px
      &::-webkit-scrollbar
        display: none

      .char
        position: relative
        width: 75%
        padding: 15px
        text-align: center
        color: white
        font-family: "Chinese Rocks Rg"
        background-color: #575758
        &:hover
          background-color: #a5a5a6

      .active
        background-color: #7e1921
        &:hover
          background-color: #7e1921
