a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 75%);
}

"The Jedi use the cascade for knowledge and defense, never for attack."

...

"But only the Sith deal in absolutes!"

:where() apply styles with 0 specificity. It's a great way to provide defaults to css classes.

Another modern solution is to use @layer.

Wow! mix-blend-mode: multiply; and the linear-gradient effect are awesome.

There can be a day where Carousels will be implemented only in CSS.

Avoid layered text-shadows for text outlines.

Use paint-order: stroke fill instead!

How to customize gaps between elements?

We don't have a great way to do it currently.

• Adjust the vertical margin of the title or description.
  Wrap title and description in a new container and re-apply flexbox with a smaller spacing.
  Use the default flow layout with margins.

Show elements in an input?

✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM

✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true

Use inset: -8px to make the element overflows in its container.

Naming conventions for CSS

Focus by demotion or the focus stands out because all other elements are hidden.

A switch input with an Astronaut

minimal HTML, powered by the offset property, responsive.

A css reset.

The font family can be simplified with system-ui.

I don't know if it is pertinent to make the font-size bigger than the user wants it...

Crazy easter eggs everywhere

From scratch

The author provides a list of hosting too: https://web.pixelshannon.com/make/#:~:text=where%20can%20i%20publish%20my%20website%20for%20free%3F

A modern marquee element