mark.highlight {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


mark.circle{
    position:relative;
    z-index: 1;
  background-color: transparent;
}
mark.circle:before,
mark.circle:after{
    content: "";
    width: 120%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
    z-index: -1;
    border-radius: 100%;
    box-sizing: border-box;
}
mark.circle:before {
    border: 0.3vw solid rgba(255, 119, 119, 0.75);
    transform: rotate(-2deg);
}
mark.circle:after{
    border: 0.1vw solid rgba(255, 119, 119, 0.75);
    transform: rotate(2deg);
}