@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
	font-family: Rubik, sans-serif;
	font-weight: 400;

	font-size: 1em;

	--fg: #f6f6f6;
	--fg2: #d3d3d3;
	--fg3: #777777;
	--bg-1: #000000;
	--bg0: #0b0b0b;
	--bg: #131313;
	--bg2: #1d1d1d;
	--bg3: #2b2b2b;
	--bg4: #3a3a3a;

	--instance: #7ee91b;
	--template: #1be9ce;
	--package: #e9671b;
	--plugin: #5b65ff;
	--warning: #e9ca1b;
	--error: #d40e3d;

	--border: 0.15rem;
	--round: 0.35rem;
	--round2: 0.75rem;

	--link-color: var(--fg);

	background-color: var(--bg);
	color: var(--fg);

	margin: 0px;
}

body {
	margin: 0px;
}

.cont {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.col {
	flex-direction: column;
}

.start {
	justify-content: flex-start;
}

.end {
	justify-content: flex-end;
}

.fullwidth {
	width: 100%;
}

.bold {
	font-weight: bold;
}

.rel {
	position: relative;
}

.link:active,
.link:hover,
.link:visited,
.link:link,
.link:focus {
	color: var(--link-color);
	text-decoration: none;
}

@media only screen and (max-width: 600px) {
	:root {
		font-size: 1.4em;
	}
}