angel.css

* {
  box-sizing: border-box;
}

:root {
  background: indigo;
  color: thistle;
}

[data-raiz="1"] {
  color: indigo;
  background: hotpink;
}

[data-raiz="2"] {
  color: indigo;
  background: sandybrown;
}

[data-raiz="3"] {
  color: indigo;
  background: #ed3;
  background: #ec0;
  background: khaki;
}

[data-raiz="4"] {
  color: indigo;
  background: sandybrown;
  background: coral;
  background: salmon;
}

[data-raiz="5"] {
  color: indigo;
  background: orange;
  background: orangered;
  background: deepskyblue;
}

[data-raiz="6"] {
  color: indigo;
  background: mediumspringgreen;
  background: turquoise;
}

[data-raiz="7"] {
  color: #213;
  background: skyblue;
}

[data-raiz="8"] {
  color: #213;
  background: plum;
}

[data-raiz="9"] {
  color: #213;
  background: palevioletred;
  background: violet;
}

::selection {
  background: gold;
  color: #000;
}

:any-link {
  color: deepskyblue;
  color: inherit;
}

:hover {
  filter: hue-rotate(300deg);
  filter: none;
}

:enabled,
:disabled {
  font-size: 1.5rem;
  border-style: solid;
  border-radius: 0;
  border-color: thistle;
  background: thistle;
  color: #000;
}

:disabled {
  border-style: dashed;
  border-color: #777;
  background: #999;
  color: #000;
}

::placeholder {
  color: currentColor;
}

:focus  {
  filter: hue-rotate(9deg);
  outline-color: thistle;
  outline-style: solid;
  outline-width: thick;
}

:active {
  filter: hue-rotate(18deg);
}

:invalid {
  filter: hue-rotate(36deg);
}

html {
  font-family: sans-serif;
  font-size: calc(2ex + 1vmin);
  line-height: 2;
}

body {
  box-sizing: border-box;
  max-width: 60em;
  margin: auto;
  margin-block-start: 2rem;
  margin-block-end: 5rem;
  padding-inline-start: 5vw;
  padding-inline-end: 5vw;
  overflow-wrap: anywhere;
}

output {
  filter: hue-rotate(300deg);
}

input {
  border-width: thick;
  padding: .5ex;
  max-width: 80%;
  min-width: 40%;
}

button {
  border-width: thick;
  padding: .5ex;
  max-width: 20%;
  min-width: 5ex;
}

[href*=numb] { 
  font-size: 1.236rem;
}

h3 { line-height: normal; font-size: 1.236rem }
h2 { line-height: normal; font-size: 1.618rem }
h1 { line-height: normal; font-size: 2rem }
h2 a { font-weight: 400 }
label { line-height: 1.5; font-size: 2rem }
output { font-weight: 500 }
b { font-weight: 700 }

header {
  line-height: 1.2;
  margin-block-end: 1rem;
}

form p {
  margin-block-start: 1ex;
  margin-block-end: 0;
}

form p:first-of-type {
  margin-block-start: 1em;
}

aside {
  max-width: 33em;
}

aside a {
  margin-inline-end: 1ex;
}

main,
label,
section {
  display: block;
}

form,
aside,
header,
footer {
  display: block;
  margin: 0;
  margin-block-end: 2em;
}

[hidden] + kbd,
[hidden] { display: none }

[role=status] {
  font-size: 1.5rem;
  margin-block-end: 1rem;
}

@media (max-width: 60em) {
  input {
    max-width: 66%;
    min-width: 66%;
  }

  button {
    max-width: 22%;
    min-width: 22%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  * {
    transition:
      30ms color,
      50ms filter,
      80ms background-color;
  }
}