@media screen and (prefers-color-scheme: light) {

  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }

  h1, h2, h4, .Cru-Black {
    -webkit-font-smoothing: antialiased;
  }

  :root body {
    --color-page-background-components-r: 255;
    --color-page-background-components-g: 255;
    --color-page-background-components-b: 255;
    --color-page-background-components-a: 1;
    --color-page-background: rgba(
      var(--color-page-background-components-r),
      var(--color-page-background-components-g),
      var(--color-page-background-components-b),
      var(--color-page-background-components-a)
    );
    --color-page-darken: #fff;
    --color-context-note: rgba(2, 7, 34, 0.35);
    --color-context-note-darker: rgba(2, 7, 34, 0.4);
    --color-default-text: #020722;
    --color-timeline-event: rgba(2, 7, 34, 1);
    --color-timeline-tag: rgba(0, 38, 255, 1);
    --color-timeline-tag: #0099ff;
    --color-link-wavy-underline: rgba(2, 7, 34, 0.15);
    --color-link-wavy-underline-active: rgba(0, 38, 255, 0.3);
    --color-timeline-dot: var(--color-timeline-tag);
    --color-timeline-dot-shadow: rgba(44, 96, 125, 0.13);
    --color-timeline-ribbon-background: rgba(2, 7, 34, 0.2);
    --color-timeline-ribbon-background-components-r: 2;
    --color-timeline-ribbon-background-components-g: 7;
    --color-timeline-ribbon-background-components-b: 34;
    --color-timeline-ribbon-gradient-start: rgba(2, 7, 34, 0);
    --color-timeline-ribbon-primary: rgba(
      var(--color-timeline-ribbon-background-components-r),
      var(--color-timeline-ribbon-background-components-g),
      var(--color-timeline-ribbon-background-components-b),
      0.1
    );
    --color-timeline-ribbon-end-components-r: 2;
    --color-timeline-ribbon-end-components-g: 7;
    --color-timeline-ribbon-end-components-b: 34;
    --color-timeline-ribbon-end: rgba(
      var(--color-timeline-ribbon-end-components-r),
      var(--color-timeline-ribbon-end-components-g),
      var(--color-timeline-ribbon-end-components-b),
      0.15
    );
    --color-link-underline-active: rgba(
      var(--color-timeline-ribbon-background-components-r),
      var(--color-timeline-ribbon-background-components-g),
      var(--color-timeline-ribbon-background-components-b),
      0.3
    );
    --color-team-box-background: rgba(255, 255, 255, 0.8);
    --color-team-box-background-start: rgba(2, 7, 34, 0.05);
    --color-team-box-background-end: rgba(2, 7, 34, 0.02);
    --color-team-box-avatar-shadow: rgba(16, 45, 89, 0.13);
    --color-switch-hairline: var(--color-page-background);

    .logo-noise {
      content: -webkit-image-set(
        url("https://static.karbon.agency/img/karbon-logo-noise-light.png") 1x,
        url("https://static.karbon.agency/img/karbon-logo-noise-light@2x.png") 2x,
        url("https://static.karbon.agency/img/karbon-logo-noise-light@3x.png") 3x
      );
      content: image-set(
        url("https://static.karbon.agency/img/karbon-logo-noise-light.png") 1x,
        url("https://static.karbon.agency/img/karbon-logo-noise-light@2x.png") 2x,
        url("https://static.karbon.agency/img/karbon-logo-noise-light@3x.png") 3x
      );
    }
    .logo {
      content: url("https://static.karbon.agency/img/karbon-logo-without-noise-light.svg");
    }
    .pen-underline {
      background-image: url("https://static.karbon.agency/img/pen-underline-light.svg");
    }
    .pen-strikeout span {
      background-image: url("https://static.karbon.agency/img/pen-strikeout-light.svg");
    }

    .nickname {
      /* opacity: 01; */
      /* color: var(--color-timeline-tag-light); */
    }

    .timeline-tag h2 .no-break span {
      opacity: 0.4;
    }

    .timeline-event-minor p {
      color: var(--color-context-note-darker);
    }

    .border-required {
      outline: 2px solid var(--color-timeline-ribbon-primary);
      border-radius: 26px;
    }

    .timeline-event blockquote p {
      opacity: 0.4;
    }

    #team h4 {
      color: var(--color-default-text);
      opacity: 0.55;
    }

    #team h4 .wiggles:before {
      text-decoration-color: var(--color-default-text);
      opacity: 0.15;
    }

    .brand-mastodon {
      content: url("https://static.karbon.agency/img/mastodon-brands-solid-light.svg");
      opacity: 0.8;
    }
    .brand-threads {
      content: url("https://static.karbon.agency/img/threads-brands-solid-light.svg");
      opacity: 0.8;
    }

    a {
      color: var(--color-default-text);
      text-decoration: underline;
      text-decoration-style: wavy;
      text-decoration-color: var(--color-link-wavy-underline);
      text-underline-offset: 2px;
      transition: .1s;
    }

    a:hover, a:active {
      color: var(--color-timeline-tag);
      text-decoration-color: var(--color-link-wavy-underline-active);
    }

    .social-link a span {
      text-decoration: underline;
      text-decoration-style: wavy;
      text-decoration-color: var(--color-link-wavy-underline);
      text-underline-offset: 2px;
    }
    .social-link a:hover span, .social-link a:active span {
      color: var(--color-timeline-tag);
      text-decoration-color: var(--color-link-wavy-underline-active);
    }

    .social-link a {
      text-decoration: none;
    }

    .copyright {
      opacity: 0.24;
    }
  }
}