src/static/style/_defaults.scss
// some basic css that applies mostly to html(5) tags
@use 'vars';

:root {
	font-size: 1.075rem;
	@media (max-width: 1600px) {
		font-size: 0.95rem;
	}
}

* {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	color: vars.$text-color;
	box-sizing: border-box;
	font-family: "Nunito", sans-serif;
	-webkit-tap-highlight-color: transparent;
}

div, span, a, button, input, textarea {
	font-size: 1rem;
	font-weight: 600;
}

code {
	font-family: 'Roboto Mono', monospace;
	font-weight: 500;
	display: inline-block;
	background: vars.$code-bg;
	padding: .1rem .2rem;
	border-radius: .25rem;
	margin: 0 .25rem;
	white-space: pre-wrap;
}

strong code {
	font-weight: 700;
}

pre {
	white-space: normal;

	> code {
		padding: .5rem .75rem;
		border-radius: .5rem;
		margin: .5rem 0;
		white-space: pre-wrap;
	}
}

td code {
	line-break: anywhere;
}

ol, ul {
	list-style-position: outside;

	li {
		margin-left: 1.5rem;

		> ul, > ol {
			margin-left: 1rem;
		}
	}

	p {
		display: inline;
	}
}

p {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

table {
	border-collapse: collapse;
	margin: .75rem 0;
	table-layout: fixed;
	width: 100%;
}

td, th {
	padding: .3rem;
}

thead {
	> tr {
		background: vars.$table-header-bg;
	}

	th {
		border: 1px solid vars.$table-header-divider;
		border-top-width: 0;
		border-bottom-width: 0;
		padding: .6rem .4rem;

		&:first-child {
			border-left-width: 0;
			border-top-left-radius: .5rem;
		}

		&:last-child {
			border-right-width: 0;
			border-top-right-radius: .5rem;
		}
	}
}

tbody {
	> tr {
		transition: background-color .1s ease;

		&:nth-child(even) {
			background: vars.$table-row-alt-bg;
		}

		&:last-child {
			td:first-child {
				border-bottom-left-radius: .5rem;
			}

			td:last-child {
				border-bottom-right-radius: .5rem;
			}
		}

		&:hover {
			background: vars.$table-row-hover-bg;
		}
	}
}

strong {
	font-weight: 800;
}

a {
	text-decoration: none;
	font-size: inherit;

	&, * {
		color: vars.$link-color;
	}
}

:focus {
	outline: none;
}

hr {
	height: 1px;
	background-color: vars.$divider-color;
	margin: 1rem auto;
}

button {
	cursor: pointer;
	
	&:disabled {
		cursor: default;
	}
}

blockquote {
	border-left: 0.3rem solid vars.$quote-color;
	padding-left: .5rem;
	margin: .5rem 0 .5rem 0.5rem;
}

.md-spoiler-text {
	background: vars.$text-color;
	transition: background-color .5s ease;
	transition-delay: 9999999s;

	* {
		opacity: 0;
		transition: opacity .5s ease;
		transition-delay: 9999999s;
	}

	&:hover {
		background: inherit;
		transition-delay: 0.25s;

		* {
			opacity: 1;
			transition-delay: 0.1s;
		}
	}
}

* {
	scrollbar-width: thin;
	scrollbar-color: vars.$scrollbar-color transparent;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: vars.$scrollbar-color;

	&:hover {
		background: vars.$scrollbar-color-hover;
	}
}

::selection {
	background: rgba(vars.$primary-var, 0.8);
	color: vars.$text-color;
}
