@custom-media --KeepName (min-width: 500px);

.foo {
  color: hsl(0.75turn, 60%, 70%);
}

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

a::after {
  content: "→";
}

a:after {
  content: "→";
}

::-webkit-progress-bar {
  background-color: orange;
}

TABLE {
}

/* apply a dashed border to all unresolved elements */
:unresolved {
  border: 1px dashed red;
  display: inline-block;
}

/* x-panel's that are unresolved are red */
x-panel:unresolved {
  color: red;
}

/* once the definition of x-panel is registered, it becomes green */
x-panel {
  color: green;
  display: block;
  padding: 5px;
  display: block;
}

:host {
  all: initial;
  display: block;
  contain: content;
  text-align: center;
  background: linear-gradient(to left, hotpink, transparent);
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  transition: transform 0.2s ease-out;
}
:host([hidden]) {
  display: none;
}
:host(:hover) {
  transform: scale(1.1);
}