:root {
  --vp-c-brand-1: #0080a8;
  --vp-c-brand-2: #0289b2;
  --vp-c-brand-3: #0097c7;

  --vp-home-hero-image-background-image: radial-gradient(
    #2a2a2834 1px,
    transparent 0
  );
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.dark {
  --vp-home-hero-name-color: #fff;

  --vp-home-hero-image-background-image: radial-gradient(
    rgba(255, 255, 255, 0.07) 1px,
    transparent 0
  );
}

.VPNavBarTitle > .title {
  font-family: var(--vp-font-family-mono);

  &:after {
    content: ";";
    color: var(--vp-c-text-3);
    opacity: 0.6;
  }
}

/**
* Home
*/
.image-bg {
  --spread: 30;
  --dot: 1;
  --size: 1000;
  --speed: 100;
  --bg: linear-gradient(var(--vp-c-text-1), var(--vp-c-brand-1));
  width: 800px !important;
  height: 500px !important;
  max-width: 100vw;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    mask:
      radial-gradient(
          circle at 50% 50%,
          white calc(var(--dot) * 1px),
          transparent calc((var(--dot) * 1px) + 0.5px)
        )
        50% 50% / calc(var(--spread) * 1px) calc(var(--spread) * 1px),
      url("https://assets.codepen.io/605876/noise-mask.png")
        calc(var(--size) * 1px) 50% / calc(var(--size) * 1px)
        calc(var(--size) * 1px);
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    animation: flicker calc(var(--speed) * 1s) infinite linear;
    border-radius: 12px;
  }

  &:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      var(--vp-c-bg) 20%,
      transparent 50%,
      var(--vp-c-bg) 80%
    );
  }
}

@keyframes flicker {
  to {
    mask-position:
      50% 50%,
      0 50%;
  }
}

.name {
  font-family: var(--vp-font-family-mono);
  text-align: left;
  --vp-home-hero-name-color: var(--vp-c-text-1);

  &:after {
    content: ";";
    color: var(--vp-c-text-3);
    opacity: 0.5;
  }
}

.tagline {
  font-family: var(--vp-font-family-mono);
  line-height: 1.3 !important;
  font-size: 14px !important;
  text-align: left;
}

.VPHomeFeatures {
  margin-bottom: 1em;
}

/**
* Code snippet & editor
*/
.cm-editor *,
pre {
  font-size: 13px;
  line-height: 1.4;
}
