@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");@import url("https://fonts.googleapis.com/css2?family=Exo+2&display=swap");html{--border-radius:5px;--tail-size:15px;--bubble-width:192px;--offset:5px;--bubble-color:#fff;--border-color:#000;--border-width:3px;--font-color:#000}.bubble.g0{--bubble-color:#fff}.bubble.g1{--bubble-color:#aca6aa}.bubble.g2{--bubble-color:#9fe3dc}.bubble.g3{--bubble-color:#e1a5b2}.bubble.g4{--bubble-color:#ffeb9b}.bubble.g5{--bubble-color:#93d1fb}.bubble.t0{--font-color:#fff}.bubble.t1{--font-color:#30222c}.bubble.t2{--font-color:#10b9a8}.bubble.t3{--font-color:#b51e40}.bubble.t4{--font-color:#ffce06}.bubble.t5{--font-color:#0872b8}.bubble.b0{--border-color:#fff}.bubble.b1{--border-color:#6e646b}.bubble.b2{--border-color:#57cec2}.bubble.b3{--border-color:#cb6179}.bubble.b4{--border-color:#ffdc50}.bubble.b5{--border-color:#31a8f6}.bubble.w1{--bubble-width:92px}.bubble.w2{--bubble-width:128px}.bubble.w3{--bubble-width:192px}.bubble.w4{--bubble-width:256px}.bubble.w5{--bubble-width:320px}.bubble.w6{--bubble-width:640px}div.bubble{display:flex;flex-wrap:wrap;justify-content:center}.bubble{align-items:center;background-color:var(--bubble-color);color:var(--font-color);display:inline-block;display:flex;height:auto;margin:24px;max-width:var(--bubble-width);padding:20px;position:relative;text-align:center}.bubble.rounded{border-radius:var(--border-radius)}.bubble.shadow{box-shadow:0 4px 4px -4px #444}.bubble.border{border:var(--border-width) solid var(--border-color)}.tail:before{border:var(--tail-size) solid transparent;color:var(--bubble-color);z-index:100}.tail.border:after,.tail:before{content:" ";height:0;position:absolute;width:0}.tail.border:after{border:calc(var(--tail-size) + var(--border-width)*2.5) solid transparent;color:var(--border-color)}.left:before{border-left:0;border-right-color:var(--bubble-color);left:calc(var(--tail-size)*-1)}.left.border:after{border-left:0;border-right-color:var(--border-color);left:calc(var(--tail-size)*-1 - var(--border-width)*2.5)}.right:before{border-left-color:var(--bubble-color);border-right:0;right:calc(var(--tail-size)*-1)}.right.border:after{border-left-color:var(--border-color);border-right:0;right:calc(var(--tail-size)*-1 - var(--border-width)*2.5)}.top:before{border-bottom-color:var(--bubble-color);border-top:0;top:calc(var(--tail-size)*-1)}.top.border:after{border-bottom-color:var(--border-color);border-top:0;top:calc(var(--tail-size)*-1 - var(--border-width)*2.5)}.bottom:before{border-bottom:0;border-top-color:var(--bubble-color);bottom:calc(var(--tail-size)*-1)}.bottom.border:after{border-bottom:0;border-top-color:var(--border-color);bottom:calc(var(--tail-size)*-1 - var(--border-width)*2.5)}.north:before{border-top:0;top:calc(var(--offset) + var(--border-radius))}.north.border:after{border-top:0;top:calc(var(--offset) + var(--border-radius) - var(--border-width))}.south:before{border-bottom:0;bottom:calc(var(--offset) + var(--border-radius))}.south.border:after{border-bottom:0;bottom:calc(var(--offset) + var(--border-radius) - var(--border-width))}.west:before{border-left:0;left:calc(var(--offset) + var(--border-radius))}.west.border:after{border-left:0;left:calc(var(--offset) + var(--border-radius) - var(--border-width))}.east:before{border-right:0;right:calc(var(--offset) + var(--border-radius))}.east.border:after{border-right:0;right:calc(var(--offset) + var(--border-radius) - var(--border-width))}