
.opponent {
    font-size: 1rem;
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    background: #00cc99;
    color: #f6f6f6;
    -webkit-animation: bounce-in 1s 1;
            animation: bounce-in 1s 1;
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
  .opponent:after {
    top: 88%;
    left: 0;
    position: absolute;
    content: "";
    border: 1.5rem solid;
    border-color: #00cc99 transparent transparent #00cc99;
  }
  
  .sentbyme {
    font-size: 1rem;
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    background: #ff5154;
    color: #f6f6f6;
    -webkit-animation: bounce-in 1s 1;
            animation: bounce-in 1s 1;
   
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
  .sentbyme:after {
    top: -35%;
    left: auto;
    position: absolute;
    content: "";
    border: 1.5rem solid;
    border-color: transparent #ff5154 #ff5154 transparent;

    right: 0;
  }
  
  @-webkit-keyframes bounce-in {
    from, 20%, 40%, 60%, 80%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }
    30% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
    }
    60% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
              transform: scale3d(0.9, 0.9, 0.9);
    }
    70% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
              transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes bounce-in {
    from, 20%, 40%, 60%, 80%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }
    30% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
    }
    60% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
              transform: scale3d(0.9, 0.9, 0.9);
    }
    70% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
              transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  
  
  