/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/


body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

:root {
  --total: 12;
  --radius: 200px;
}

.wheel {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  margin: 100px auto;
}

.zero {
  --i: 0;
}

.one {
  --i: 1;
}

.two {
  --i: 2;
}

.three {
  --i: 3;
}

.four {
  --i: 4;
}

.five {
  --i: 5;
}

.six {
  --i: 6;
}

.seven {
  --i: 7;
}

.eight {
  --i: 8;
}

.nine {
  --i: 9;
}

.ten {
  --i: 10;
}

.eleven {
  --i: 11;
}

li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px;
  
  
  background: #667eea;
  color: white;
  border-radius: 50%;
  
  display: -ms-grid;
  
  display: grid;
  place-items: center;
  font-weight: 300;
  
  
  --angle: calc(360deg / var(--total) * var(--i));
  
  -webkit-transform: rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(-1*var(--angle)))
  ;
  
      -ms-transform: rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(-1*var(--angle)))
  ;
  
          transform: rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(-1*var(--angle)))
  ;
  
}

.house {
  display: block;
  text-align: center;
  font-weight: 600;
  transform: translateY(-50px);
}