@import "../../node_modules/@fontsource/roboto/latin-400.css";
@import "../../node_modules/@fontsource/roboto-mono/latin-400.css";

@import "../../node_modules/mdui/mdui.css";

:not(:defined) {
	visibility: hidden;
}

html,
body {
	height: 100dvh;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
}

[class*="shj-lang-"] {
	white-space: pre;
	color: #112;
	text-shadow: none;
	box-sizing: border-box;
	background: #dedede;
	border-radius: 10px;
	max-width: min(100%, 100vw);
	margin: 10px 0;
	padding: 30px 20px;
	font:
		18px / 24px "Roboto Mono",
		monospace;
	box-shadow: 0 0 5px #0001;
}

.shj-inline {
	border-radius: 5px;
	margin: 0;
	padding: 2px 5px;
	display: inline-block;
}

[class*="shj-lang-"]::selection {
	background: #bdf5;
}

[class*="shj-lang-"] ::selection {
	background: #bdf5;
}

[class*="shj-lang-"]>div {
	display: flex;
	overflow: auto;
}

[class*="shj-lang-"]>div :last-child {
	outline: none;
	flex: 1;
}

.shj-numbers {
	counter-reset: line;
	padding-left: 5px;
}

.shj-numbers div {
	padding-right: 5px;
}

.shj-numbers div:before {
	color: #999;
	content: counter(line);
	opacity: 0.5;
	text-align: right;
	counter-increment: line;
	margin-right: 5px;
	display: block;
}

.shj-syn-cmnt {
	font-style: italic;
}

.shj-syn-err,
.shj-syn-kwd {
	color: #e16;
}

.shj-syn-num,
.shj-syn-class {
	color: #f60;
}

.shj-syn-insert,
.shj-syn-str {
	color: #7d8;
}

.shj-syn-bool {
	color: #3bf;
}

.shj-syn-type,
.shj-syn-oper {
	color: #5af;
}

.shj-syn-section,
.shj-syn-func {
	color: #84f;
}

.shj-syn-deleted,
.shj-syn-var {
	color: #f44;
}

.shj-oneline {
	padding: 12px 10px;
}

.shj-lang-http.shj-oneline .shj-syn-kwd {
	color: #fff;
	background: #25f;
	border-radius: 5px;
	padding: 5px 7px;
}

[class*="shj-lang-"] {
	color: #f8f8f2;
	background: var(--mdui-color-secondary-container);
}

[class*="shj-lang-"]:before {
	color: #6f9aff;
}

.shj-syn-deleted,
.shj-syn-err,
.shj-syn-var {
	color: #ff5261;
}

.shj-syn-section,
.shj-syn-kwd {
	color: #ff7cc6;
}

.shj-syn-class {
	color: #eab07c;
}

.shj-numbers,
.shj-syn-cmnt {
	color: #7d828b;
}

.shj-syn-insert,
.shj-syn-type,
.shj-syn-func,
.shj-syn-bool {
	color: #71d58a;
}

.shj-syn-num {
	color: #b581fd;
}

.shj-syn-oper {
	color: #80c6ff;
}

.shj-syn-str {
	color: #4dacfa;
}

.heartbeat {
	display: inline-block;
	animation: pulse calc(60s / var(--bpm)) infinite ease-in-out;
	transform-origin: center;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.1);
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}