<main role="main" id="main" tabindex="-1">
  <h1>Color Hacks – Intense Neutrals</h1>
  <h2>Intense (Contrast 21:1)</h2>
  <ul class="palette">
    <li>Aa</li>
    <li>Aa</li>
  </ul>
  <h2>Mild Shift (Contrast 17.5:1)</h2>
  <ul class="palette shift">
    <li>Aa</li>
    <li>Aa</li>
  </ul>
  <h2>Warm (Contrast 16.2:1)</h2>
  <ul class="palette warm">
    <li>Aa</li>
    <li>Aa</li>
  </ul>
</main>

*,::before,::after{background-repeat:no-repeat;box-sizing:border-box;color:inherit;cursor:inherit;font:inherit;hyphens:auto;line-height:inherit;margin:0;text-decoration:inherit;vertical-align:inherit;word-break:break-word;scroll-behavior:smooth}
::before,::after{text-decoration:inherit}
:root,html{-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;cursor:default;}

/* Begin custom code */
:root{
  background:#3D3D3E;
  color:#eee;
  font-family:sans-serif;
  font-size:16px;
  padding:2em;
}
h1{display:none}
h2{font-weight:900;font-size:120%}

.palette{
  list-style:none;
  padding:1rem 0 0;
  &+h2{margin-top:2rem}
  li{
    --dim:64px;
  --light:#fff;
  --dark:#000;
    background:var(--light);
    color:var(--dark);
    font-size:calc(var(--dim)/2);
    text-align:center;
    font-weight:600;
    font-family:serif;
    line-height:var(--dim);
    border-radius:calc(var(--dim)/10);
    width:var(--dim);
    height:var(--dim);
    display:inline-block;
    box-shadow:1px 4px 12px rgba(0,0,0,.2);
    margin:0 .25rem 0 0;
    &:nth-child(2){
      color:var(--light);
      background:var(--dark);
    }
  }
}
.shift>li{
  --light:#eee;
  --dark:#050505;
}
.warm>li{
  --light:#ebe6df;
  --dark:#080605;
}