.columns { display: flex; justify-content: space-between; align-items: flex-start; }
	.columns .leftColumn { width: 24%; position: sticky; top: 80px; }
		.columns .leftColumn a { display: block; cursor: pointer; border-radius: 50px; background: rgba(255, 255, 255, 0.08); padding: 15px 20px; margin: 0 0 10px 0; font-size: 12px; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
			.columns .leftColumn a:hover,
			.columns .leftColumn a.on { background: var(--purple); }
	.columns .rightColumn { width: 68%; }

.radiantWrapper { position: absolute; right: 0; }
.purpleRadiant { background: var(--purple); width: 400px; height: 400px; flex-shrink: 0; border-radius: 400px; filter: blur(200px); margin: auto; position: relative; top: -100px; }

.radiantWrapper.center { left: 0; right: 0; width: auto; }
.radiantWrapper.left .purpleRadiant { left: -25%; }
.radiantWrapper.right .purpleRadiant { right: 0; }

@media screen and (max-width: 1100px) {
	.columns { flex-wrap: wrap; }
		.columns .leftColumn { width: 100%; top: 0; position: relative; }
		.columns .rightColumn { width: 100%; }
}