body, html {
    
    background-attachment: fixed;
    background-image: url("../images/butterfly-1127666_1920.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    height: 100%; 
}

.opaque {
    opacity: 0.5;
}

.speech-divider {
    padding: 5px 5px;
}

.speech-wrapper {
  padding: 30px 40px;
}

.speech-wrapper .bubble {
    height: auto;
    display: inline-block;
    background: #f5f5f5;
    border-radius: 4px;
    box-shadow: 2px 8px 5px #000;
    position: relative;
    margin: 0 0 25px;
}

.speech-wrapper .bubble.alt {
	  float: right;
}

.speech-wrapper .bubble .txt {
      padding: 8px 55px 8px 14px;
}

.speech-wrapper .bubble .txt .name {
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
}

.speech-wrapper .bubble .txt .name span {
          font-weight: normal;
          color: #b3b3b3;
}

.speech-wrapper .bubble .txt .name.alt {
          color: #2ecc71;
}

.speech-wrapper .bubble .txt .message {
        font-size: 12px;
        margin: 0;
        color: #2b2b2b;
}

.speech-wrapper .bubble .txt .timestamp {
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase;
        color: #999;
}

.speech-wrapper .bubble .bubble-arrow {
      position: absolute;
      width: 0;
      bottom: 32px;
      left: -16px;
      height: 0;
}

.speech-wrapper .bubble .bubble-arrow:after {
      content: '';
      position: absolute;
      border: 0 solid transparent;
      border-top: 9px solid #f5f5f5;
      border-radius: 0 20px 0;
      width: 15px;
      height: 30px;
      transform: rotate(145deg);
}

.speech-wrapper .bubble .bubble-arrow.alt {
        right: -2px;
        bottom: 30px;
        left: auto;
}

.speech-wrapper .bubble .bubble-arrow.alt:after {
      transform: rotate(45deg) scaleY(-1);
}