@import "./highlight.css";

html, body {
	margin: 0;
	padding: 0;
	background-color: rgb(233, 233, 233);
	font-family: sans-serif;
}

a {
	color: rgb(0, 112, 0);
	
	&:visited {
		color: rgb(0, 55, 0);
	}
}

.header {
	padding: 0 .5em;
	background-color: rgb(233, 233, 233);
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	
	& > .inner {
		box-sizing: border-box;
		border-bottom: 3px solid green;
		height: 85px;
		padding-left: 3em;

		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 3em;

		.menu {
			display: flex;
			align-items: flex-end;
			/* gap: 1.3em; */

			.item {
				display: block;
				margin-bottom: .6em;
				margin-right: 1.3em; /* Workaround for lacking `gap` support in browsers */
				font-size: 1.3em;
				color: rgb(80, 80, 80);
				height: 1.3em;
				text-decoration: none;
				padding-bottom: .1em;
				border-bottom: 2px solid silver;
				/* padding: .3em .9em; */
				/* border: 1px solid gray; */
				/* border-radius: 3px; */

				&:hover {
					border-bottom-color: rgb(82, 82, 82);
				}

				&.active {
					color: black;
					border-bottom-color: rgb(0, 153, 0);
				}

				img.externalLink {
					margin-left: .3em;
					vertical-align: top;
					height: 16px;
				}
			}
		}
	}
}

.content {
	padding-top: 85px;
	max-width: 960px;

	& > .inner {
		padding: 1em;
		padding-left: 3em;

		h1 {
			margin-top: 0;
		}

		h2 {
			border-bottom: 1px solid black;
			margin-bottom: .5em;
		}
	}

	/* ul {
		font-size: .95em;
	} */

	li {
		margin-bottom: .2em;
	}

	.moduleList {
		display: flex;
		flex-wrap: wrap;

		.entry {
			display: block;
			width: 180px;
			margin-right: .6em; /* TODO: Replace with `gap` when browsers support it */
			margin-bottom: .6em; /* TODO: Replace with `gap` when browsers support it */
			background: rgb(240, 240, 240);
			box-shadow: 2px 2px 4px silver;
			border: 1px solid transparent;
			color: rgb(54, 54, 54);
			text-decoration: none;

			padding: .6em 1em;

			&:hover {
				border-color: silver;
				box-shadow: 3px 3px 5px gray;
			}

			.name {
				display: block;
				color: black;
				font-weight: bold;
				border-bottom: 1px solid rgb(151, 151, 151);
				margin-bottom: .3em;
			}

			.meta {
				display: block;
				font-size: .9em;

				.label {
					font-weight: bold;
					margin-right: .3em;
				}

				.value {
					display: inline-block;
				}
			}

			.firstParty, .thirdParty {
				font-size: .9em;
				font-weight: bold;
			}

			.firstParty {
				color: rgb(14, 1, 172);
			}
			
			.thirdParty {
				color: rgb(22, 128, 0);
			}
		}
	}
}

.footer {
	padding: 0 .5em;

	& > .inner {
		border-top: 1px solid gray;
		padding: .8em .5em;
		padding-left: 2.5em;
	}
}

.logo {
	height: 80px;
}