#main>div,.a{float:left}#cen,button,input{text-align:center}*{margin:0;padding:0}body{background:-webkit-linear-gradient(#8860D0,#5680E9,#5AB9EA);background:-o-linear-gradient(#8860D0,#5680E9,#5AB9EA);background:-moz-linear-gradient(#8860D0,#5680E9,#5AB9EA);background:linear-gradient(#8860D0,#5680E9,#5AB9EA)}button{border:none;padding:8px 16px;text-decoration:none;display:inline-block;box-shadow:3px 3px 4px #000;cursor:pointer;background-color:#e7e7e7;color:#000;transition:transform,box-shadow 3s linear;margin:5px}input{width:35px;height:30px;margin:8px 0;box-sizing:border-box;border:3px solid #ccc;-webkit-transition:.5s;transition:.5s;outline:0}input:focus{border:3px solid #555}button:hover{transform:scale(.95);box-shadow:1px 1px 1px #000}html{height:100vh;width:100vw}#main{margin:5vh auto auto;width:90vmin;height:90vmin;background-color:#00f;border:.3vmin solid #000}.a{width:6vmin;height:6vmin;position:static;overflow:hidden}.class>div{position:absolute}#top>.a:nth-child(even){background-color:green}#bottom>.a:nth-child(odd){background-color:#00f}#left>.diff+div>.a:nth-child(odd),#left>.diff>.a:nth-child(even){background-color:red}#right>.diff+div>.a:nth-child(even),#right>.diff>.a:nth-child(odd){background-color:#ff0}#ne>div>div>div,#nw>div>div>div,#se>div>div>div,#sw>div>div>div,.circle{box-sizing:border-box;text-align:center;padding:.5vmin;font-size:2.5vmin;margin:20% auto auto;background-color:#000;border-radius:50%;height:60%;width:60%;box-shadow:2px 2px 4px #000;border:2px solid #000}#ne,#ne>div,#nw,#nw>div,#se,#se>div,#sw,#sw>div{border:.3vmin solid #000;box-sizing:border-box}#ne,#nw,#se,#sw{width:36vmin;height:36vmin}#ne>div>div>div,#nw>div>div>div,#se>div>div>div,#sw>div>div>div{margin-top:12%}#ne>div>div,#nw>div>div,#se>div>div,#sw>div>div{float:left;width:6.5vmin;height:6.5vmin;margin:3.6vmin}#sw,#sw>div>div,#sw>div>div>div{background-color:red}#nw,#nw>div>div,#nw>div>div>div{background-color:green}#se,#se>div>div,#se>div>div>div{background-color:#00f}#ne,#ne>div>div,#ne>div>div>div{background-color:#ff0}#cen{width:18vmin;height:18vmin;background:#fff;line-height:18vmin;box-sizing:border-box;padding:7vmin 0;font:italic 700 4vmin serif;background-size:cover}#bottom,#top{width:18vmin;height:36vmin;background-color:#fff}#left,#right{height:18vmin;width:36vmin;background-color:#fff}