@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	.sidebar-toggle {
		display: none;
	}
}

.search .results-panel {
	padding: 10px;
	font-family: "Open Sans", sans-serif;
	p {
		font-size: 12px !important;
	}
}

a {
	text-decoration: none !important;
	&:hover {
		text-decoration: none !important;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto", sans-serif;
}

/* Cover page: allow scrolling back up on the home page */
body.cover-show {
	overflow: auto !important;
	height: auto !important;
}

body.cover-show .sidebar,
body.cover-show .content {
	position: absolute !important;
}

body.cover-show section.cover {
	position: relative !important;
	z-index: 1;
}

body.cover-show #main {
	position: relative;
	z-index: 2;
}

.cover {
	background: #fff !important;
	--coverBackground: #fff !important;
	color: #333 !important;
	.cover-main {
		margin: 0 auto !important;
		max-width: 800px;
		a {
			color: #fff !important;
			border-radius: 5px !important;
			border: 0 !important;
			outline: 0 !important;
			&:hover {
				color: #fff !important;
				background-color: #01497f !important;
				text-decoration: none;
			}
		}
	}
}

.content {
	left: 20%;
	h1 {
		.anchor {
			span {
				color: #228be6 !important;
			}
		}
	}
	a {
		color: var(--accent) !important;
		text-decoration: none !important;
		&:hover {
			color: var(--textColor) !important;
			text-decoration: none;
		}
	}
}

.sidebar {
	width: 22%;
	a:hover {
		color: #228be6 !important;
		text-decoration: none;
	}
	.app-name-link {
		img {
			max-width: 80%;
			transition: filter 0.3s;
		}
	}
}

:root[style*="color-scheme: light"] .sidebar {
	--borderColor: rgba(0, 0, 0, 0.1) !important;
}

:root[style*="color-scheme: dark"] .sidebar {
	--borderColor: rgba(255, 255, 255, 0.3) !important;
}

:root[style*="color-scheme: dark"] .sidebar .app-name-link img {
	filter: brightness(0) invert(1);
}

:root[style*="color-scheme: dark"] .cover {
	background: var(--background) !important;
	--coverBackground: var(--background) !important;
	color: var(--textColor) !important;
}

:root[style*="color-scheme: dark"] .cover-main img {
	filter: brightness(0) invert(1);
}