.fixed { position: fixed; }

.left-0 { left: 0; }
.left-10 { left: 10%; }
.left-20 { left: 20%; }
.left-30 { left: 30%; }
.left-40 { left: 40%; }
.left-50 { left: 50%; }
.left-60 { left: 60%; }
.left-70 { left: 70%; }
.left-80 { left: 80%; }
.left-90 { left: 90%; }
.left-100 { left: 100%; }

.top    { top:    0; width:  100%; }
.bottom { bottom: 0; width:  100%; }
.left   { left:   0; height: 100%; }
.right  { right:  0; height: 100%; }

.flex   { display: flex; }
.row    { flex-direction: row; }
.col    { flex-direction: column; }
.equal  { justify-content: space-between; }
.center { justify-content: center; align-items: center; }

.red    { background-color: red; }
.blue   { background-color: blue; }
.green  { background-color: green; }
.yellow { background-color: yellow; }
.purple { background-color: purple; }
.orange { background-color: orange; }

.size-50 { width: 50px; height: 50px; }

.skew-6  { --skew: 6deg; }
.skew-30 { --skew: 30deg; }
.skew-45 { --skew: 45deg; }
.skew-90 { --skew: 90deg; }

.speed-slow { --speed: 2s; }
.speed-med  { --speed: 1s; }
.speed-fast { --speed: 0.7s; }
.speed-boring { --speed: 1.2s; }

.y-50 { --top: 80vh; }
.y-70 { --top: 90vh; }
.y-90 { --top: 120vh; }

.delay-0 { --delay: 0s; }
.delay-1 { --delay: 1s; }
.delay-2 { --delay: 2s; }
.delay-3 { --delay: 3s; }

.animate-3d { animation: animate-3d var(--speed) linear infinite; }
@keyframes animate-3d {
  0%   { opacity: 0%;   transform: skew(0)           scaleY(1) rotate(0deg); top: 0vh; }
  1%   { opacity: 100%; }
  50%  {                transform: skew(var(--skew)) scaleY(0) rotate(90deg); }
  70%  { opacity: 100%; }
  100% { opacity: 0%;   transform: skew(0)           scaleY(1) rotate(180deg); top: var(--top); }
}

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

.square { width: 4px; height: 4px; }

.red { background: purple; box-shadow: 0 0 0px 0px red; }
.blue { background: #01fe0e; box-shadow: 0 0 0px 0px blue; }
.green { background: #31c7f5; box-shadow: 0 0 0px 0px green; }
.yellow { background: #011fff; box-shadow: 0 0 0px 0px yellow; }

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.left { position: absolute; left: 10px; height: 100%; }
.right { position: absolute; right: 10px; height: 100%; }
.top { position: absolute; top: 10px; width: 100%; }
.bottom { position: absolute; bottom: 10px; width: 100%; }

.spin-pulse { animation: spin-pulse 2s linear infinite; }

@keyframes spin-pulse {
  0% { transform: rotate(0deg) scale(500%); opacity: 100%; }
  50% { transform: rotate(180deg) scale(50%); opacity: 2%; }
  100% { transform: rotate(360deg) scale(500%); opacity: 100%; }
}