:root {
      font-family: 'Courier New', Courier, monospace;
      --rounding: 0.8rem;

      --card-bs-light:        inset 0 1rem 0.1rem -1rem;
      --card-bs-shadow:       inset 0 -0.2rem 0.1rem -0.1rem;
      --card-bs-cast:         0 0 0.3rem;

      --bs-0: -0.1rem -0.1rem 0.25rem;
      --bs-1: 0.1rem 0.1rem 0.25rem;

      --rim-border: solid 0.2rem;


      /* Base16 */
      --base00: #000000;
      --base01: #000000;
      --base02: #000000;
      --base03: #000000;
      --base04: #000000;
      --base05: #000000;
      --base06: #000000;
      --base07: #000000;
      --base08: #000000;
      --base09: #000000;
      --base0A: #000000;
      --base0B: #000000;
      --base0C: #000000;
      --base0D: #000000;
      --base0E: #000000;
      --base0F: #000000;
      
      /* BaseLS */
      --base10: 0, 0, 0;
      --base11: 0, 0, 0;
      --base12: 0, 0, 0;
      --base13: 0, 0, 0;
      --base14: 0, 0, 0;
      --base15: 0, 0, 0;
      --base18: 0, 0, 0;
      --base19: 0, 0, 0;
      --base1A: 0, 0, 0;
      --base1B: 0, 0, 0;
      --base1C: 0, 0, 0;
      --base1D: 0, 0, 0;
      --base1E: 0, 0, 0;
      --base1F: 0, 0, 0;

      --base20: 0, 0, 0;
      --base21: 0, 0, 0;
      --base22: 0, 0, 0;
      --base23: 0, 0, 0;
      --base24: 0, 0, 0;
      --base25: 0, 0, 0;
      --base28: 0, 0, 0;
      --base29: 0, 0, 0;
      --base2A: 0, 0, 0;
      --base2B: 0, 0, 0;
      --base2C: 0, 0, 0;
      --base2D: 0, 0, 0;
      --base2E: 0, 0, 0;
      --base2F: 0, 0, 0;
}

.b0 { color: var(--base00); }
.b1 { color: var(--base01); }
.b2 { color: var(--base02); }
.b3 { color: var(--base03); }
.b4 { color: var(--base04); }
.b5 { color: var(--base05); }
.b6 { color: var(--base06); }
.b7 { color: var(--base07); }
.b8 { color: var(--base08); }
.b9 { color: var(--base09); }
.bA { color: var(--base0A); }
.bB { color: var(--base0B); }
.bC { color: var(--base0C); }
.bD { color: var(--base0D); }
.bE { color: var(--base0E); }
.bF { color: var(--base0F); }

body {
      min-width: 100vw;
      min-height: 100vh;
      padding: 0;
      margin: 0;

      display: flex;
      flex-direction: row;
      align-items: center;

      background-color: #f8f8f8;
}

.container {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
}

/* Color Selectors */
.color-selection-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
     
      background-color: #ffffff;
      box-shadow: 0 0 1rem rgba(12, 12, 12, 0.2);
      padding: 1rem;
      border-top-right-radius: var(--rounding);
      border-bottom-right-radius: var(--rounding);
}

.color-selector {
      display: flex;
      flex-direction: row;
}

.color-selector .color-label {
     align-self: center; 
}

.color-selector input {
      background: transparent;
      border: none; 
}

.color-selector .color {
     width: 4rem;
}

.color-selector .opacity {
      width: 3rem;
}

/* Showcase */
.showcase {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      justify-content: stretch;
      
      margin: 0 2rem;
      background-color: var(--base00);
      color: var(--base05); 

      border-radius: 0.8rem;
      box-shadow: 0 0 1rem rgba(12, 12, 12, 0.2);
}

.showcase h1,
.showcase h2,
.showcase h3,
.showcase h4,
.showcase h5,
.showcase h6 {
      color: var(--base0E);
      margin: 0.4rem 0;
}


.showcase .card {
      display: flex;
      flex-direction: column;
      padding: 0.8rem;
      margin: 1rem;
      border-radius: calc( var(--rounding) * 0.6 );
}

.showcase .topbar {
      display: flex;
      flex-direction: row;

      padding: 0 0.8rem;

      border-radius: calc(var(--rounding) * 0.8);
      border: var(--rim-border)     var(--base0E);
      box-shadow: 
            var(--bs-0) rgba( var(--base10), 1) inset,
            var(--bs-1) rgba( var(--base20), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}

.showcase .card.main {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: stretch;
      flex: 1;
}

.showcase .card.regular {
      flex: 1;
      background-color: var(--base01);
      box-shadow: 
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}

.showcase .card.regular .card.contrast {
      box-shadow: 
            var(--bs-0) rgba(var(--base11), 1),
            var(--bs-1) rgba(var(--base21), 1);
}

.showcase .card.contrast {
      background-color: var(--base02);
      box-shadow: 
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}

.showcase .card.base16 {
      background-color: var(--base00);
      box-shadow: 
            var(--bs-0) rgba(var(--base10), 1) inset,
            var(--bs-1) rgba(var(--base20), 1)  inset;
}

.showcase .card.base16 p {
      font-family: monospace;
}

.showcase .card.colors {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
}

.showcase .card.colors .palette {
      width: 2rem;
      height: 2rem;
      border-radius: calc(var(--rounding) * 0.6); 
}

.showcase .card.colors              .palette.ls8 {
      background-color:             var(--base08);
      border: var(--rim-border)     var(--base08);
      box-shadow: var(--bs-0) rgba( var(--base18), 1) inset,
                  var(--bs-1) rgba( var(--base28), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.ls9 {
      background-color:             var(--base09);
      border: var(--rim-border)     var(--base09);
      box-shadow: var(--bs-0) rgba( var(--base19), 1) inset,
                  var(--bs-1) rgba( var(--base29), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsA {
      background-color:             var(--base0A);
      border: var(--rim-border)     var(--base0A);
      box-shadow: var(--bs-0) rgba( var(--base1A), 1) inset,
                  var(--bs-1) rgba( var(--base2A), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsB {
      background-color:             var(--base0B);
      border: var(--rim-border)     var(--base0B);
      box-shadow: var(--bs-0) rgba( var(--base1B), 1) inset,
                  var(--bs-1) rgba( var(--base2B), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsC {
      background-color:             var(--base0C);
      border: var(--rim-border)     var(--base0C);
      box-shadow: var(--bs-0) rgba( var(--base1C), 1) inset,
                  var(--bs-1) rgba( var(--base2C), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsD {
      background-color:             var(--base0D);
      border: var(--rim-border)     var(--base0D);
      box-shadow: var(--bs-0) rgba( var(--base1D), 1) inset,
                  var(--bs-1) rgba( var(--base2D), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsE {
      background-color:             var(--base0E);
      border: var(--rim-border)     var(--base0E);
      box-shadow: var(--bs-0) rgba( var(--base1E), 1) inset,
                  var(--bs-1) rgba( var(--base2E), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}
.showcase .card.colors              .palette.lsF {
      background-color:             var(--base0F);
      border: var(--rim-border)     var(--base0F);
      box-shadow: var(--bs-0) rgba( var(--base1F), 1) inset,
                  var(--bs-1) rgba( var(--base2F), 1) inset,
            var(--bs-0) rgba(var(--base10), 1),
            var(--bs-1) rgba(var(--base20), 1);
}

.row {
      display: flex;
      flex-direction: row;
}

.column {
      display: flex;
      flex-direction: column;
}

@media screen and (min-width: 60rem) {
      .color-selection-box {
            border-radius: var(--rounding);
      }

      .container {
            justify-content: center;
      }
}