@import url('https://cdn.jsdelivr.net/npm/@fontsource/iosevka@5.3.0/index.css');
@import "https://www.nerdfonts.com/assets/css/webfont.css";

body {
	box-sizing: border-box;
	background-color: black;
	background-image:
		radial-gradient(circle, grey 2px, transparent 2px),
		linear-gradient(to right,  grey 1px, transparent 1px),
		linear-gradient(to bottom, grey 1px, transparent 1px),
		radial-gradient(circle, white 1px, transparent 1px);
	background-size:
		160px 160px,
		80px 80px,
		80px 80px,
		80px 80px;
	color: #cccccc;
	padding: 0;
	margin: 0 auto;
	width: 21cm;
}

#navbar {
	position: sticky;
	top: 0;
	left: 0;
}

main {
	padding: 0 30px;
	border-radius: 10px;
	backdrop-filter: blur(2px);
}

#intro {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flow-start;

	h2 {
		font-family: 'Iosevka', monospace;
	}

	.links {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;

		.link {
			text-decoration: none;
			font-size: 4rem;
			color: red;
		}
		.nf-linux-codeberg {
			color: #44ADFF;
		}
		.nf-cod-github {
			color: white;
		}
		.nf-dev-gitlab {
			color: #E24329;
		}
	}

	.img {
		background-image: url("../Quiet-Fisher/assets/images/logo-compact.svg");
		background-size: cover;
		width: 100%;
		aspect-ratio: 1 / 1;

		font-family: iosevka, monospace;
		font-size: 1rem;
		color: white;
	}

	#john-rod {
		background-image: url("assets/images/400px-Light_Rod_Stand_Infobox_Manga.png"),
			url("assets/images/Jojo-Menacing-PNG-File.png"),
			url("assets/images/Jojo-Menacing-PNG-File.png");
		background-position: center center, right top, left bottom;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: 400px 672px, 107px 300px, 72px 200px;
		width: 400px;
		height: 672px;
	}
}

#showcase {
	width: 100%;

	counter-reset: repo;

	h2::before {
		counter-increment: repo;
		content: "Repo " counter(repo) ": ";
	}
	iframe {
		width: 100%;
		aspect-ratio: 1920 / 1080;
	}
}