<main role="main" id="main" tabindex="-1">
  <h1>Color Hacks – Avoid the Mud</h1>
  <h2>Muddy</h2>
  <ul class="palette">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <h2>Saturation only</h2>
  <ul class="palette rich">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <h2>Saturation and Hue Adjust</h2>
  <ul class="palette vibe">
    <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;
  margin:.5rem 0 0;
  padding:0;
  display:flex;
  max-width:60ch;
  &+h2{margin-top:.5rem}
  li{
    --rad:6px;
    flex:1 0 auto;
    background:red;
    height:20px;
    display:inline-block;
    &:first-child{
      border-radius:var(--rad) 0 0 var(--rad);
      background:hsl(225, 60%, 18%)}
    &:nth-child(2){background:hsl(225, 60%, 34%)}
    &:nth-child(3){
      flex:3 0 auto;
      background:hsl(225, 60%, 50%)
    }
    &:nth-child(4){background:hsl(225, 60%, 66%)}
    &:last-child{
      border-radius:0 var(--rad) var(--rad) 0;
      background:hsl(225, 60%, 82%)}
  }
}
.rich>li{
    &:first-child{background:hsl(225, 100%, 18%)}
    &:nth-child(2){background:hsl(225, 80%, 34%)}
    &:nth-child(4){background:hsl(225, 80%, 66%)}
    &:last-child{background:hsl(225, 100%, 82%)}
}
.vibe>li{
    &:first-child{background:hsl(235, 100%, 18%)}
    &:nth-child(2){background:hsl(230, 80%, 34%)}
    &:nth-child(4){background:hsl(220, 80%, 66%)}
    &:last-child{background:hsl(215, 100%, 82%)}
}