:root{box-sizing:border-box;font-size:calc(.5em + 1vw)}*,:before,:after{box-sizing:inherit}body{height:100vh}.header{margin:15px 0 0;font-family:sans-serif}.header-title{color:#4aecaa}.controller{display:flex;align-items:center;list-style-type:none;padding-left:0}.controller li{display:inline-block;margin:.5em}.controller li>*{width:6em;font-size:1.5rem;padding:.5rem 1.5rem;border:2px solid #4aecaa;border-radius:.5em;font-weight:300}.controller li button{background-color:rgba(255,255,255,.6);outline:none;cursor:pointer}.controller li button:hover{transform:scale(1.05)}.controller li input{text-align:left;width:6em}.controller .slider-wrapper{padding:0 .5em}.controller .slider-wrapper input[type=range]{-webkit-appearance:none;background:#1d9aee;width:100%;height:8px;outline:none !important;appearance:none;border:none;border-radius:30px}.controller .slider-wrapper input[type=range]::-moz-focus-outer{border:0}.controller .slider-wrapper input[type=range]:hover{outline:none}.controller .slider-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;background:#1d9aee;cursor:pointer;border-radius:30px;outline:none}.controller .slider-wrapper input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#1d9aee;cursor:pointer;border-radius:50%;border:none;outline:none}.controller .slider-wrapper input[type=range]::-moz-range-progress{background-color:#1d9aee;height:100%;border-radius:30px;border:none}.controller .slider-wrapper input[type=range]::-moz-range-track{background-color:#1d9aee;border-radius:30px;border:none;height:100%}.controller .slider-wrapper input[type=range]::-ms-fill-lower{background-color:#1d9aee;height:100%;border-radius:30px;border:none}.controller .slider-wrapper input[type=range]::-ms-fill-upper{background-color:#1d9aee;border-radius:1.5em;border:none;height:100%}.controller .slider-wrapper .tooltip{position:relative;padding:1.5rem 0;border:none}.controller .slider-wrapper .tooltip .tooltiptext{visibility:hidden;width:30%;font-size:.8em;color:#5d5c5c;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;top:-5px;left:35%}.controller .slider-wrapper .tooltip .tooltiptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#4aecaa transparent transparent transparent}.controller .slider-wrapper .tooltip:hover .tooltiptext{border:1px solid #4aecaa;visibility:visible}.main{display:flex;justify-content:flex-start;width:100%}.gamefield{height:100%;padding:0;margin:0 auto}.gamefield tbody{display:flex;flex-direction:column;padding:0;background-color:#9d8061;height:100%;margin-bottom:5px}.gamefield tr{display:flex;height:calc(.5em + 1.8vh);text-align:center}@supports(display: flex){.gamefield tr{height:auto}}.c{border:2px solid rgba(25,25,25,.8);border-radius:45%;background-color:#917155;min-width:calc(.5em + 1.8vh);min-height:calc(.5em + 1.8vh);width:calc(.5em + 1.8vh);height:calc(.5em + 1.8vh);opacity:.8;overflow:hidden;margin:0;padding:0;position:relative;transition:opacity .1s ease,transform .15s ease-out}.c:not(:target){height:100%}@supports(display: flex){.c.c{height:auto}}.c:before{background:#1e1e1e;border-radius:50%;content:"";display:block;height:30%;left:50%;opacity:.6;position:absolute;transform:translate(-55%, -45%);top:50%;width:30%}.c:hover{opacity:1}.c.alive{background:#7ad37a}.c.alive:hover{transform:scaleX(0.9) scaleY(0.6);animation:wiggleCell .8s infinite;will-change:opacity}.c.new-dead{background:#720707}.c.new-alive{background:#e0d3bf}.c1{transform:scale(0.95) skewX(-4deg)}.c1:before{height:40%;opacity:.5;transform:translate(-40%, -30%);width:30%}.c2{transform:scale(0.88)}.c2:before{height:20%;opacity:.8;transform:translate(-70%, -30%);width:30%}.c3{transform:scale(0.95) skewY(2deg)}.c3:before{height:50%;opacity:.4;transform:skewY(10deg) translate(-20%, -70%);width:40%}.c4{transform:scale(0.9) skewX(3deg)}.c4:before{height:35%;opacity:.5;transform:translate(-15%, -55%);width:45%}.c5:before{height:40%;transform:skewX(5deg) translate(-60%, -24%);width:50%}@keyframes wiggleCell{0%{transform:scale(1) rotate(0)}20%{transform:scale(0.95) rotate(4deg)}40%{transform:scale(0.97) rotate(-8deg)}60%{transform:scale(0.99) rotate(2deg)}80%{transform:scale(0.94) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}