<main role="main" id="main" tabindex="-1">
  <h1>Color Hacks – Primary offsets</h1>
  <h2>Primary</h2>
  <ul class="palette">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <h2>Hue offsets</h2>
  <ul class="palette offset">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></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:1.5rem 0 0;
  &+h2{margin-top:3rem}
  li{
    --dim:64px;
    background:red;
    border-radius:8px;
    width:var(--dim);
    height:var(--dim);
    display:inline-block;
    transform:rotate(25deg);
    box-shadow:4px 4px 12px rgba(0,0,0,.5);
    &:nth-child(2){background:hsl(30, 100%, 50%)}
    &:nth-child(3){background:hsl(60, 100%, 50%)}
    &:nth-child(4){background:hsl(120, 100%, 50%)}
    &:nth-child(5){background:hsl(240, 100%, 50%)}
    &:nth-child(6){background:hsl(270, 100%, 50%)}
    &:not(:first-child){
      margin-left:-1em;
    }
  }
}
.offset>li{
  &:first-child{background:hsl(345, 100%, 50%)}
  &:nth-child(2){background:hsl(15, 100%, 50%)}
  &:nth-child(3){background:hsl(45, 100%, 50%)}
  &:nth-child(4){background:hsl(105, 100%, 40%)}
  &:nth-child(5){background:hsl(225, 100%, 50%)}
  &:nth-child(6){background:hsl(255, 100%, 50%)}
}