NerdsforNerds/static/style.css

:root {
	--text-color: #ffffff;
	--bg-color: #000000;
	--accent-color: #d072b9;
	--visited-color: #13b1df;
	--bq-bg-color: #111111;
	--pre-bg-color: #222222;
	--border-color: #555555;
}


input, label {
	display: none;
}

label svg {
	color: var(--text-color);
}

body {
	font-family: 'Noto Sans', 'DejaVu Sans', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-color);
	background-color: var(--bg-color);
	margin: 0;
}

article {
	max-width: calc(80.5% - 320px);
	min-width: calc(80.5% - 320px);
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 0.015rem;
}

h1 {
	padding: 0.83em 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

aside {
	max-width: calc(8.75% + 160px);
	min-width: calc(8.75% + 160px);
	line-height: 21px;
	overflow: auto;
	position: fixed;
}

aside.left {
	font-size: 14px;
	height: 100vh;
}

aside.left a p {
	padding-left: 1em;
	margin-right: 1em;
}

aside ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0 10px 10px 10px;
}

aside ul li a {
	padding: 10px;
	width: calc(100% - 20px);
	color: var(--text-color);
	text-decoration: none;
	display: inline-block;
}

aside ul li:hover a {
	font-weight: 600;
	background-color: var(--pre-bg-color);
	border-radius: 10px;
}

aside.left ul li.currentpage a {
	color: var(--accent-color);
	text-decoration: none;
}

aside h2 {
	font-size: 1.3em;
}

aside.right {
	right: 0;
	top: 0;
	text-align: center;
}

a {
	color: var(--accent-color);
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a:visited {
	color: var(--visited-color);
}

pre {
	background-color: var(--pre-bg-color);
	border-radius: 10px;
	padding: 15px;
	overflow: auto;
	font-size: 14px;
}

code {
	background-color: var(--pre-bg-color);
	border-radius: 10px;
	padding: 0 6px 3px 6px;
}

pre code {
	padding: 0;
}

article img {
	display: block;
	margin: auto;
	max-width: 95%;
}

table {
	display: table;
	table-layout: auto;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th {
	background-color: var(--pre-bg-color);
}

td, th {
	border: 2px solid var(--border-color);
	padding: 10px 5px;
	text-align: center;
}

blockquote {
	background-color: var(--bq-bg-color);
	border-radius: 10px;
	padding: 0 15px;
	overflow: auto;
}

hr {
	color: var(--border-color);
}




@media (max-width: 991px) {
	h1 {
		margin-left: 3em;
	}

	article {
		max-width: 95%;
	}

	aside.left {
		max-width: 100%;
		width: 0;
		height: 0;
	}

	aside.left ul {
		display: none;
	}

	aside.right {
		display: block;
		position: static;
		max-width: 100vw;
	}

	label {
		position: fixed;
		display: block;
		cursor: pointer;
		width: 5em;
		height: 5em;
		background-color: #6666667f;
		border-radius: 10px;
		margin-top: 0.83em;
		margin-left: 0.5em;
	}

	input:checked + aside.left a p {
		font-size: 175%;
		line-height: 175%;
	}

	input:checked + aside.left ul {
		padding-top: 2.83em;
		display: block;
		font-size: 175%;
		line-height: 175%;
	}

	input:checked + aside.left {
		width: 50vw;
		height: 100vh;
		background-color: var(--bg-color);
	}
}

@media screen and (max-width:1500px) and (min-width:1280px) {
	article {
		max-width: calc(100% - 600px);
		min-width: calc(100% - 600px);
	}

	aside {
		max-width: calc(300px - 1%);
		min-width: calc(300px - 1%);
	}
}

@media (min-width: 1092px) and (max-width: 1225px) {
	article {
		min-width: 50%;
	}
}

@media (min-width: 1700px) {
	article {
		max-width: 1047px;
		min-width: 1047px;
	}
	aside {
		max-width: 325px;
		min-width: 325px;
	}
	aside.left {
		right: calc(50% + 1067px * 0.5);
	}
	aside.right {
		left: calc(50% + 1067px * 0.5);
	}
}

gfg-tab {
	display: none;
}