@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url("https://www.nerdfonts.com/assets/css/webfont.css");

* {
	font-family: "sans-serif";
	color: white;
}

h1,
h2,
h3 {
	font-family: "Roboto Mono", monospace;
}

html {
	background-color: black;
}

body {
	width: 90%;
	max-width: 950px;
	margin: auto;
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr 5fr;
}

nav {
	grid-column-start: 1;
	border: 1px solid crimson;
	margin: 0px 5px;
	padding: 15px;
	max-width: 300px;
}

.nav-text,
.nav-text * {
	font-family: "Roboto Mono", monospace;
	line-height: 1.3em;
	margin: auto;
	max-width: 12em;
	padding: 0.5em 0.1em;

	& > * {
		padding: 0;
	}
}

.random-binary {
	display: inline-block;
	word-break: break-all;
}

main {
	grid-column-start: 2;
	margin: 0px 5px;
}

section {
	border: 1px solid gray;
	padding: 20px;
	margin: 10px 0;
	position: relative;
}

header {
	border: 1px solid crimson;
	padding: 10px;

	display: flex;
	justify-content: space-between;

	& * {
		color: white;
		margin: 0;
	}
}

footer {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;

	& p {
		margin: 0;
	}
}

a {
	&:link {
		color: red;
	}

	&:visited {
		color: crimson;
	}

	&:focus {
		color: crimson;
	}

	&:hover {
		color: #3c365e;
	}

	&:active {
		color: goldenrod;
	}
}

.ascii-art,
.ascii-art * {
	font-family: monospace;
	font-size: 1.2rem;
	line-height: 1em;
}

.page-title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.small-text {
	color: slategray;
	font-size: 0.7em;
}

.feed-title {

	&,
	&:link,
	&:visited,
	&:focus,
	&:active {
		color: crimson;
	}

	&:hover {
		color: #3c365e;
	}

	/* position: absolute; */
	/* top: 0px; */
	/* right: 10px; */
	font-size: 0.9em;
	margin: 0;
}

.feed-entry[data-open="true"] .feed-title {
	position: absolute;
	top: 0px;
	right: 10px;
	margin: inherit;
	/* color: crimson;
	font-size: 0.9em; */
}

.feed-body {
	display: none;
}

.feed-header {
	color: crimson;
}

.feed-entry[data-open="true"] .feed-body {
	display: block;
}

.hidden-link {
	text-decoration: none;
	cursor: none;
	color: transparent;

	&:link,
	&:visited,
	&:focus,
	&:hover,
	&:active {
		color: transparent;
	}
}