html {
  /* Colors mapped from setcolor.css */
  --profileBackground:          var(--color-bg);
  --desktop-frame-color:        var(--color-frame);
  --bodyText:                   #ffffff;
  --profileTitleText:           var(--color-accent);
  --profileDescriptionText:     var(--color-muted);
  --header-text-color:          var(--color-accent);
  --button-style-text:          var(--color-accent);
  --button-style-background:    var(--color-button);
  --button-style-shadow-color:  var(--color-accent);
  --button-style-contrast-color: var(--color-accent);
  --background-contrast-color:  var(--color-muted);
  --socialLinkFill:             var(--color-accent);
  --bannerBackground:           color-mix(in srgb, var(--color-bg) 60%, white 40%);
  --bannerText:                 #ffffff;
  --article-text-color:         var(--color-muted);
  --article-heading-color:      var(--color-accent);
  --article-bg:                 color-mix(in srgb, var(--color-bg) 80%, white 20%);
  --article-border-radius:      8px;

  /* Layout & spacing */
  --button-style-background-hover: color-mix(in srgb, var(--button-style-background) 93%, var(--button-style-contrast-color) 7%);
  --button-style-border: none;
  --button-style-border-color: transparent;
  --button-style-shadow: 0.3px 0.5px 0.7px hsl(0deg 0% 6.7% / 0.021), 0.9px 1.8px 2.5px -0.6px hsl(0deg 0% 6.7% / 0.026), 2px 4px 5.5px -1.2px hsl(0deg 0% 6.7% / 0.031), 4.6px 9.3px 12.8px -1.7px hsl(0deg 0% 6.7% / 0.035);
  --button-style-radius: 8px;
  --button-style-inner-radius: min(var(--button-style-radius), max(4px, calc(var(--button-style-radius) - 8px)));
  --button-style-skeleton-color: rgba(0, 0, 0, 0.05);
  --header-font-family: Link Sans Product;
  --header-font-weight: 600;
  --profile-container-desktop-width: 580px;
  --header-bio-font-size: 16px;
  --link-gap: 14px;
  --button-style-inner-padding: var(--link-gap);
  --link-preview-thumbnail-width: 160px;
  --linkRadius: var(--button-style-radius);
  --backdrop-contrast-color: #000000;
  --linkBackground: var(--button-style-background);
  --linkText: var(--button-style-text);
  --linkHoverBackground: var(--button-style-background-hover);
  --linkHoverText: var(--button-style-text);
  --defaultAvatarBackground: #60696C;
  --defaultAvatarText: #FFFFFF;
  --linkShadow: #000;
  --profileFontFamilyPrimary: Link Sans Product;
  --profileFontFamilySecondary: Inter;
  --profileFontWeightNormal: 500;
  --profileFontWeightBold: 700;
  --profileDescriptionFontWeight: 500;
  --linkTextFontWeight: 500;
  --headerFontWeight: 700;
  --headerFontSize: 20px;
  --embedLinkTextFontSize: 14px;
  --linkHeaderFontSize: 14px;
  --bannerFontSize: 14px;
  --profileDescriptionLineHeight: 1.5;
  --headerLineHeight: 1.5;
  background-color: var(--profileBackground);
}
#profile-background {
  background-image:
    radial-gradient(ellipse 55% 45% at 18% 22%, var(--cloud-color-1) 0%, transparent 65%),
    radial-gradient(ellipse 60% 38% at 72% 62%, var(--cloud-color-1) 0%, transparent 68%),
    radial-gradient(ellipse 42% 48% at 55% 38%, var(--cloud-color-1) 0%, transparent 55%),
    radial-gradient(ellipse 48% 52% at 82% 18%, var(--cloud-color-2) 0%, transparent 60%),
    radial-gradient(ellipse 52% 58% at 22% 78%, var(--cloud-color-2) 0%, transparent 62%),
    radial-gradient(ellipse 78% 55% at 50% 92%, var(--cloud-color-2) 0%, transparent 70%);
}

@media screen and (min-width: 576px) {
  html {
    --headerFontSize: 20px;
    --embedLinkTextFontSize: 16px;
    --linkHeaderFontSize: 16px;
    --link-preview-thumbnail-width: 224px;
  }
}