@font-face {
	font-family: JetBrainsMono;
	src: url("../fonts/JetBrainsMono-Regular.woff2");
}

:root {
	--fontfamily: JetBrainsMono;
	--widgetbackground: #23262f;
	--widgettitle: #969cb0;
	--background: #21242c;
	--foreground: #ecedf1;
	--borders: #2a2d37;
	--accent: #7cd0b0;
	--danger: #e87d7d;
	--transtime: 150ms;
	--radius: 5px;

	--extra_lightish: #7c849c;
	--extra_darkish: #484e60;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	background-color: var(--background);
	font-family: var(--fontfamily);
	color: var(--foreground);
	display: flex;
	padding: 0;
	margin: 0;
}

main {
	max-width: 1000px;
	padding: 10px;
	margin: auto;
}

.card {
	background-color: var(--widgetbackground);
	border: var(--borders) 1px solid;
	border-radius: 5px;
	margin: 15px 0px;
	padding: 5px 8px;
}

.card .name {
	font-size: 16px;
}

.card .tags {
	margin: 10px 0px 10px 0px;
	flex-wrap: wrap;
	display: flex;
}

.card .tags div, .card .tags a {
	background-color: var(--borders);
	color: var(--accent);
	border-radius: 50px;
	margin-right: 10px;
	padding: 3px 10px;
	font-size: 10px;
}

.card .desc {
	color: var(--widgettitle);
	font-size: 14px;
}

li {
	color: var(--widgettitle);
	margin-bottom: 10px;
	font-size: 14px;
}

p {
	font-size: 14px;
}