:root {
	--neu-00: #fcfcfd;
	--neu-10: #eff1f5;
	--neu-20: #dde1e9;
	--neu-30: #b6bdc9;
	--neu-40: #99a4b2;
	--neu-50: #707e8f;
	--neu-60: #5a6772;
	--neu-70: #454e54;
	--neu-80: #2f3437;
	--neu-90: #181a1b;
	--neu-99: #020303;
	--err-10: #f6ecea;
	--err-20: #eed6d3;
	--err-30: #e3b0ab;
	--err-50: #c83232;
	--err-70: #821720;
	--err-90: #450812;
	--war-10: #f7f5e8;
	--war-20: #f1ead0;
	--war-30: #e5d299;
	--war-50: #d5a139;
	--war-70: #6c4713;
	--war-90: #3a2108;
	--suc-10: #eaf5ed;
	--suc-20: #c6e7cc;
	--suc-30: #90d59c;
	--suc-50: #4baf53;
	--suc-70: #0b460b;
	--suc-90: #062603;
	--inf-10: #F2F6F7;
	--inf-20: #D8E5E9;
	--inf-30: #ACC6D2;
	--inf-50: #6493B4;
	--inf-70: #28598A;
	--inf-90: #122D54;

	/* Light Theme */
	--lht-bkg-drk: var(--neu-20);
	--lht-bkg-def: var(--neu-10);
	--lht-bkg-lgt: var(--neu-00);

	--lht-bdr-def: var(--neu-30);
	--lht-bdr-var: var(--neu-20);

	--lht-txt-def: var(--neu-90);
	--lht-txt-var: var(--neu-60);
	--lht-txt-lnk: var(--inf-70);
	--lht-txt-hov: var(--inf-50);

	/* Dark Theme */
	--dkt-bkg-drk: var(--neu-99);
	--dkt-bkg-def: var(--neu-90);
	--dkt-bkg-lgt: var(--neu-80);

	--dkt-bdr-def: var(--neu-60);
	--dkt-bdr-var: var(--neu-70);

	--dkt-txt-def: var(--neu-10);
	--dkt-txt-var: var(--neu-30);
	--dkt-txt-lnk: var(--inf-30);
	--dkt-txt-hov: var(--inf-20);
}

html * {
    font-family: "Montserrat", sans-serif;
    background-color: var(--lht-bkg-lgt);
	color: var(--lht-txt-def);
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	max-width: 1160px;
	margin: 0 20px;

	line-height: 1.45;
}

.col {
	display: flex;
	flex-direction: column;
	max-width: 512px;
}

.heading-xxl {
	font-size: 2.938rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 1.25rem 0 2.5rem 0;
}
.heading-xl {
	font-size: 2.188rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 1.25rem;
}
h1, .heading-l {
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 1.25rem 0;
}
h2, .heading-m, .btn-l {
	font-size: 1.25rem;
	font-weight: 700;
}
h3, .heading-s, .btn-m {
	font-size: 1rem;
	font-weight: 700;
}

p, .body-l {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 1.25rem;
}
.body-m {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 1.25rem;
    color: var(--lht-txt-var);
}
.body-s {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	margin-bottom: 1.125rem;
    color: var(--lht-txt-var);
}

.button-s {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

a {
	color: var(--lht-txt-lnk);
	text-decoration: underline;
} a:hover {
	color: var(--lht-txt-hov);
	text-decoration: underline;
}

.soft-shadow {
	box-shadow: 2px 4px 15px rgba(2,3,3,0.150);
}