@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --page-bg: #F9F9F9;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--page-bg);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
}

.content{
  width: 100%;
  max-width:1200px; 
}

.content-image{
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.content-image img{
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  border-radius: 16px;
}

.bubble-row{
  display: flex;
  margin: 18px 0;
}

.bubble-row.left{
  justify-content: flex-start;
}

.bubble-row.right{
  justify-content: flex-end;
}

.bubble{
  --scale: 1.2;

  --bg: #25a55b;
  --text: #fff;

  --pad-y: calc(12px * var(--scale));
  --pad-x: calc(18px * var(--scale));

  --tail-w: calc(30px * var(--scale));
  --tail-h: calc(30px * var(--scale));
  --tail-inset: calc(-11.5px * var(--scale));
  --tail-drop: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: min(70ch, 80vw);
  min-height: calc(60px * var(--scale));

  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  color: var(--text);

  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(24px * var(--scale));
  line-height: 1.25;

  border-radius: calc(30px * var(--scale));

  overflow: visible;
  overflow-wrap: anywhere;
}

.bubble::after{
  content:"";
  position:absolute;
  width: var(--tail-w);
  height: var(--tail-h);
  bottom: calc(-1 * var(--tail-drop));

  background-color: var(--bg);

  -webkit-mask: url("./svg/bubble-tail.svg") no-repeat center / contain;
  mask: url("./svg/bubble-tail.svg") no-repeat center / contain;

  transform-origin: center;
  pointer-events: none;
}

.bubble-row.right .bubble::after{
  right: var(--tail-inset);
  transform: scaleX(1);
}

.bubble-row.left .bubble::after{
  left: var(--tail-inset);
  transform: scaleX(-1);
}

.bubble-row.left .bubble{
  --bg: #E5E5E5;
  --text: #101010;
}

.bubble-row.right .bubble{
  --bg: #1FAA56;
  --text: #fff;
}