:root {
  --black : hsl(0, 0%, 0%);
  --black2 : hsl(60, 17%, 11%);
  --black3 : hsl(70, 8%, 15%);
  --blue : hsl(190, 81%, 67%);
  --grey : hsl(55, 8%, 26%);
  --orange : hsl(32, 98%, 56%);
  --orange2 : hsl(30, 83%, 34%);
  --orange3 : hsl(47, 100%, 79%);
  --purple : hsl(261, 100%, 75%);
  --red : hsl(0, 93%, 59%);
  --red2 : hsl(338, 95%, 56%);
  --white : hsl(0, 0%, 97%);
  --white2 : hsl(60, 36%, 96%);
  --white3 : hsl(60, 30%, 96%);
  --yellow : hsl(54, 70%, 68%);
  --yellow2 : hsl(80, 76%, 53%);
  --yellow3 : hsl(60, 12%, 79%);
  --yellow4 : hsl(55, 11%, 22%);
  --yellow5 : hsl(50, 11%, 41%);
}

.red {
	color: red;
}

.black   { color: var(--black); }
.black2  { color: var(--black2); }
.black3  { color: var(--black3); }
.blue    { color: var(--blue); }
.grey    { color: var(--grey); }
.orange  { color: var(--orange); }
.orange2 { color: var(--orange2); }
.orange3 { color: var(--orange3); }
.purple  { color: var(--purple); }
.red     { color: var(--red); }
.red2    { color: var(--red2); }
.white   { color: var(--white); }
.white2  { color: var(--white2); }
.white3  { color: var(--white3); }
.yellow  { color: var(--yellow); }
.yellow2 { color: var(--yellow2); }
.yellow3 { color: var(--yellow3); }
.yellow4 { color: var(--yellow4); }
.yellow5 { color: var(--yellow5); }

.bak-black   { background-color: var(--black); }
.bak-black2  { background-color: var(--black2); }
.bak-black3  { background-color: var(--black3); }
.bak-blue    { background-color: var(--blue); }
.bak-grey    { background-color: var(--grey); }
.bak-orange  { background-color: var(--orange); }
.bak-orange2 { background-color: var(--orange2); }
.bak-orange3 { background-color: var(--orange3); }
.bak-purple  { background-color: var(--purple); }
.bak-red     { background-color: var(--red); }
.bak-red2    { background-color: var(--red2); }
.bak-white   { background-color: var(--white); }
.bak-white2  { background-color: var(--white2); }
.bak-white3  { background-color: var(--white3); }
.bak-yellow  { background-color: var(--yellow); }
.bak-yellow2 { background-color: var(--yellow2); }
.bak-yellow3 { background-color: var(--yellow3); }
.bak-yellow4 { background-color: var(--yellow4); }
.bak-yellow5 { background-color: var(--yellow5); }

.columns {
	display: flex;
}

.columns > div {
	flex: 1;
}

/* Tallsystemer */
.num-systems > div {
  font-size: 0.75em;
  text-align: left;
}

.num-system-title {
  font-size: 1.5em;
}

.num-span-red > span {
  color: var(--red);
  margin-left: 0.2em;
}
.num-span-blue > span {
  color: var(--blue);
  margin-left: 0.2em;
}
.num-span-green > span {
  color: var(--yellow2);
  margin-left: 0.2em;
}
.num-span-orange > span {
  color: var(--orange);
  margin-left: 0.2em;
}

/* Fetch Decode Execute*/
.fde-table-item {
  padding: 0.5em;
}

.fde-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 0;
  row-gap: 0;
  justify-items: stretch;
}

.fde-grid > * {
  margin: 0;
}

.fde-c2 { grid-column-start: 2; }
.fde-c3 { grid-column-start: 3; }
.fde-c4 { grid-column-start: 4; }
.fde-c5 { grid-column-start: 5; }
.fde-c6 { grid-column-start: 6; }
.fde-c7 { grid-column-start: 7; }
.fde-c8 { grid-column-start: 8; }

.fde-r2 { grid-row-start: 2; }
.fde-r3 { grid-row-start: 3; }
.fde-r4 { grid-row-start: 4; }
.fde-r5 { grid-row-start: 5; }
.fde-r6 { grid-row-start: 6; }
.fde-r7 { grid-row-start: 7; }
.fde-r8 { grid-row-start: 8; }

/* RGB */
.rgb-pvv {color: #283681;}
.rgb-red {color: #FF0000;}
.rgb-gre {color: #00FF00;}
.rgb-blu {color: #0000FF;}
.rgb-cof {color: #C0FFEE;}
.rgb-whi {color: #FFFFFF;}
.rgb-bla {color: #000000;}

/* Network diagrams */
.prev-netdiagram {
  opacity: 0.5;
}

.net-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.net-title > h3 {
  display: inline;
  padding: 1em;
}

/* Misc */

.replacable-fragment {
	position: relative;
  margin: auto;
}

.replacable-fragment > div {
  position:absolute;
	top:0;
	/* TODO: fix this properly */
	left:25%;
}