:root {
	--dark: rgb(25, 30, 35);
	--darker: rgb(15, 20, 25);
	--light: rgb(195, 200, 205);
	--lighter: rgb(245, 250, 255);
	--blue-light: #9cdcfe;
	--blue-dark: #569bd4;
	--green-light: #b5cea8;
	--green-dark: #4ec9b0;
	--yellow: #dcdcaa;
	--red: #ce9178;
	--purple: #c586c0;
	--purple-dark: #543952;
}

@font-face {
	font-family: SegoeUI;
	src: url("light.woff2") format("woff2");
	font-weight: 100;
}

@font-face {
	font-family: SegoeUI;
	src: url("semi-light.woff2") format("woff2");
	font-weight: 200;
}

@font-face {
	font-family: SegoeUI;
	src: url("normal.woff2") format("woff2");
	font-weight: 400;
}

@font-face {
	font-family: SegoeUI;
		src: url("semi-bold.woff2") format("woff2");
	font-weight: 600;
}

@font-face {
	font-family: SegoeUI;
	src: url("bold.woff2") format("woff2");
	font-weight: 700;
}

* { margin: 0; padding: 0; border: 0 none; box-sizing: border-box; }
html { font-size: 10px; height: 100%; }
body { height: 100%; background: var(--dark); color: var(--light); font-family: SegoeUI; font-size: 1.6rem; }
a { color: var(--blue-dark); text-decoration: none; border-bottom: .2rem solid; }

h1.brand a { color: var(--lighter); font-weight: 100; font-size: 3rem; border: 0 none; }

main-container { display: flex; }
drawer-left { padding: 2rem; width: 32rem; display: flex; flex-direction: column; gap: 2rem; }

account-box ul { padding: 0; list-style-type: none; }
account-box a { border: 0 none; }