html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  max-width: 60ch;
  margin: auto;
  padding: 1rem;
  background-color: white;
}

.container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(red, yellow);
}

.bubble {
  z-index: 1;
  min-width: 50px;
  width: fit-content;
  background-color: #eee;
  border-radius: 4px;
  padding: 0.5em;
  margin: 0.2em;
  text-wrap: balance;
}

.bubble.primary {
  color: white;
  background-color: transparent;
  background-blend-mode: multiply;
  align-self: end;
  text-align: end;
}

  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together
  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together
  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  --gap: 20px;
  --width: 800px;
  --background: #fff;
  display: flex;
  flex-direction: column;
  max-width: var(--width);
  margin: 16px auto;
  padding: 0 16px;
  overflow: hidden;
  gap: var(--gap);
  box-shadow: 0 0 0 100vw var(--background);
  font-family: sans-serif;
}

.container:before {
  content: '';
  inset: 0;
  position: fixed;
  z-index: -1;
  background: linear-gradient(purple, blue);
}

.bubble {
  max-width: 80%;
  background-color: lightgray;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 0 0 var(--gap) var(--background);
  position: relative;
}

.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  inset: calc(var(--gap) / -2) auto;
  background-color: var(--background);
  width: var(--width);
}

.bubble::before {
  right: 100%;
}

.bubble::after {
  left: 100%;
}

.bubble.primary {
  background-color: transparent;
  color: #fff;
  align-self: flex-end;
}

  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together
  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together
  
show weekend?
  
I'm down!
  
lets do this its been way to long since we were all together!
  
Whos down for a pregame
  
YES! I got the day off! Say when and where?
  
Hows about Old Town at 4? we can get some grub and then head over to the venue
  
Yeah getting the band back together