:root {
	--background-color: #fff;
	--font-color: #000;
	--font-color-lighter: rgb(87, 89, 88);
	--font-size-main: 3.045rem;
	--font-size-description: 1.245rem;
	--lineheight-description: 1.845rem;
	--box-color: rgba(242, 242, 242, 0.5);
	--working-color: #137333;
	--working-color-background: #e6f4ea;
	--error-color-background: #fce8e6;
	--error-color: #c5221f;
	--working-with-error-color: #b05a00;
	--working-with-error-color-background: #fef7e0;
	--linear-start-color: #f37335;
	--linear-end-color: #ff4200fc;
	--icon-size: 48px;
	--mask-color: rgba(255, 255, 255, 0.5);
}

h2,
h1 {
	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
	color: var(--linear-end-color);
	background-image: linear-gradient(
		90deg,
		var(--linear-start-color),
		var(--linear-end-color)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

div,
p {
	font-family: Roboto, Noto Sans SC, sans-serif;
	line-height: 140%;
}

body {
	margin: 20vh calc(10vw - 0.5rem);
	font-family: Roboto, Noto Sans SC, sans-serif;
	color: var(--font-color);
	background-color: var(--background-color);
}

background > p {
	visibility: hidden;
	position: absolute;
	top: 69vh;
	right: 0;
	color: var(--font-color-lighter);
	font-size: calc(var(--font-size-description) - 0.4rem);
}

background:hover > p {
	visibility: visible;
}

a {
	text-decoration: none;
	color: #1e7dff;
}

@media screen and (max-width: 480px) {
	body {
		margin: 20vh calc(4vw - 0.5rem);
	}

	.toast {
		margin: 0 2vw !important;
	}

	:root {
		--font-size-main: 2.25rem;
		--font-size-description: 1.045rem;
	}
}

code {
	font-family: Fira Mono, monospace;
}

none {
	display: none;
}

icon {
	vertical-align: middle;
	font-size: 48px;
	font-family: "Material Icons Outlined";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

background {
	top: 0px;
	right: 0px;
	float: right;
	position: absolute;
	width: 100%;
	height: 95%;
	max-height: 86vh;
	background-size: cover;
	background-image: url(/resources/background.webp),
		url(/resources/background.png);
	z-index: -1;
	border-radius: 0 0 15px 15px;
	filter: blur(0.2px);
}

@media (prefers-color-scheme: dark) {
	:root {
		--font-color: #e8eaed;
		--font-color-lighter: #9aa0a6;
		--background-color: #121212;
		--box-color: rgb(40 40 40 / 73%);
		--working-color-background: rgba(129, 201, 149, 0.24);
		--error-color-background: rgba(242, 139, 130, 0.24);
		--working-with-error-color-background: rgba(253, 214, 99, 0.24);
		--working-color: #81c995;
		--error-color: #f28b82;
		--working-with-error-color: #fdd663;
		--linear-start-color: #0c8cca;
		--linear-end-color: #00bdff;
		--mask-color: rgba(0, 0, 0, 0.5);
	}

	background {
		filter: brightness(50%);
	}
}

.toast {
	background: var(--mask-color);
	border-radius: 8px;
	display: block;
	padding: 0.4rem;
	width: 100%;

	left: 0px;
	position: absolute;
	top: 8px;
	right: 0px;
	width: stretch;
	margin: 0 5vw;

	backdrop-filter: blur(15px);
}
