body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: auto;
	
	background-color: black;
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	font-size: 1.6vh;
	color: white;			
	text-align: center;
	
	cursor: crosshair;
}

a {
	display: inline-block;
	color:white;
	text-decoration: none;
}

a:hover {
	/*text-shadow: 0px -2px #ec2225, 0px 1px #00c2cb;*/
	font-weight: bold;
	text-decoration: underline;  
}	

#menu {
	margin: 4vh;
}

#menu a:hover {
	text-decoration: none;
}

#content {	
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	margin: 0vh 2vh;
}

#footer {
	margin-top: auto;
	height: 8vh;
}

#footer:hover .chromaglitch-highlight {
	font-weight: bold;	
	animation: cyanRedShadowGlitch 40ms linear infinite alternate,
				shiftGlitch 1s linear infinite alternate;
}

.highlight {
	display: inline-block;
}

.highlight:hover {
	font-weight: bold;
	animation: shiftGlitch 128ms linear infinite alternate;
}

.home-text {				
	margin-top: 2vh;
}

.home-visual {

}

.home-visual img {
	width: 16vh;
}

.def {
	margin-bottom: 4vh;
	text-align: left;
	max-width: 50vh;
}

.def-content {
	margin-left: 5vh;
}

.def-meta {
	font-style: italic;
	margin-left: 2vh;
}

.def-name {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}

.def-source {
	font-weight: normal;
}

.def-source a:hover {
  animation: cyanRedShadowGlitch 40ms linear infinite alternate,
  shiftGlitch 1s linear infinite alternate;
}

.about-symbol-container {
	display: flex; 
	justify-content: space-between; 
	margin-top: 2vh;
}

.about-symbol-part-container {
	min-width: 10vh; 
	display: flex; 
	justify-content: space-between; 
	align-items: flex-end;
}

.about-symbol-side-part {
	min-width: 10vh; 
	display: flex; 
	justify-content: space-between; 
	align-items: flex-end;
}

.about-symbol-center-part {
	margin: 0 5vh;
}

@keyframes cyanRedShadowGlitch{
  from {
	opacity: 0.6;
	text-shadow: 0px 0px #00C2CB, 0px 0px #c40000; 
  }
  to {
	opacity: 1;
	text-shadow: 1px -3px #00C2CB, 2px 3px #c40000; 
  }
}

@keyframes shiftGlitch {
   0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
      transform: none;
   }

   41% {
      transform: skewX(10deg);
   }

   42% {
      transform: skewX(-10deg);
   }

   59% {
      transform: skewX(40deg) skewY(10deg);
   }

   60% {
      transform: skewX(-40deg) skewY(-10deg);
   }

   63% {
      transform: skewX(10deg) skewY(-5deg);
   }

   70% {
      transform: skewX(-50deg) skewY(-20deg);
   }

   71% {
      transform: skewX(10deg) skewY(-10deg);
   }
}