@font-face {
  font-family: "Oswald";
  font-style: normal;
  src: url("../fonts/Oswald-VariableFont_wght.ttf");
}
@font-face {
  font-family: "atkinson";
  src: url("../fonts/Atkinson-Hyperlegible-Regular-102a.woff2");
  font-weight: normal;
}
@font-face {
  font-family: "atkinson";
  src: url("../fonts/Atkinson-Hyperlegible-Italic-102a.woff2");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "atkinson";
  src: url("../fonts/Atkinson-Hyperlegible-Bold-102a.woff2");
  font-weight: bold;
}
@font-face {
  font-family: "atkinson";
  src: url("../fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2");
  font-weight: bold;
  font-style: italic;
}
:root {
  --page: #ecebe9;
  --case: #dfdfda;
  --table: #f0cece;
  --form: #eeeeb0;
  --media: #a6d3b9;
  --list: #a0abcc;
  --text: #db9bbf;
  --structure: #e0c1ac;
  --obs: #cecece;
  --obs2: #999;
  --exp: #6688af;
  font-size: 16px;
  font-family: "Oswald";
  font-weight: 300;
}
body {
  background-color: var(--page);
}
table.periodic {
  border-collapse: collapse;
  font-size: 0;
  margin: 0 auto;
}
table.periodic caption {
  font-size: 2rem;
  caption-side: top;
}
table.periodic td {
  font-size: 1rem;
  border: thin solid #aaa;
  width: 4em;
  height: 4em;
  position: relative;
  display: inline-block;
  margin: 0.15em;
  overflow: hidden;
  vertical-align: bottom;
  color: rgba(0, 0, 0, 0.4);
}
table.periodic td.vide {
  background: none;
  border-color: transparent;
}
.n {
  position: absolute;
  top: 0;
  right: 0.3em;
  font-size: 0.8em;
  font-weight: 400;
}
.s {
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0.2em;
  font-size: 1.8em;
  text-align: center;
  font-family: "atkinson", serif;
  font-weight: bold;
}
.e {
  font-variant: small-caps;
  position: absolute;
  bottom: 0em;
  left: 0.2em;
}
table td,
table.legend td {
  mix-blend-mode: darken;
  background-color: var(--case);
}
table td.table,
table.legend td.table {
  background-color: var(--table);
}
table td.form,
table.legend td.form {
  background-color: var(--form);
}
table td.media,
table.legend td.media {
  background-color: var(--media);
}
table td.list,
table.legend td.list {
  background-color: var(--list);
}
table td.text,
table.legend td.text {
  background-color: var(--text);
}
table td.structure,
table.legend td.structure {
  background-color: var(--structure);
}
table td.obs,
table.legend td.obs {
  background-color: var(--obs);
  color: var(--obs2);
}
table td.exp,
table.legend td.exp {
  border: 0.15em dashed var(--exp);
  color: var(--exp);
}
table.legend td {
  padding: 0.5em 1em;
}