<input type="date">
<input type="number" min=0 max=10 value=0>
<input type="text" list="animals" placeholder="Animals">
<input type="search" list="animals" placeholder="Search...">

<details>
  <summary>Details</summary>
  <p>Peek-a-boo</p>
</details>

<ul>
  <li>This</li>
  <li>Is</li>
  <li>A</li>
  <li>List</li>
</ul>

<datalist id="animals">
  <option>Dog</option>
  <option>Cat</option>
  <option>Spider</option>
</datalist>

html { 
  --brand: hotpink; 
  scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand) }
:focus-visible { outline-color: var(--brand) }
::selection { background-color: var(--brand) }
::marker { color: var(--brand) }

::-webkit-calendar-picker-indicator {
  color: var(--brand)
}

::-webkit-clear-button {
  color: var(--brand);
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  color: var(--brand);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  color-scheme: dark light;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
  gap: 2ch;
}