docs.css

.yt-video {
    height: 250px;
}

@media only screen and (min-width: 768px) {
	.yt-video {
		height: 350px;
	}
}

@media only screen and (min-width: 1024px) {
	.yt-video {
		height: 450px;
	}
}

@media only screen and (max-width: 1024px) {
	.collapse.collapsed {
		display: none;
	}
}

#TableOfContents > ul {
	@apply overflow-x-hidden font-medium text-gray-500 dark:text-gray-400;
}

#TableOfContents > ul > li > a {
	@apply block py-2 font-medium transition-colors duration-200 hover:text-gray-900 dark:hover:text-white;
}

#TableOfContents > ul > li > ul > li > a {
	@apply transition-colors duration-200 hover:text-gray-900 dark:hover:text-white;
}

#TableOfContents > ul > li > ul {
	@apply pl-4;
}

#TableOfContents > ul > li > ul {
	@apply pt-2;
}

#TableOfContents > ul > li > ul > li {
	@apply pb-3;
}

.highlight {
	@apply overflow-hidden;
}

#mainContent > h2 {
	@apply mt-8 mb-4 text-2xl font-bold dark:text-white;
}

#mainContent > h3,
#mainContent > h4 {
	@apply mt-8 mb-4 text-xl font-bold dark:text-white;
}

#mainContent > p {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

#mainContent > p > a,
#mainContent > ul > li > a,
#mainContent > ol > li > a {
	@apply font-semibold text-gray-700 underline dark:text-gray-300 decoration-1 underline-offset-2 decoration-blue-600 dark:decoration-blue-500;
}

#mainContent > p > a:hover,
#mainContent > ul > li > a:hover,
#mainContent > ol > li > a:hover {
	@apply text-gray-900 decoration-2 dark:text-white;
}

#mainContent > p > code,
#mainContent > ul > li > code,
#mainContent > ol > li > code {
	@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400;
}

#mainContent > ul {
	list-style: disc;
}

#mainContent > ol {
	list-style: decimal;
}

#mainContent p > strong {
	@apply text-gray-900 dark:text-white;
}

#mainContent > ul,
#mainContent > ol {
	padding-left: 1rem;
}

#mainContent > ul > li,
#mainContent > ol > li {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

/* prism styles */

code[class*="language-"],
pre[class*="language-"] {
	color: #c5c8c6;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

	@apply font-light;
}

/* without preview */
.highlight pre[class*="language-"] {
	overflow: auto;
	@apply p-6 pt-6 m-0 mt-4 mb-8 text-sm bg-gray-800 rounded-xl;
}

/* when after preview */
.code-preview + .code-syntax .highlight pre[class*="language-"] {
	overflow: auto;
	@apply mt-0;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #1d1f21;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: 0.1em;
	border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #7c7c7c;
}

.token.punctuation {
	color: #c5c8c6;
}

.namespace {
	opacity: 0.7;
}

.token.property,
.token.keyword,
.token.tag {
	color: #96cbfe;
}

.token.class-name {
	color: #ffffb6;
	text-decoration: underline;
}

.token.boolean,
.token.constant {
	color: #99cc99;
}

.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.number {
	color: #ff73fd;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a8ff60;
}

.token.variable {
	color: #c6c5fe;
}

.token.operator {
	color: #ededed;
}

.token.entity {
	color: #ffffb6;
	cursor: help;
}

.token.url {
	color: #96cbfe;
}

.language-css .token.string,
.style .token.string {
	color: #87c38a;
}

.token.atrule,
.token.attr-value {
	color: #f9ee98;
}

.token.function {
	color: #dad085;
}

.token.regex {
	color: #e9c062;
}

.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

code.language-bash,
pre.language-bash {
	color: white;
}

code.language-javascript {
	color: white;
}

code.language-javascript .token {
	color: #96cbfe;
	background: transparent;
}

code.language-javascript .token.comment {
	color: #c5c8c6;
}

#carbonads * {
	margin: initial;
	padding: initial;
}
#carbonads {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
		Helvetica, Arial, sans-serif;
	@apply mt-4 mb-12;
}
#carbonads {
	display: flex;
	max-width: 330px;
	box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
	z-index: 100;
	@apply bg-white dark:bg-gray-800 dark:text-white;
}
#carbonads a {
	color: inherit;
	text-decoration: none;
}
#carbonads a:hover {
	color: inherit;
}
#carbonads span {
	position: relative;
	display: block;
	overflow: hidden;
}
#carbonads .carbon-wrap {
	display: flex;
}
#carbonads .carbon-img {
	display: block;
	margin: 0;
	line-height: 1;
}
#carbonads .carbon-img img {
	display: block;
}
#carbonads .carbon-text {
	font-size: 13px;
	padding: 10px;
	margin-bottom: 16px;
	line-height: 1.5;
	text-align: left;
}
#carbonads .carbon-poweredby {
	@apply bg-gray-100 dark:bg-gray-800;
	display: block;
	padding: 6px 8px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	font-size: 8px;
	line-height: 1;
	border-top-left-radius: 3px;
	position: absolute;
	bottom: 0;
	right: 0;
}

/* Search */

.DocSearch-Button {
	@apply hidden h-auto p-2 m-0 border border-gray-300 border-solid rounded-lg shadow-none w-52 bg-gray-50 md:flex hover:bg-gray-100 xl:w-64 hover:shadow-none focus:shadow-none dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600;
}

.DocSearch-Button-Placeholder {
	@apply text-sm font-normal text-gray-500 dark:text-gray-400;
}

.DocSearch-Search-Icon {
	@apply w-3 h-3 text-gray-500 md:mr-1 dark:text-gray-400;
}

.DocSearch-Button-Keys {
	@apply items-center min-w-0;
}

.DocSearch-Button-Key {
	@apply w-auto pt-1 pb-0 m-0 text-xs font-normal text-gray-500 shadow-none bg-none dark:text-gray-400;
}

.DocSearch-Button .DocSearch-Search-Icon {
	@apply text-gray-500;
}

.DocSearch-Hit-icon {
	@apply hidden;
}

.DocSearch-Hits mark {
	@apply text-blue-600 dark:text-white decoration-2 underline-offset-2 decoration-blue-600 dark:decoration-white;
}

.DocSearch-Hit[aria-selected=true] a {
	@apply bg-blue-700 dark:bg-blue-600;
}

.DocSearch-Hit-source {
	@apply pb-1 text-gray-700 bg-white dark:bg-gray-700 dark:text-gray-400;
}

.DocSearch-Container {
	@apply bg-gray-900 bg-opacity-50 dark:bg-opacity-80;
}

.DocSearch-Modal {
	@apply shadow-none dark:bg-gray-700;
}

.DocSearch-SearchBar {
	@apply p-0 border-b border-gray-100 dark:border-gray-600;
}

.DocSearch-Form {
	@apply shadow-none dark:bg-gray-700;
}

.DocSearch-Input {
	@apply text-sm text-gray-500 shadow-none dark:text-white focus:shadow-none focus:ring-0 dark:bg-gray-700;
}

.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
	@apply w-4 h-4;
}

.DocSearch-Commands {
	@apply hidden;
}

.DocSearch-Footer {
	@apply h-12 border-t border-gray-100 shadow-none dark:bg-gray-700 dark:border-gray-600;
}

.DocSearch-Dropdown {
	@apply bg-white dark:bg-gray-700;
}

.DocSearch-Hit {
	@apply pb-2 shadow-none;
}

.DocSearch-Hit a {
	@apply rounded-lg shadow-none bg-gray-50 dark:bg-gray-600 dark:hover:bg-blue-600;
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon,
.DocSearch-Hit-action-button {
	@apply hidden;
}

.DocSearch-Hit .DocSearch-Hit-action:last-child {
	@apply w-5 h-5;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action:last-child {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Screen-Icon,
.DocSearch-NoResults-Prefill-List,
.DocSearch-Cancel {
	@apply hidden;
}

.DocSearch-Title {
	@apply mb-1 text-lg font-normal text-gray-700 dark:text-gray-200;
}

.DocSearch-Hit-Container {
	@apply dark:text-gray-300;
}

.DocSearch-Logo svg {
	@apply dark:text-gray-400;
}

.DocSearch-Reset {
	@apply dark:text-gray-300 dark:hover:text-white hover:text-black;
}