: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: #f2f2f2;
	--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;
}

h2,
h1 {
	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
	background: 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: 6rem 5vw;
	font-family: Roboto, Noto Sans SC, sans-serif;
	color: var(--font-color);
	background-color: var(--background-color);
}

a {
	text-decoration: none;
	color: #1967d2;
}

@media screen and (max-width: 480px) {
	body {
		margin: 6rem 2vw;
	}

	:root {
		--font-size-main: 2.5rem;
		--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";
	-webkit-font-smoothing: antialiased;
}

background {
	top: 0px;
	right: 0px;
	float: right;
	position: absolute;
	min-width: 100%;
	min-height: 75vh;
	background-size: cover;
	background-image: url(https://storage.186526.xyz/home-app/assets/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;
	}

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

tooltiptext {
	display: none;
	visibility: hidden;
	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 0.6s;

	position: absolute;
	z-index: 1;
}

:hover > tooltiptext {
	display: block;
	visibility: visible;
	opacity: 1;
}