body {
	   height: 100%;
	   background: rgb(0, 120, 235);
	   /* background: white; */
	   /* background: #3b3b3b; */
	   color: whitesmoke;
	   font-family: monospace;
	   /* font-family: linotype-didot, serif; */
	   font-weight: 400;
	   /* font-style: italic; */
	   font-size: .8em;
	   margin: 0px;
	   padding: 0px;
	   /* @media (prefers-color-scheme: dark) {
		   background: #100f18;
		   color: #ddf0de;
	   } */
	   line-height: 1.2rem;
	}
	p {
	  /* font-family: linotype-didot, serif; */
	   font-weight: 400;
	   /* font-style: italic; */
	   font-size: 1.1em;
	   line-height: 1rem;
	}
	span.header {
		font-size: .7em;
	margin-bottom: 4px;
	}
a {
  text-decoration: none;
  color: rgb(241, 234, 173);
  width: auto;
  
}
a:hover {
text-decoration: underline;
font-weight: 800;
}
.hide {
  display: none;
}

figure.nav::first-letter {
  /* font-style: regular !important;
  font-weight: 800; */
} 

@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}


	.grid-nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: opx;
	grid-auto-rows: minmax(0px, auto);
	grid-auto-flow: dense;
	padding: 0px;
}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		grid-gap: 1px;
		grid-auto-rows: minmax(0px, auto);
		grid-auto-flow: dense;
		padding: 1px;
	}
	.nav {
	  /* font-family: linotype-didot, serif; */
	  /* font-weight: 400;
	   font-style: italic;
	   font-size: 1.3em; */
	   line-height: 1.2;
	}
	.grid-item {
		padding: 1.5rem;
		font-family: "ibm-plex-mono", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: .8em;
		/* font-weight: bold; */
		/* text-transform: uppercase; */
		/* color: #44;
	   background-color: #faf6f3;
	   background-color: #eff0e7; */
		border-radius: 2px; */
		align-content: start;
		
/    /* box-shadow:
		  1px 2px 8px hsl(0deg 0% 0% / 0.075),
		  /* 0 2px 2px hsl(0deg 0% 0% / 0.075),
		  0 4px 4px hsl(0deg 0% 0% / 0.075),
		  0 8px 8px hsl(0deg 0% 0% / 0.075),
		  0 16px 16px hsl(0deg 0% 0% / 0.075) */
		; */
		will-change: filter;
		  /* border-bottom: 1px solid #100f18; */

		  transition: filter 2s ease-out;
		  @media (prefers-color-scheme: dark) {
				 background: #100f18;
		  
			 }
			 @media only screen and (max-width: 600px) {
				 
			 }
	}
	.grid-item:hover {
		will-change: filter;
		  
		  transition: filter 2s ease-out;
		/* filter: drop-shadow(8px 16px 16px hsl(282, 11%, 80%)); */
		filter: border-bottom: 1px solid white;
	  /* box-shadow: 
	  8.0px 16.0px 16.0px hsl(282, 11%, 80%); */
	  z-index: 10;
	}
 .grid-item:hover p {
	  /* text-shadow: 
		4.0px 4.0px 4.0px hsl(282, 11%, 80%);
 */
	 
 }
	.grid-shadow {
	  /* box-shadow: 8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25); */
	}

	figure {
	  padding: 0px;
	  margin-inline: 0px;
	  margin-block: 0px;
	}
	img {
	  width: 100%;
	  max-width: 200px;
	  height: auto;
	  /* box-shadow: -8.0px -16.0px 16.0px hsl(0deg 0% 0% / 0.25); */
	/* box-shadow:
		1px 2px 8px hsl(0deg 0% 0% / 0.075)
		/* 0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075) */
	  ; */
	}
	figure.nav img {
		width: 50%;
		min-width: 150px;
		filter: invert();
		margin-bottom: 3px;
	}
	img.icon {
	  width:20px;
	  height: 20px;
	}
	video {
	  width: 100%;
	  height: auto;
	} 
	.span-2 {
		grid-column-end: span 2;
		grid-row-end: span 2;
	}
	
	.span-3 {
		grid-column-end: span 3;
		grid-row-end: span 4;
	}
	

@media (prefers-color-scheme: dark) {}
@media only screen and (max-width: 600px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 1280px) {}