.container
  .avatar
    .avatar__content
      img.profile-pic(src="http://source.unsplash.com/random/250x250", alt="Profile Pic")
      span.username User Name
    .avatar__actions
      a.action(href="#") Edit Profile

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

html,
body {
  background-color: #1a1a1a;
  font-family: "Open Sans", sans-serif;
  overflow: hidden;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.avatar {
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 260px;
    transition: all ease-in-out 250ms;
  &__content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 5px;
    border-radius: 10px;
    transition: background-color ease 150ms;
    .profile-pic {
      border-radius: 10px;
      width: 250px;
      height: 250px;
    }
    .username {
      padding: 5px 0;
      align-self: center;
      color: white;
      text-transform: uppercase;
      letter-spacing: 4px;
      transition: color ease 150ms;
    }
  }
  &__actions {
    position: relative;
    align-self: flex-end;
    visibility: hidden;
    top: 2px;
    right: 5px;
    transition: visibility 50ms ease-in-out;
    .action {
      text-decoration: none;
      font-size: 0.9rem;
      color: white;
    }
  }
  &:hover {
     transform: translateY(-2px);
    .avatar__content {
      background-color: white;
      & .username {
        color: #222222;
      }
    }
    .avatar__actions {
      visibility: visible;
    }
  }
}