a:link {
	color: var(--primary-color-verylight);
	text-decoration: none;
}

a:visited {
	color: var(--primary-color-verylight);
	text-decoration: none;
}

a:hover {
	color: var(--primary-color-extralight);
	text-decoration: none;
}

#main {
	position: absolute;
	color: var(--primar-color-text);
	min-width: 60rem;
	left: calc(50% - 30rem);
	top: 0px;
}

div.line {
	background: var(--primary-color-verydark);
	border: var(--primary-color-dark) 1px solid;
	padding: 2px;
	font-size: 1rem;
}

div.line.added {
	background: var(--primary-color-added-verydark);
	border: var(--primary-color-added-dark) 1px solid;
	padding: 2px;
	font-size: 1rem;
}

div.line.removed {
	background: var(--primary-color-removed-verydark);
	border: var(--primary-color-removed-dark) 1px solid;
	padding: 2px;
	font-size: 1rem;
}

div.cell {
	display: inline-block;
	vertical-align: text-top;
}

div.nav {
	background: var(--primary-color-dark);
	/* border: var(--primary-color) 1px solid; */
	display: inline-block;
	vertical-align: text-top;
	padding: 1.0rem 0.5rem 1.0rem 0.5rem;
	margin: 2px;
	width: calc(20% - 4px - 1rem);
	text-align:center;
}

div.nav:hover {
	background: var(--primary-color);
}

div.nav-active {
	background: var(--primary-color-light);
}

span.removed {
	color: var(--primary-color-removed-light);
}

.module {
  --notchSize: 10px;
  
  clip-path: 
    polygon(
      0% var(--notchSize), 
      var(--notchSize) 0%, 
      calc(100% - var(--notchSize)) 0%, 
      100% var(--notchSize), 
      100% calc(100% - var(--notchSize)), 
      calc(100% - var(--notchSize)) 100%, 
      var(--notchSize) 100%, 
      0% calc(100% - var(--notchSize))
    );
}