main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100vw;
}

/* Wheel container */
.wheel {
  border: 2px solid black;
  border-radius: 50%;
	position: relative; 
  margin: 0;
  height: 55vw;
  width: 55vw;
  max-height: 500px;
  max-width: 500px;
  animation: wheel 10s linear infinite;
}

/* Wheel lines (spokes) */
.line {
  background-color: black;
  width: 50%;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
}

/* Rotate lines to form spokes */
.line:nth-of-type(1) { transform: rotate(0deg); }
.line:nth-of-type(2) { transform: rotate(60deg); }
.line:nth-of-type(3) { transform: rotate(120deg); }
.line:nth-of-type(4) { transform: rotate(180deg); }
.line:nth-of-type(5) { transform: rotate(240deg); }
.line:nth-of-type(6) { transform: rotate(300deg); }

/* Ferris wheel cabins */
.cabin {
  background-color: red;
  width: 20%;
  height: 20%;
  position: absolute;
  border: 2px solid black;
  transform-origin: 50% 0%;
  animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) { right: -8.5%; top: 50%; }
.cabin:nth-of-type(2) { right: 17%; top: 93.5%; }
.cabin:nth-of-type(3) { right: 67%; top: 93.5%; }
.cabin:nth-of-type(4) { left: -8.5%; top: 50%; }
.cabin:nth-of-type(5) { left: 17%; top: 7%; }
.cabin:nth-of-type(6) { right: 17%; top: 7%; }

.cabin:nth-of-type(1)::after {
  content: "";
  position: absolute;
  inset: 8%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 -4 64 64' role='img' aria-label='Squirrel icon'>\
  <circle cx='42' cy='30' r='18' fill='%23C68642'/>\
  <ellipse cx='28' cy='36' rx='12' ry='14' fill='%238D5524'/>\
  <circle cx='24' cy='20' r='10' fill='%238D5524'/>\
  <circle cx='20' cy='10' r='4' fill='%238D5524'/>\
  <circle cx='22' cy='18' r='2' fill='%23000'/>\
  <circle cx='16' cy='22' r='1.5' fill='%23000'/>\
  <circle cx='20' cy='44' r='5' fill='%238D5524'/>\
</svg>");
}

/* =========================================================================
   Animations
   ========================================================================= */

@keyframes wheel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cabins {
  0%   { transform: rotate(0deg); }
  25%  { background-color: yellow; }
  50%  { background-color: purple; }
  75%  { background-color: yellow; }
  100% { transform: rotate(-360deg); }
}