@import url('defaults.css');
@import url('basic2.css');

:root {
  --wrapper-width: 60%;
  --font-family: "DOS-V", monospace;
  --header-font: var(--font-family);

/*colors*/
  --base-colour: #000;
  --accent: #877c6c;
  --header: #877c6c;

/*TERMINAL SWATCH*/
  /*Regular Colors*/
  --term-black: #000000;
  --term-red: #cd0000;
  --term-green: #00cd00;
  --term-yellow: #cdcd00;
  --term-blue: #0000ee;
  --term-magenta: #cd00cd;
  --term-cyan: #00cdcd;
  --term-white: #e5e5e5;

  /*Bright Colors*/
  --term-bright-black: #7f7f7f;
  --term-bright-red: #ff0000;
  --term-bright-green: #00ff00;
  --term-bright-yellow: #ffff00;
  --term-bright-blue: #5c5cff;
  --term-bright-magenta: #ff00ff;
  --term-bright-cyan: #00ffff;
  --term-bright-white: #ffffff;

  /*Background / Foreground*/
  --term-bg: #1e1e1e;
  --term-fg: #f1f1f1;
}

#wrapper {border: 5px double var(--accent); padding: .5em;}

.icon img { border: 3px double var(--accent); width: 200px; padding: 2px; }

table {border: 3px double var(--accent); padding: 5px;}
td {border: 1px solid var(--accent); padding: 3px;}

.terminal-swatch {
padding: .5em;
}

.colour-row {
display: flex;
justify-content: center;
}

swatch {
width: 20px;
height: 20px;
display: block;
}

/*Bright Swatch Classes*/
.bg-br-black { background-color: var(--term-bright-black); }

.bg-br-red { background-color: var(--term-bright-red); }
.bg-br-green { background-color: var(--term-bright-green); }
.bg-br-yellow { background-color: var(--term-bright-yellow); }
.bg-br-blue { background-color: var(--term-bright-blue); }
.bg-br-magenta { background-color: var(--term-bright-magenta); }
.bg-br-cyan { background-color: var(--term-bright-cyan); }

/*.bg-br-white: { background-color: 
  var(--term-bright-white); }*/

/*Regular Swatches*/
.bg-black { background-color: var(--term-black); }

.bg-red { background-color: var(--term-red); }
.bg-green { background-color: var(--term-green); }
.bg-yellow { background-color: var(--term-yellow); }
.bg-blue { background-color: var(--term-blue); }
.bg-magenta { background-color: var(--term-magenta); }
.bg-cyan { background-color: var(--term-cyan); }

/*.bg-white: { 
  background-color: var(--term-white); }*/