@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;
	color: white;
	height: 100%;
}

body {
	background-color: black;
	width: 70%;
	height: 100%;
	margin: auto;
	padding: 20px;
	border-left: white 1px solid;
	border-right: white 1px solid;
	font-family: "Terminus";
	font-size: 18px;
}

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

#cat {
	float: left;
	padding-right: 20px;
}

.intro {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	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%)
}

.nav a {
	color: white;
}

.nav a:hover {
	color: gray;
}