@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

@font-face {
	font-family: 'Terminal Grotesque';
	src: url('/terminal-grotesque-webfont.eot'); /* IE9 Compat Modes */
	src: url('/terminal-grotesque-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/terminal-grotesque-webfont.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/terminal-grotesque-webfont.woff') format('woff'), /* Modern Browsers */
		 url('/terminal-grotesque-webfont.svg#terminal_grotesque') format('svg'), /* Legacy iOS */
		 url('/terminal-grotesque-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
	font-weight: normal;
	font-style: normal;
	font-display: swap; /* Optimize font loading */
  }



body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* font-family: "Helvetica Neue", Helvetica, sans-serif;
   */
  /* font-family: 'Share Tech Mono', monospace; */
  font-family: 'Terminal Grotesque', monospace;
  overflow: hidden;
  background-color: black;
  color: white;
}

::selection,
moz::selection {
  background-color: black;
  color: white;
}

#title {
  text-align: center;
  margin: 0;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#container p:first-child {
  border-right: 1px solid white;
  padding-right: 10px;
  margin-right: 10px;
}

a {
  border-bottom: 1px dotted white;
  text-decoration: none;
  color: white;
}

a:hover {
  border-bottom: 1px solid white;
}

footer {
	position: fixed;
	opacity: 0.5;
	bottom: 0;
	padding-bottom: 20px;
	font-style: italic;
	}