#wheel-headlines span { cursor: pointer; } @media (min-device-width: 700px) and (min-width: 800px), print { #wheel-container { height: 100vh; display: flex; justify-content: center; align-items: center; } #wheel-container { padding: 3.5rem; overflow: hidden; box-sizing:border-box; } #wheel { border: 1px solid #ccc; width: 650px; height: 650px; margin: 0 auto; border-radius: 50%; padding: 0; position: relative; } #wheel ul, #wheel ol { margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #wheel > div { border: 1px solid #ddd; border-radius: 50%; position: absolute;} #wheel > div:nth-of-type(1) { width: 90%; height: 90%; top: 5%; left: 5%; } #wheel > div:nth-of-type(2) { width: 80%; height: 80%; top: 10%; left: 10%; } #wheel > div:nth-of-type(3) { width: 70%; height: 70%; top: 15%; left: 15%; } #wheel > div:nth-of-type(4) { width: 60%; height: 60%; top: 20%; left: 20%; } #wheel > div:nth-of-type(5) { width: 50%; height: 50%; top: 25%; left: 25%; } #wheel > div:nth-of-type(6) { width: 40%; height: 40%; top: 30%; left: 30%; } #wheel > div:nth-of-type(7) { width: 30%; height: 30%; top: 35%; left: 35%; } #wheel > div:nth-of-type(8) { width: 20%; height: 20%; top: 40%; left: 40%; } #wheel > div:nth-of-type(9) { width: 10%; height: 10%; top: 45%; left: 45%; } #wheel-lines li { list-style: none; margin:0; padding:0; display: none; top: calc((650px - 1px)/2); left: 0px; position: absolute; height: 0; border-bottom: 1px solid #cfcfcf; width: 100%; } #wheel-headlines li { list-style: none; margin:0; padding:0; position: absolute; text-align: center; box-sizing: border-box; height: calc(100% - 20rem); width: calc(100% - 20rem); top: 10rem; left: 10rem; z-index: 200; } #wheel-headlines span { position: relative; z-index: 1000; min-width: 4rem; min-height: 2rem; text-align: center; line-height: 2rem; max-width: 10rem; margin: 0 auto; display: inline-block; padding: .2rem 1rem; cursor: pointer; bottom: 14rem; cursor: pointer; } /* #wheel-headlines li { transform: rotate(-90deg); } */ #wheel[data-howmany] #wheel-lines li { display: block; } #wheel[data-howmany="2"] #wheel-headlines li:nth-child(2) { bottom: -2rem; transform: rotate(180deg); } #wheel[data-howmany="2"] #wheel-headlines li:nth-child(n+2) span { transform: rotate(180deg); } #wheel[data-howmany="4"] #wheel-lines li:nth-child(2) { transform: rotate(90deg); } #wheel[data-howmany="4"] #wheel-lines li:nth-child(3) { display: block; } #wheel[data-howmany="4"] #wheel-headlines li:nth-child(1) { transform: rotate(-45deg); } #wheel[data-howmany="4"] #wheel-headlines li:nth-child(2) { transform: rotate(45deg); } #wheel[data-howmany="4"] #wheel-headlines li:nth-child(3) { transform: rotate(-135deg); } #wheel[data-howmany="4"] #wheel-headlines li:nth-child(4) { transform: rotate(-225deg); } #wheel[data-howmany="4"] #wheel-headlines li:nth-child(n+3) span { transform: rotate(180deg); } #wheel[data-howmany="3"] #wheel-lines { transform: rotate(30deg); } #wheel[data-howmany="3"] #wheel-lines li:nth-child(1) { transform: rotate(120deg); width: calc( 50% + 2px); transform-origin: calc(100% - 1px) 100%; margin-left: -1px; } #wheel[data-howmany="3"] #wheel-lines li:nth-child(2) { transform: rotate(240deg); width: 50%; transform-origin: calc(100%) calc( 100% - 1px); height: 1px; border-top: 1px solid #cfcfcf; height: 1px; border-bottom: 0; } #wheel[data-howmany="3"] #wheel-lines li:nth-child(3) { transform: rotate(0); display: block; width: 50%; margin-top: 1px; } #wheel[data-howmany="3"] #wheel-headlines li:nth-child(2) { transform: rotate(-120deg); } #wheel[data-howmany="3"] #wheel-headlines li:nth-child(3) { transform: rotate(120deg); } #wheel[data-howmany="3"] #wheel-headlines li:nth-child(n+2) span { transform: rotate(180deg); } #wheel[data-howmany="3"] #wheel-lines li:nth-child(4), #wheel[data-howmany="3"] #wheel-lines li:nth-child(5), #wheel[data-howmany="3"] #wheel-lines li:nth-child(7), #wheel[data-howmany="3"] #wheel-lines li:nth-child(6) { display: none; } #wheel[data-howmany="6"] #wheel-lines li:nth-child(2) { transform: rotate(60deg); } #wheel[data-howmany="6"] #wheel-lines li:nth-child(3) { transform: rotate(120deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(1) { transform: rotate(-60deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(3) { transform: rotate(60deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(4) { transform: rotate(-120deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(5) { transform: rotate(-180deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(6) { transform: rotate(-240deg); } #wheel[data-howmany="6"] #wheel-headlines li:nth-child(n+4) span { transform: rotate(180deg); } #wheel[data-howmany="8"] #wheel-lines li:nth-child(2) { transform: rotate(45deg); } #wheel[data-howmany="8"] #wheel-lines li:nth-child(3) { transform: rotate(90deg); } #wheel[data-howmany="8"] #wheel-lines li:nth-child(4) { transform: rotate(135deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(1) { transform: rotate(-67.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(2) { transform: rotate(-22.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(3) { transform: rotate(22.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(4) { transform: rotate(67.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(5) { transform: rotate(-112.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(6) { transform: rotate(-157.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(7) { transform: rotate(-202.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(8) { transform: rotate(-247.5deg); } #wheel[data-howmany="8"] #wheel-headlines li:nth-child(n+5) span { transform: rotate(180deg); } #wheel[data-howmany="10"] #wheel-lines li:nth-child(2) { transform: rotate(36deg); } #wheel[data-howmany="10"] #wheel-lines li:nth-child(3) { transform: rotate(72deg); } #wheel[data-howmany="10"] #wheel-lines li:nth-child(4) { transform: rotate(108deg); } #wheel[data-howmany="10"] #wheel-lines li:nth-child(5) { transform: rotate(144deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(1) { transform: rotate(-72deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(2) { transform: rotate(-36deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(3) { transform: rotate(0); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(4) { transform: rotate(36deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(5) { transform: rotate(72deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(6) { transform: rotate(-108deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(7) { transform: rotate(-144deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(8) { transform: rotate(180deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(9) { transform: rotate(144deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(10) { transform: rotate(108deg); } #wheel[data-howmany="10"] #wheel-headlines li:nth-child(n+6) span { transform: rotate(180deg); } #wheel[data-howmany="12"] #wheel-lines li:nth-child(2) { transform: rotate(30deg); } #wheel[data-howmany="12"] #wheel-lines li:nth-child(3) { transform: rotate(60deg); } #wheel[data-howmany="12"] #wheel-lines li:nth-child(4) { transform: rotate(90deg); } #wheel[data-howmany="12"] #wheel-lines li:nth-child(5) { transform: rotate(120deg); } #wheel[data-howmany="12"] #wheel-lines li:nth-child(6) { transform: rotate(150deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(1) { transform: rotate(-75deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(2) { transform: rotate(-45deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(3) { transform: rotate(-15deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(4) { transform: rotate(15deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(5) { transform: rotate(45deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(6) { transform: rotate(75deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(7) { transform: rotate(-105deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(8) { transform: rotate(-135deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(9) { transform: rotate(-165deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(10) { transform: rotate(165deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(11) { transform: rotate(135deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(12) { transform: rotate(105deg); } #wheel[data-howmany="12"] #wheel-headlines li:nth-child(n+7) span { transform: rotate(180deg); } #wheel[data-howmany="12"] > div:last-child { display: none!important; } #wheel[data-howmany="14"] #wheel-lines li:nth-child(2) { transform: rotate(calc(180deg/7));} #wheel[data-howmany="14"] #wheel-lines li:nth-child(3) { transform: rotate(calc(180deg/7*2));} #wheel[data-howmany="14"] #wheel-lines li:nth-child(4) { transform: rotate(calc(180deg/7*3));} #wheel[data-howmany="14"] #wheel-lines li:nth-child(5) { transform: rotate(calc(180deg/7*4));} #wheel[data-howmany="14"] #wheel-lines li:nth-child(6) { transform: rotate(calc(180deg/7*5));} #wheel[data-howmany="14"] #wheel-lines li:nth-child(7) { transform: rotate(calc(180deg/7*6));} #wheel[data-howmany="14"] #wheel-headlines li:nth-child(1) { transform: rotate(calc(-180deg/7*3)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(2) { transform: rotate(calc(-180deg/7*2)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(3) { transform: rotate(calc(-180deg/7)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(4) { } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(5) { transform: rotate(calc(180deg/7)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(6) { transform: rotate(calc(180deg/7*2)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(7) { transform: rotate(calc(180deg/7*3)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(8) { transform: rotate(calc(-180deg/7*4)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(9) { transform: rotate(calc(-180deg/7*5)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(10) { transform: rotate(calc(-180deg/7*6)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(11) { transform: rotate(calc(180deg)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(12) { transform: rotate(calc(-180deg/7*8)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(13) { transform: rotate(calc(-180deg/7*9)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(14) { transform: rotate(calc(-180deg/7*10)); } #wheel[data-howmany="14"] #wheel-headlines li:nth-child(n+8) span { transform: rotate(180deg); } #wheel[data-howmany="16"] #wheel-lines li:nth-child(2) { transform: rotate(calc(180deg/8));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(3) { transform: rotate(calc(180deg/8*2));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(4) { transform: rotate(calc(180deg/8*3));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(5) { transform: rotate(calc(180deg/8*4));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(6) { transform: rotate(calc(180deg/8*5));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(7) { transform: rotate(calc(180deg/8*6));} #wheel[data-howmany="16"] #wheel-lines li:nth-child(8) { transform: rotate(calc(180deg/8*7));} #wheel[data-howmany="16"] #wheel-headlines li:nth-child(1) { transform: rotate(calc(10deg + -180deg/8*4)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(2) { transform: rotate(calc(10deg + -180deg/8*3)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(3) { transform: rotate(calc(10deg + -180deg/8*2)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(4) { transform: rotate(calc(10deg + -180deg/8)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(5) { transform: rotate(calc(-10deg + 180deg/8)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(6) { transform: rotate(calc(-10deg + 180deg/8*2)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(7) { transform: rotate(calc(-10deg + 180deg/8*3)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(8) { transform: rotate(calc(-10deg + 180deg/8*4)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(9) { transform: rotate(calc(-10deg + -180deg/8*4)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(10) { transform: rotate(calc(-10deg + -180deg/8*5)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(11) { transform: rotate(calc(-10deg + -180deg/8*6)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(12) { transform: rotate(calc(-10deg + -180deg/8*7)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(13) { transform: rotate(calc(-10deg + -180deg/8*8)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(14) { transform: rotate(calc(-10deg + -180deg/8*9)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(15) { transform: rotate(calc(-10deg + -180deg/8*10)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(16) { transform: rotate(calc(-10deg + -180deg/8*11)); } #wheel[data-howmany="16"] #wheel-headlines li:nth-child(n+9) span { transform: rotate(180deg); } #wheel[data-howmany="18"] #wheel-lines li:nth-child(2) { transform: rotate(calc(180deg/10));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(3) { transform: rotate(calc(180deg/10*2));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(4) { transform: rotate(calc(180deg/10*3));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(5) { transform: rotate(calc(180deg/10*4));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(6) { transform: rotate(calc(180deg/10*5));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(7) { transform: rotate(calc(180deg/10*6));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(8) { transform: rotate(calc(180deg/10*7));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(9) { transform: rotate(calc(180deg/10*8));} #wheel[data-howmany="18"] #wheel-lines li:nth-child(10) { transform: rotate(calc(180deg/10*9));} #wheel[data-howmany="18"] #wheel-headlines li:nth-child(1) { transform: rotate(calc(8.2deg + -180deg/10*5)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(2) { transform: rotate(calc(8.5deg + -180deg/10*4)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(3) { transform: rotate(calc(8.5deg + -180deg/10*3)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(4) { transform: rotate(calc(8.5deg + -180deg/10*2)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(5) { transform: rotate(calc(8.5deg + -180deg/10)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(6) { transform: rotate(calc(-8.5deg + 180deg/10)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(7) { transform: rotate(calc(-8.5deg + 180deg/10*2)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(8) { transform: rotate(calc(-8.5deg + 180deg/10*3)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(9) { transform: rotate(calc(-8deg + 180deg/10*4)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(10) { transform: rotate(calc(-8deg + 180deg/10*5)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(11) { transform: rotate(calc(-10deg + -180deg/10*5)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(12) { transform: rotate(calc(-9deg + -180deg/10*6)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(13) { transform: rotate(calc(-9deg + -180deg/10*7)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(14) { transform: rotate(calc(-9deg + -180deg/10*8)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(15) { transform: rotate(calc(-9deg + -180deg/10*9)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(16) { transform: rotate(calc(-9deg + -180deg/10*10)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(17) { transform: rotate(calc(-9deg + -180deg/10*11)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(18) { transform: rotate(calc(-8deg + -180deg/10*12)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(19) { transform: rotate(calc(-8deg + -180deg/10*13)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(20) { transform: rotate(calc(-7.9deg + -180deg/10*14)); } #wheel[data-howmany="18"] #wheel-headlines li:nth-child(n+11) span { transform: rotate(180deg); } #wheel[data-howmany="20"] #wheel-lines li:nth-child(2) { transform: rotate(calc(180deg/10));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(3) { transform: rotate(calc(180deg/10*2));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(4) { transform: rotate(calc(180deg/10*3));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(5) { transform: rotate(calc(180deg/10*4));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(6) { transform: rotate(calc(180deg/10*5));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(7) { transform: rotate(calc(180deg/10*6));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(8) { transform: rotate(calc(180deg/10*7));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(9) { transform: rotate(calc(180deg/10*8));} #wheel[data-howmany="20"] #wheel-lines li:nth-child(10) { transform: rotate(calc(180deg/10*9));} #wheel[data-howmany="20"] #wheel-headlines li:nth-child(1) { transform: rotate(calc(8.2deg + -180deg/10*5)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(2) { transform: rotate(calc(8.5deg + -180deg/10*4)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(3) { transform: rotate(calc(8.5deg + -180deg/10*3)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(4) { transform: rotate(calc(8.5deg + -180deg/10*2)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(5) { transform: rotate(calc(8.5deg + -180deg/10)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(6) { transform: rotate(calc(-8.5deg + 180deg/10)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(7) { transform: rotate(calc(-8.5deg + 180deg/10*2)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(8) { transform: rotate(calc(-8.5deg + 180deg/10*3)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(9) { transform: rotate(calc(-8deg + 180deg/10*4)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(10) { transform: rotate(calc(-8deg + 180deg/10*5)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(11) { transform: rotate(calc(-10deg + -180deg/10*5)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(12) { transform: rotate(calc(-9deg + -180deg/10*6)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(13) { transform: rotate(calc(-9deg + -180deg/10*7)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(14) { transform: rotate(calc(-9deg + -180deg/10*8)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(15) { transform: rotate(calc(-9deg + -180deg/10*9)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(16) { transform: rotate(calc(-9deg + -180deg/10*10)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(17) { transform: rotate(calc(-9deg + -180deg/10*11)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(18) { transform: rotate(calc(-8deg + -180deg/10*12)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(19) { transform: rotate(calc(-8deg + -180deg/10*13)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(20) { transform: rotate(calc(-7.9deg + -180deg/10*14)); } #wheel[data-howmany="20"] #wheel-headlines li:nth-child(n+11) span { transform: rotate(180deg); } #wheel[data-howmany="12"] > div:last-child, #wheel[data-howmany="14"] > div:last-child, #wheel[data-howmany="20"] > div:last-child, #wheel[data-howmany="16"] > div:last-child, #wheel[data-howmany="18"] > div:last-child { display: none!important; } #wheel[data-howmany="20"] > div:nth-last-child(2) { background: #fff; } #wheel[data-howmany="12"] > div:nth-of-type(8), #wheel[data-howmany="14"] > div:nth-of-type(8), #wheel[data-howmany="16"] > div:nth-of-type(8), #wheel[data-howmany="18"] > div:nth-of-type(8) { width: 16%; height: 16%; top: 42%; left: 42%; } #wheel[data-howmany="12"] > div:nth-of-type(7), #wheel[data-howmany="14"] > div:nth-of-type(7), #wheel[data-howmany="16"] > div:nth-of-type(7), #wheel[data-howmany="18"] > div:nth-of-type(7) { width: 28%; height: 28%; top: 36%; left: 36%; } } @media not print { @media (max-width: 799px), (max-device-width: 799px) { #wheel-container { border-top: 2rem solid #fff; background: #fff; position: relative; z-index: 200; } #wheel-lines { display: none; } #wheel { display: flex; } #wheel-headlines { margin: 0 auto 3rem; padding: 0 2rem; } #wheel-headlines ul { text-align: left; } #wheel-headlines li { font-size: 2rem; list-style: none; margin-bottom: 10px; padding-right: 4px;} } } @media print { #wheel { width: 521px; height: 521px; } #wheel-lines li { top: calc((521px - 1px)/2); width: 100%!important; } #focus-items-input-container { display: none!important; } } body[data-howmany="enough"] #focus-items-input-container { display: none!important; }