@import "./highlight.css";

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

.hljs {
	background: rgb(240, 240, 240);
	border: 1px solid silver;
	border-radius: 3px;
}

a {
	color: rgb(0, 104, 189);

	&:visited {
		color: rgb(0, 80, 146);
	}
}

.header {
	padding: 0 .5em;
	background-color: rgb(246, 246, 246);
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	
	& > .inner {
		box-sizing: border-box;
		border-bottom: 3px solid rgb(126, 185, 227);
		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;
		}

		.command {
			font-family: monospace;
			font-size: 1.2em;
		}

		.reference {
			color: rgb(0, 58, 0);
			font-size: .8em;
		}

		.note, .distroSpecific {
			padding: .3em 1em;
			background-color: rgb(221, 232, 240);
			border: 1px solid rgb(161, 193, 217);
			border-radius: 3px;

			p {
				margin: .5em 0em;
			}
		}

		.distroSpecific {
			padding-left: 6em;

			img.icon {
				float: left;
				width: 4em;
				margin-left: -5em;
				margin-top: .7em;
			}
		}
	}

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

	li {
		margin-bottom: .2em;
	}
}

.footer {
	padding: 0 .5em;

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

.logo {
	height: 80px;
}