@import url('./custom-fonts.css');

:root {
	--text-font: var(--fonts-sans-serif);
	--header-font: var(--fonts-monospace);
	--code-font: var(--fonts-monospace);

	&.dark {
		/* --primary-color: #acac10; */
		--primary-color: #00ceaa;
		--hover-color: #000;

		.search-button,
		.social {
			&:hover>img {
				filter: none;
			}
		}
	}
}

.left-nav,
.right-nav {
	a {
		font-family: var(--fonts-monospace);
	}
}

@media (min-width: 992px) {
	body .right-content {
		padding: 0;
		padding-left: 2rem;
		display: flex;
		height: 100vh;
		align-items: center;
	}
}

.heading,
h1,
h2,
h3,
h4,
h5,
h6,
.title .meta {
	font-family: var(--fonts-monospace);
}

li,
p {
	font-weight: 300;
	text-transform: lowercase;

	b,
	strong {
		font-weight: 700;
	}

	code {
		text-transform: none;
	}
}

body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;

	@media (max-width: 768px) {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	nav {
		padding-top: 2rem;
	}

	.content {
		display: flex;
		min-height: 100vh;
		flex-direction: column;
		margin: 0;
		padding: 0;

		a:hover {
			font-weight: 700;
		}

		.page-header {
			flex-grow: 0;

			&:after {
				content: ".";
				color: var(--primary-color);
				font-weight: 900;
			}
		}

		>div,
		>main {
			flex-grow: 1;

			&.homepage {
				align-items: center;
				display: flex;
			}
		}

		footer {
			border-top: 0.4rem dashed var(--primary-color);
			padding: 2rem 0rem;
			margin-top: 2rem;

			>div {
				display: flex;
				align-items: center;
				font-family: var(--fonts-monospace);

				&.top {
					padding-bottom: 1rem;

					a {
						padding: 0;
					}
				}

				&.bottom {
					font-size: 80%;

					> :first-child {
						margin-left: -1rem;
					}
				}

				.social:hover {
					background-color: transparent;
					border-right-color: var(--text-0);

					img {
						background-color: var(--primary-color);
						outline: .25rem solid var(--primary-color);

					}
				}

				>* {
					display: flex;
					align-items: center;
					padding-right: 1rem;
					padding-left: 1rem;
					border-right: 2px solid;
					border-bottom: none;

					&:last-child {
						border-right: none;
					}
				}
			}
		}
	}
}

.footnote-definition {
	margin-top: 2rem;
	padding-top: 1rem;

	.footnote-definition-label {
		font-family: var(--code-font);
		float: left;
		transform: translate(0, 10%);

		&:before {
			content: "[";
		}

		&:after {
			content: "]"
		}
	}

	p {
		margin: 0 0 1rem 2rem;
	}
}

.social img {
	width: 16px;
	border-radius: 0;
}