index.css

* {
	box-sizing: border-box;
}

body {
	background-color: black;
	color: aliceblue;

	height: 100vh;
	margin: 0;

	display: flex;
	flex-flow: column nowrap;

	user-select: none;
}

body > nav {
	flex: 0 0;

	display: flex;
	align-items: center;
	padding: 0.5em;

	border-bottom: solid 1px grey;
}

body > div {
	flex: 1;

	display: grid;
	grid-template: 1fr / 3em 9em 1fr;
}

#sidebar {
	display: contents;
}

#categories {
	overflow: auto;
	border-right: solid 1px grey;
}

#choices {
	overflow: auto;
	border-right: solid 1px grey;
}

#workspaceContainer {
	flex: 1;

	overflow: hidden;
}

#workspace {
	width: 0;
	height: 0;
	overflow: visible;
}

.block {
	position: absolute;
	background-color: #f1f1f1;
	border: solid 2px #d3d3d3;
	min-width: 16ch;
	width: fit-content;
	height: fit-content;
}

.block > .header {
	padding: 0.5em;
	cursor: move;
	background-color: #2196f3;
}

.block > .content {
	background-color: #222;
	text-align: left;
}

.block > :is(.inputPorts, .outputPorts) {
	white-space: nowrap;
}

.block .port {
	/*
	 * if the shape or the radius changed,
	 * modify the redrawTheLine() in ./index.js accordingly 
	 */
	--radius: 5px;
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: var(--radius);
	display: inline-block;

	background-color: #2196f3;
}

.block.selected {
	border-color: limegreen;
	box-shadow: 0 0 5px limegreen;
}

.lineContainer {
	stroke: hsl(207 90% 80%);
	stroke-width: 3px;
	stroke-linecap: round;
}