a {
  all: initial;
}

h2 {
  font-variant: small-caps;
}

a {
  break-inside: avoid;
  break-before: avoid-column;
  break-after: always;
}

:root {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}

.grid-1 {
  gap: 20px;
}

.grid-2 {
  column-gap: 40px;
  row-gap: 20px;
}

section {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
}

@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}

div {
  border-color: unset;
  color: unset;
}

p {
  color: alpha(from red / calc(alpha * 0.5));
}

nav :any-link > span {
  background-color: yellow;
}

input:blank {
  background-color: yellow;
}

p {
  font-size: calc(pow(e, pi) * 1rem);
}

a {
  color: mediumvioletred;
}

@layer defaults {
  a { color: maroon; }
}

[frame=hsides i] {
  border-style: solid none;
}

button {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

.background {
  background-color:#ccc;
}
.background.color-adjust {
  color-adjust: economy;
}
.background.color-adjust-exact {
  color-adjust: exact;
}

p {
  color: color(display-p3 1 0.5 0);
  color: color(display-p3 1 0.5 0 / .5);
}

p {
  color: color(display-p3-linear 0.3081 0.014 0.0567);
}

em {
  background-color: hsl(120deg 100% 25%);
  color: rgb(0 255 0);
}

p {
  color: color-mix(in lch, purple 50%, plum 50%);
}

p {
  color: color-mix(in lch, red, lime, blue);
}

.container {
  contain: layout inline-size;
}

@container (min-width: 700px) {
  .container {
    
  }
}

.element {
  content: url(tree.jpg) / "image with a tree";
}

p {
  color: contrast-color( purple );
}

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {}

blockquote:dir(rtl) {
  margin-right: 10px;
}

blockquote:dir(ltr) {
  margin-left: 10px;
}

.element {
  display: inline flow-root;
  display: inline flex;
  display: block grid;
}

.pie_chart {
  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}

p {
  font-size: calc(pow(10, 12) * 1rem);
  font-size: calc(sqrt(100) * 1rem);
  font-size: calc(hypot(3, 4) * 1rem);
  font-size: calc(log(10) * 1rem);
  font-size: calc(exp(10) * 1rem);
}

body {
  font-family: fangsong;
}

span:first-child {
  float: inline-start;
}

:focus:not(:focus-visible) {
  outline: 0;
}

form:focus-within {
  background: rgb(0 128 0);
}

@font-face {
  src: url(file.woff2) format(woff2);
}

p {
  font-width: 150%;
}

@media (color-gamut: rec2020) {
	p {
		color: oklch(40% 0.234 0.39 / 0.5);
	}
}

.pie_chart {
  background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}

a:has(> img) {
  display: block;
}

section {
  background-color: #f3f3f3f3;
  color: #0003;
}

p {
  color: hwb(120 44% 50%);
}

p {
  text-indent: 2ic;
}

p {
  background-image: image-set(
    "foo.png" 1x,
    "foo-2x.png" 2x,
    "foo-print.png" 600dpi
  );
}

input:in-range {
  background-color: rgb(0 255 0 / 0.25);
}
input:out-of-range {
  background-color: rgb(255 0 0 / 0.25);
  border: 2px solid red;
}

p:is(:first-child, .special) {
  margin-top: 1em;
}

body {
  color: lab(80% 50 20);
}

body {
  color: lch(53% 105 40);
}

body {
  color: light-dark(cyan, magenta);
}

div {
  overflow-block: scroll;
}

div {
  overscroll-behavior-block: scroll;
}

span:first-child {
  margin-inline-start: 10px;
}

area {
  resize: inline;
}

span:first-child {
  width: 5vi; height: 10vb; 
}

@media (aspect-ratio: 1.77) {
  html {
    background-color: cyan;
  }
}

@mixin --foo() {
    color: green;
  }

.foo {
  @apply --foo;
}

p {
  padding: calc(1px + calc(4 / 3));
}

article {
  & p {
    color: #333;
  }
}

p:not(:first-child, .special) {
  margin-top: 1em;
}

p {
  color: oklab(72.322% -0.0465 -0.1150);
  color: oklch(72.322% 0.12403 247.996);
}

img {
  opacity: 90%;
}

html {
  overflow: hidden auto;
}

p {
  overflow-wrap: break-word;
}

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  overscroll-behavior: none;
}

.example {
  place-content: flex-end;
  place-items: center / space-between;
  place-self: flex-start / center;
}

div {
  position-area: start end;
}

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

@property --color-a, --color-b {
  inherits: true;
  initial-value: black;
  syntax: "<color>";
}

div {
  color: oklch(0.7, 0.2, random(120deg, 240deg));
}

input:read-only {
  background-color: #ccc;
}

html {
  color: rebeccapurple;
}

p {
  color: lch(from peru calc(l * 0.8) c h);
}

:scope {
  background-color: pink;
}

div {
  order: abs(-10);
  order: sign(-10);
}

div {
  background: src('./image.jpg');
}

div {
  left: mod(18px, 5px);
  top: rem(18px, 5px);
  right: round(2.5px, 1px);
  bottom: round(up, 15px, 7px);
}

@property --color {
  inherits: true;
  initial-value: black;
  syntax: <color>;
}

body {
  font-family: system-ui;
}

p {
  text-decoration: green wavy underline 2px;
}

body {
  left: sin(45deg);
  left: cos(45deg);
  left: tan(45deg);
  left: asin(0.5);
  left: acos(0.5);
  left: atan(10);
  left: atan2(-1, 1);
}

@when media(width >= 640px) and (supports(display: flex) or supports(display: grid)) {
  
} @else media(pointer: coarse) {
  
} @else {
  
}

a:where(:not(:hover)) {
  text-decoration: none;
}

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

article :--heading + p {}

@media (max-width: env(--brand-small)) {
  body {
    padding: env(--brand-spacing);
  }
}