:root {
	font-family: monospace;
	background: #000;
	color: #EEE;
}

html,body {
	margin: 0;
	padding: 0;
}

body > div {
	margin: 0;
	padding: 0;
	width: 100vw;

	&.top {
		height: 5vh;
		display: flex;
		font-size: 2.5vh;

		justify-content: space-around;
		align-items: center;

		position: sticky;
		top: 0;
	}

	&.page {
		height: 95vh;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
}

span.title {
	color: #b063e8;

	&::before {
		content: "> ";
	}

	&::after {
		content: " <";
	}
}

div.services {
	display: inline-grid;
	grid-template-columns: 1fr 0.75fr 1fr;

	justify-content: center;
	align-items: start;
	
	margin: 0;

	> * {
		display: inline;
		box-sizing: border-box;
		font-size: 1.25em;
		margin: 0;
	}

	> p.tag {
		grid-column: 1;
		justify-self: end;
		color: #ef1030;
		
		&::before {
			content: "[";
		}

		&::after {
			content: "]";
		}
	}
	
	> p.title {
		grid-column: 2;
		justify-self: center;
		margin: 0 0.5em;
		color: #10ef30;
	}	
	

	> a.link {
		grid-column: 3;
		justify-self: start;
		color: #1050d0;
		/* color: inherit; */
	}
}