EditProfile {
  div.image {
    border-radius: 100px
    overflow: hidden
    margin: 20px
    height: 200px
    width: 200px
    background: linear-gradient(100deg, #c7af84, #669ba7)
    background-size: cover
    background-position: 50% 50%
    display: flex
    align-items: center
    justify-content: center
    position: relative

    input {
      opacity: 0
      position: absolute
      top: 0; bottom: 0; left: 0; right: 0
      width: 100%
      cursor: pointer
    }

    :hover {
      span {
        opacity: 1
      }
    }

    span {
      background: #444
      padding: 4px 8px
      border-radius: 5px
      transition: opacity 0.2s
      opacity: 0.5
      color: white
    }
  }

  div.main {
    flex: 1
    display: flex
    flex-direction: column

    div.info {
      display: flex
      flex-direction: column

      input {
        display: block
        margin: 10px
        background: #333
        font-size: 140%
        padding: 10px
        color: #EEE
        border: 1px solid #222

        :focus {
          color: white
        }
      }

      textarea {
        border: 1px solid #222
        display: block
        margin: 0 10px
        flex: 1
        background: #333
        padding: 10px
        font-size: 110%
        color: #EEE
        min-height: 0

        :focus {
          color: white
        }
      }
    }
  }
}

@keyframes audioProcessingAnimation {
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 50px 50px;
  }
}