body {
	margin: 0;
	padding: 20px;
	background: #fff;
}

.spacing {
	padding-bottom: 12px;
	padding-top: 12px;
}

.square {
	width: 35px;
	height: 35px;
	background-color: #1a82f7; 
	animation: spin 3s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-block;
	background:
		radial-gradient(circle at center, #1a82f7, transparent),
		linear-gradient(to bottom, #2F2727, #000);
}

.radial-center {
	background: radial-gradient(circle at center, #1a82f7, #2F2727);
}

.radial-linear {
	background:
		radial-gradient(circle at center, rgba(26,130,247,0.6) 30%, transparent 70%),
		linear-gradient(to bottom, #ffcc00, #6600cc);
	background-blend-mode: screen;
}