bgenc.net/src/app.css

html {
	--color-primary-h: 49;
	--color-primary-s: 79%;
	--color-primary-l: 53%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	--color-secondary-h: 218;
	--color-secondary-s: 81%;
	--color-secondary-l: 24%;
	--color-secondary: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		var(--color-secondary-l)
	);
	--color-tertiary-h: 191;
	--color-tertiary-s: 55%;
	--color-tertiary-l: 53%;
	--color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
	--color-quaternary-h: 241;
	--color-quaternary-s: 48%;
	--color-quaternary-l: 41%;
	--color-quaternary: hsl(
		var(--color-quaternary-h),
		var(--color-quaternary-s),
		var(--color-quaternary-l)
	);
	--color-quinary-h: 237;
	--color-quinary-s: 97%;
	--color-quinary-l: 27%;
	--color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));

	--color-text-h: 0;
	--color-text-s: 0%;
	--color-text-l: 0%;
	--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
	--color-bg-h: 0;
	--color-bg-s: 0%;
	--color-bg-l: 100%;
	--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));

	--animation-speed: 0.2s;
	--animation-type: ease-in-out;

	--size-container: 640px;
	--size-modal: 480px;

	--shadow-luminosity: calc(100% - var(--color-bg-l));
	--shadow-small: 0.5px 1px 1px
		hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
	--shadow-medium: 1px 2px 2px
			hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
		2px 4px 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
		3px 6px 6px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333);
	--shadow-large: 1px 2px 2px
			hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		2px 4px 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		4px 8px 8px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		8px 16px 16px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		16px 32px 32px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2);

	--z-index-modal: 100;

	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Reset */
body {
	font-size: 16px;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
	padding: 0;
	font-weight: normal;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		avenir next,
		avenir,
		segoe ui,
		helvetica neue,
		helvetica,
		Cantarell,
		Ubuntu,
		roboto,
		noto,
		arial,
		sans-serif;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}
input,
button,
textarea,
select {
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}