<header> <label for="rem-size">root font size:</label> <input id="rem-size" type="number" min="10" max="300" value="100"/></header><div class="hexagon four rounded"></div>xxxxxxxxxx*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box;}body { color: white; background-color: hsl(0, 0%, 12%); padding: 20px;}header { font-size: 16px; padding: 5px;}.hexagon { position: relative; display: inline-block; margin: 0 .5rem; width: 1rem; height: calc(1rem * 1.732); background-color: hsl(0, 75%, 50%);}.hexagon::before { width: inherit; height: inherit; background-color: inherit; content: ""; position: absolute; left: 0; transform: rotate(-60deg);}.hexagon::after { width: inherit; height: inherit; background-color: inherit; content: ""; position: absolute; left: 0; transform: rotate(60deg);}.four { background-color: hsl(180, 75%, 50%); width: 4rem; height: calc(4rem * 1.732); margin: 0 2rem;}.rounded, .rounded::before, .rounded::after { border-radius: .75rem/.25rem;}@keyframes selfRotate{ 0%{ transform: rotate(0) } 50%{ transform: rotate(180deg) } 100{ transform:rotate(360deg) }}xxxxxxxxxx$('#rem-size').on("input", function() { $('html').css({'font-size': $('#rem-size').val() + 'px'});});