.deepblue      { background: #0078D7; }
.charcoal      { background: #1F1F1F; }
.magenta       { background: #FF0097; }
.amber         { background: #FFB900; }
.navy          { background: #003A75; }
.cobalt        { background: #0050EF; }
.azure         { background: #0063B1; }
.skyblue       { background: #2D89EF; }
.teal          { background: #008272; }
.lime          { background: #7FBA00; }
.green         { background: #00A300; }
.emerald       { background: #008A00; }
.mint          { background: #00B294; }
.orange        { background: #F25022; }
.tangerine     { background: #E95420; }
.mustard       { background: #D29200; }
.gold          { background: #C19C00; }
.red           { background: #E81123; }
.crimson       { background: #A80000; }
.darkred       { background: #7A0000; }
.purple        { background: #68217A; }
.violet        { background: #603CBA; }
.plum          { background: #5C2D91; }
.rose          { background: #E3008C; }
.black         { background: #000000; }
.darkgray      { background: #2B2B2B; }
.gray          { background: #3F3F3F; }
.lightgray     { background: #767676; }
.silver        { background: #A6A6A6; }
.white         { background: #FFFFFF; }
.deepblue-text  { color: #0078D7; }
.charcoal-text  { color: #1F1F1F; }
.magenta-text   { color: #FF0097; }
.amber-text     { color: #FFB900; }
.white-text     { color: #FFFFFF; }
.black-text     { color: #000000; }
.gray-text      { color: #3F3F3F; }
* {
  border-radius: 0;
  box-shadow: none;
}
body {
  margin: 0;
  font-family: "Segoe UI", "Inter", sans-serif;
}
.tile {
  display: inline-flex;
  box-sizing: border-box; text-decoration: none; align-items: center;
  justify-content: center; text-align: center;
}
.tile-16  { width: 16px;  height: 16px; }
.tile-24  { width: 24px;  height: 24px; }
.tile-32  { width: 32px;  height: 32px; }
.tile-40  { width: 40px;  height: 40px; }
.tile-48  { width: 48px;  height: 48px; }
.tile-64  { width: 64px;  height: 64px; }
.tile-80  { width: 80px;  height: 80px; }
.tile-96  { width: 96px;  height: 96px; }
.tile-120 { width: 120px; height: 120px; }
.tile-160 { width: 160px; height: 160px; }
.tile-200 { width: 200px; height: 200px; }
.tile-240 { width: 240px; height: 240px; }
.tile-320 { width: 320px; height: 320px; }
.tile-wide-80   { width: 160px; height: 80px; }
.tile-wide-120  { width: 240px; height: 120px; }
.tile-wide-160  { width: 320px; height: 160px; }
.tile-tall-80   { width: 80px;  height: 160px; }
.tile-tall-120  { width: 120px; height: 240px; }
.tile-tall-160  { width: 160px; height: 320px; }
.metro-grid {
  display: grid;
  grid-auto-flow: dense;
  gap: 8px;
  align-content: start;
}
.metro-grid-4  { grid-template-columns: repeat(4, 1fr); }
.metro-grid-6  { grid-template-columns: repeat(6, 1fr); }
.metro-grid-8  { grid-template-columns: repeat(8, 1fr); }
.metro-grid-12 { grid-template-columns: repeat(12, 1fr); }
.metro-grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.metro-m-8  { margin: 8px; }
.metro-m-16 { margin: 16px; }
.metro-m-24 { margin: 24px; }
.metro-m-32 { margin: 32px; }
.metro-grid > .tile {
  margin: 0;
}
/* Written for Blekko revival  Do not distribute  Copyright (C) Mirrall*/