<!-- add/remove "plus" to the class for "Computer Languages" -->
<div class="venn" aria-labelledby="title" role="img">
  <span id="title">Computer languages</span>
  <div>Programming<br/>languages</div>
  <div>Markup<br/>languages</div>
</div>

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}

.venn {
  --background: #8d77; // color of the wrapper (only with "plus" class)
  --color1: #3698; // color of the left circle
  --color2: #9638; // color of the right circle
  --blend-mode: hard-light; // blend mode for the venn diagram
  display: flex;
  padding: 15vmin 5vmin;
  border-radius: 100%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 4vmin;
  text-align: center;
  position: relative;
  text-transform: capitalize;

  span {
    position: absolute;
    display: none;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -5vmin);
  }

  div {
    --top: 0;
    border-radius: 50%;
    background: var(--color1);
    width: 50vmin;
    height: 50vmin;
    display: grid;
    place-items: center;
    transform: translate(2vmin, var(--top));
    mix-blend-mode: var(--blend-mode);

    &:nth-of-type(2) {
      background: var(--color2);
      transform: translate(-2vmin, var(--top));
    }
  }

  &.plus {
    background: #8d77;

    span {
      display: block;
    }
    
    div {
      --top: 5vmin;
    }
  }
}