@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Nova+Mono&display=swap");
:root {
	--primary-color: #fffcf2;
	--secondary-color: #eb5e28;
	--bg: #252422;
	--hl-color: #403d39;
	font-size: 18px;
	/* monospace font because tech website!! */
	font-family: "JetBrains Mono", monospace;
}

body {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.04' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	background-color: var(--bg);
}
header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80vw;
}
main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80vw;
}
table {
	border-collapse: collapse;
	font-size: 1.15;
	width: 100%;
	max-width: 75vw;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.link-row {
	position: relative;
}
.row-link span {
	position: absolute;
	inset: 0;
}
a {
	color: inherit;
	text-decoration: inherit;
}
th,
td {
	border: 1px solid #ddd;
	padding: 12px;
	text-align: left;
}

th {
	background-color: var(--secondary-color);
}
tr:hover {
	background-color: var(--hl-color);
	cursor: pointer;
}

.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
	width: 50vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4px;
}

.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card.container {
	padding: 2px 16px;
}