ProfilePreview {
  background: #525252;
  border: 2px solid #636363;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 3px;
  z-index: 1;
  position: absolute;
  width: 500px;
  color: white;

  section {
    background: #4c4a4a
    color: white
    padding: 5px

    code {
      user-select: text
      word-break: break-all
    }

    a {
      color: white
    }

    -distanceWarning {
      background: #ab7d47;
      color: #ffffff;
    }

    -mutualFriends {
      background: #7192ce
    }

    -you {
      background: #7d7d7d;
    }
  }

  header {
    display: flex;

    div.image {
      margin: 5px;
      img {
        width: 50px;
        height: 50px;
      }
    }

    div.main {
      flex: 1
      margin: 5px

      div.title {
        display: flex
        h1 {
          flex: 1
          margin: 0
          margin-bottom: 3px
          a {
            color: white
          }
        }
        div.meta {
          a {
            margin-left: 5px
            display: inline-block
          }
        }
      }
      section {
        pre {
          color: #b3b3b3;
          margin: 2px 0;
          font-size: 110%;
          -webkit-user-select: text
        }
      }
    }
  }
}