@font-face {
	font-family: 'comic';
	src: url('/public/fonts/comic.ttf') format('truetype');
}

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	width: 100%;
	background: #191919;
	color: white;
	font-family: comic;
}

button {
	cursor: pointer;
}

main {
	width: 90%; /* TODO FIX THIS HACK */ 
	float: right;
	min-height: 100vh;
}

main a {
	color: #48ed40;
}

main p {
	padding-right: 1%;
	padding-left: 14px;
	padding-bottom: 5px;
}

main figcaption {
	padding-left: 15px;
}

main ul {
	padding-left: 30px;
	list-style-type: "- ";
}

main h1 {
	padding-top: 10px;
	padding-left: 10px;
}

main h2 {
	padding-top: 10px;
	padding-left: 12px;
}

main h3 {
	padding-top: 10px;
	padding-left: 14px;
}

nav {
	background: #475c46;
	padding-left: 10px;
	padding-right: 10px;
	width: 10%;
	height: 100vh;
	border: groove #475c46 5px;
	float: left;
	box-sizing: border-box;
	position: sticky;
	top: 0px;
}

#wrapper {
  display: flex;
}

.textLink {
	text-decoration: none;
	color: #FFFFFF !important;
}

nav a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

nav a:hover {
	color: #C0C0C0;
}

nav h1 {
	display: inline;
}

.imageLink {
	display: inline !important;
	padding-right: 3px;
	width: fit-content;
}

.imageLink img {
	width: 30px;
	margin-top: 5px;
	border-radius: 10px;
}

#gay {
	background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 20%, rgba(0, 255, 0, 1) 40%, rgba(0, 255, 255, 1) 60%, rgba(0, 0, 255, 1) 80%, rgba(255, 0, 255, 1) 100%);
	background-clip: text;
	color: transparent;
}

.hidden {
	color: transparent !important;
	text-decoration: none;
}