@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400&display=swap');

.brand-mark {
  position: relative;
  overflow: visible;
  border: 0;
  color: #fff;
  background: #503663;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 300;
}

.brand-mark::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, #b66b20 0 0.55px, transparent 0.7px) 40% 90% / 1.4px 1.4px no-repeat,
    radial-gradient(circle, #39769b 0 0.55px, transparent 0.7px) 45% 90% / 1.4px 1.4px no-repeat,
    radial-gradient(circle, #397d59 0 0.55px, transparent 0.7px) 50% 90% / 1.4px 1.4px no-repeat,
    radial-gradient(circle, #70558f 0 0.55px, transparent 0.7px) 55% 90% / 1.4px 1.4px no-repeat,
    radial-gradient(circle, #c4514b 0 0.55px, transparent 0.7px) 60% 90% / 1.4px 1.4px no-repeat;
  content: "";
  pointer-events: none;
}

.brand > span:nth-child(2),
.brand > .brand-name {
  position: relative;
  padding-block-end: 12px;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 1px;
}

.brand > span:nth-child(2)::after,
.brand > .brand-name::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 55px;
  height: 7px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #b66b20 0 3.5px, transparent 4px) 0 50% / 7px 7px no-repeat,
    radial-gradient(circle, #39769b 0 3.5px, transparent 4px) 12px 50% / 7px 7px no-repeat,
    radial-gradient(circle, #397d59 0 3.5px, transparent 4px) 24px 50% / 7px 7px no-repeat,
    radial-gradient(circle, #70558f 0 3.5px, transparent 4px) 36px 50% / 7px 7px no-repeat,
    radial-gradient(circle, #c4514b 0 3.5px, transparent 4px) 48px 50% / 7px 7px no-repeat;
  content: "";
}