@font-face {
    font-family: 'Terminus';
    src:url('TerminusTTF.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Terminus';
    src:url('TerminusTTF-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html {
	/* background-color: #222222; */
	background-color: black;
	color: white;
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	/* border-left: white 1px solid; */
	/* border-right: white 1px solid; */
	font-family: "Terminus";
	font-size: 18px;
}

header {
	background-color: #1f1a1a;
	padding: 20px;
	border-bottom: gray 1px solid;
	margin: auto;
}

footer {
	background-color: #1f1a1a;
	padding: 20px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px
}

main {
	padding: 20px;
	max-width: 40rem;
	min-height: 100vh;
	margin: auto;
}

.ascii {
	white-space: pre-wrap;
	font-family: "Courier New";
	font-size: 16px;
	user-select: none;
}

/* Reduce header size on small screens */
@media only screen and (max-width: 720px) {
	.ascii {
		font-size: 12px;
	}
}

.intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
}

.navbar {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;

	filter: 
		drop-shadow(1px 0px 0px white)
        drop-shadow(-1px 0px 0px white)
        drop-shadow(0px 1px 0px white)
        drop-shadow(0px -1px 0px white)
        /* drop-shadow(1px 1px 0px white) */
        /* drop-shadow(-1px -1px 0px white) */
        /* drop-shadow(-1px 1px 0px white) */
        /* drop-shadow(1px -1px 0px white); */
}

.column {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr
}

.nav {
	padding: 6px 15px;
	/* border: 1px white solid; */
	background-color: black;
	clip-path: polygon(calc(0% + 10px) 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%)
}

#projects.nav a:hover {
	animation: rainbow 1s infinite linear;
}

@keyframes bounce-up-letter {
  0% {
    transform:translateY(0px);
    text-shadow:0 1px rgba(0,0,0,.5)
  }
  20% {
    transform:translateY(-4px);
    text-shadow:0 5px rgba(0,0,0,.5);
    color:lime
  }
  40% {
    transform:translateY(0px);
    text-shadow:0 1px rgba(0,0,0,.5)
  }
  55% {
    color:#fff
  }
  85% {
    color:#fff
  }
}

@keyframes rainbow {
  0% {
    color:lime
  }
  33.3% {
    color:#8080ff
  }
  67.7% {
    color:#ff8080
  }
  100% {
    color:lime
  }
}

.nav a span {
	display: inline-block;
	text-decoration: underline;
}

#reads.nav a:hover span {
	animation: bounce-up-letter 0.8s infinite ease-out;
}

#reads.nav a:hover span:nth-child(5n + 1) { animation-delay: 0.1s; }
#reads.nav a:hover span:nth-child(5n + 2) { animation-delay: 0.2s; }
#reads.nav a:hover span:nth-child(5n + 3) { animation-delay: 0.3s; }
#reads.nav a:hover span:nth-child(5n + 4) { animation-delay: 0.4s; }
#reads.nav a:hover span:nth-child(5n + 5) { animation-delay: 0.5s; }

@keyframes glitchy-text-span {
	0% { visibility: hidden; }
	49% { visibility: hidden; }
	50% { visibility: visible; }
	100% { visibility: visible; }
}

@keyframes glitchy-text-after {
	0% { visibility: visible; }
	49% { visibility: visible; }
	50% { visibility: hidden; }
	100% { visibility: hidden; }
}

#notes.nav a:hover span {
	/* display: none; */
	animation: glitchy-text-span infinite 1s;
}
#notes.nav a:hover span::after {
	visibility: hidden;
	animation: glitchy-text-after infinite 1s;
	position: absolute;
	translate: -100%;
	text-decoration: underline;
}
#notes.nav a:hover span:nth-child(1) { animation-delay: 0s; }
#notes.nav a:hover span:nth-child(1)::after { content: "ν"; animation-delay: 0s; }
#notes.nav a:hover span:nth-child(2) { animation-delay: 0.2s; }
#notes.nav a:hover span:nth-child(2)::after { content: "ο"; animation-delay: 0.2s; }
#notes.nav a:hover span:nth-child(3) { animation-delay: 0.4s; }
#notes.nav a:hover span:nth-child(3)::after { content: "τ"; animation-delay: 0.4s; }
#notes.nav a:hover span:nth-child(4) { animation-delay: 0.6s; }
#notes.nav a:hover span:nth-child(4)::after { content: "ε"; animation-delay: 0.6s; }
#notes.nav a:hover span:nth-child(5) { animation-delay: 0.8s; }
#notes.nav a:hover span:nth-child(5)::after { content: "σ"; animation-delay: 0.8s; }

a {
	color: white;
}

a:hover {
	color: gray;
	font-weight: bold;
}

span.math {
	display: inline-block;
}

figure.math {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

figure > svg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

svg {
	filter: invert(100%);
}