@import url('file:///home/bean/.cache/wal/colors.css');

@font-face {
	font-family: "old-english-gothic-pixel";
	src: url("./font/old-english-gothic-pixel.otf");
}

@font-face {
	font-family: "CozetteVector";
	src: url("./font/CozetteVector.otf");
}

:root {
	--color-bg: var(--background);
	--color-fg: var(--foreground);
	--color-link: var(--color1);
	--color-link-visited: var(--color3);
	--color-link-hover: var(--color2);
}

html, body {
	background: var(--color-bg);
	color: var(--color-fg);
	/* font-family: "CozetteVector"; */
	font-family: "monospace";
	height: 90%;
	width: 60%;
	margin-right: 20%;
	margin-left: 20%;
	padding: 0;
}

img {
	padding: 40px 0px 40px 0px;
	max-height: 512px;
	/* width: 100%; */
}

.category, #bookmarks, .links {
	display: flex;
	flex-direction: center;
	justify-content: center;
	align-items: center;
}

/* .category { */
/* 	width: 25%; */
/* } */

.links {
	flex-direction: column;
	padding: 0px 20px 20px 20px;
}

.title {
	text-align: center;
	font-family: "old-english-gothic-pixel";
}

li {
	font-size: 16px;
	list-style-type: none;
	padding: 5px
}

h1 {
	margin-bottom: 0px;
	font-size: 48px;
}

h2 {
	font-size: 36px;
	/* padding-bottom: 0px; */
	margin: 0px;
}

a:link {
	text-decoration: none;
	color: var(--color-link);
}

a:visited {
	color: var(--color-link-visited);
}

a:hover {
	color: var(--color-link-hover);
}

.blinking {
	animation: opacity 2.5s ease-in-out infinite;
	opacity: 1;
}

@keyframes opacity {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}