img { vertical-align: middle;}

#chat {

 max-width: 750px;
 width: 100%;
 margin: 0 auto;
 font-size: 5vh;
 font-family: sans-serif;
}

.w3c, .pw {
	color: #212121;
	font-weight: 400;
	text-transform: none;
	text-align: left;
	letter-spacing: .5px;
	line-height: 1.5em;
	word-break: break-word;
        position: relative;
        transition: opacity 150ms;
}

.w3c.illustr img, .w3c.url + .w3c img, .w3c.continue img , .pw.continue img { width: 500px;}

.w3c.continue {
    height: 375px;
}

.url { font-family: monospace;  font-size: 3vh;}

.w3c {
  background: #a7a7a7;
}

.pw {
  left: 30%;
  background: #00aabb;
  text-align: right;
}

.w3c, .pw { position: relative;  border-radius: .4em;  width: 70%; padding: 60px 20px; margin: 1em 0; }

.w3c:after, .pw:after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-bottom: 0; margin-top: -10px;  }

.w3c:after {
    left: 0;
    border-right-color: #a7a7a7;
     border-left: 0;
    margin-left: -20px;
}
.w3c:before {
    content:url("w3c.png");
    position: absolute;
    top:50%;
    left: -92px;
}
.pw:before {
    content:url("pw-72.png");
    position: absolute;
    top:50%;
    right: -92px;
}
.pw:after {
    right:0;
     border-right: 0;
    border-left-color: #00aabb;
    margin-right: -20px;
}

.hide { opacity: 0; display: none;}

.bottom { height: 25vh;}

.b1, .b2, .b3 { font-size:2em; animation-name: bouncy; animation-duration: 300ms; animation-iteration-count: infinite; display:inline-block; position: absolute;}
.b1 { left: 20px;}
.b2 { animation-delay: 75ms; left: 40px;}
.b3 { animation-delay: 150ms; left: 60px;}

@keyframes bouncy {
    0% { bottom: 20px }
    100% { bottom: 20px}
    50% { bottom: 30px;}
}