.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: rgb(235, 5, 251); }
.blue   { background-color: rgb(16, 238, 254); }
.green  { background-color:  rgb(9, 36, 244); }
.yellow { background-color: red; }
.purple { background-color: rgb(241, 126, 11); }
.orange { background-color: rgb(9, 4, 1); }

.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); }
}