/* === relevant portion === */
html,
head,
title,
link,
body {
	display: block;
	padding: 0;
	margin: 0;
}

html {
	color: blue;
}

head {
	color: yellowgreen;
}

title {
	color: blueviolet;
}

link {
	color: orange;
}

link:nth-of-type(2) {
	color: orangered;
}

link:nth-of-type(3) {
	color: maroon;
}

body {
	color: skyblue;
}

/* === for demo purposes === */
html,
body {
	font-size: 0;
}

html {
	display: flex;
	place-items: center;
	justify-content: space-evenly;
	min-height: 100%;
}

*::before,
*::after {
	content: '';
	position: relative;
	box-sizing: border-box;
	border-radius: 50%;
	display: block;

	width: 10vmin;
	height: 10vmin;
	background-image: radial-gradient(circle at center, currentColor 64%, transparent calc(64% + 1px));
}