main.min.css

@keyframes square1{100%{transform:rotate(360deg)}}@keyframes square2{0%{transform:rotate(0deg)}13%{transform:rotate(45deg)}25%{transform:rotate(90deg)}38%{transform:rotate(135deg)}50%{transform:rotate(180deg)}63%{transform:rotate(225deg)}75%{transform:rotate(270deg)}88%{transform:rotate(315deg)}100%{transform:rotate(360deg)}}@keyframes square3{100%{transform:rotate(-360deg)}}@keyframes square4{100%{transform:scale(3.2)}}@keyframes square5{100%{transform:scale(3.2)}}@keyframes square6{100%{transform:scale(3.2)}}@keyframes square7{50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@keyframes square8{50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@keyframes square9{100%{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background-color:#2b2a2d;display:flex;flex-direction:column;justify-content:space-between;font-family:'Montserrat', sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.square{min-width:300px;height:300px;display:flex;flex-direction:column;position:relative;margin-left:calc((100vw - 300px) / 2);margin-right:calc((100vw - 300px) / 2);overflow:hidden;padding:2rem;border:1px solid #ffc39c}.square .row-even .col-even .triangle{clip-path:polygon(50% 100%, 0% 0%, 100% 0%) !important}.square .row-even .col:not(.col-even) .triangle{clip-path:polygon(50% 0%, 0% 100%, 100% 100%) !important}.square .row:not(.row-even) .col-even .triangle{clip-path:polygon(50% 0%, 0% 100%, 100% 100%) !important}.square .row:not(.row-even) .col:not(.col-even) .triangle{clip-path:polygon(50% 100%, 0% 0%, 100% 0%) !important}.square .row{display:flex;justify-content:center}.square .row .col{display:flex;flex-direction:column;justify-content:center;align-items:center}.square .row .col .circle{background-color:#ffc39c;height:20%;width:20%;border-radius:50%;animation-direction:alternate}.square .row .col .triangle{background-color:#ffc39c;height:70%;width:70%;clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}.square .row .col .spinny{background-color:#ffc39c;width:7%;height:100%;border-radius:50px}.disabled{visibility:hidden}#viewbox{width:100%;height:80%;overflow-x:hidden}#viewbox #slider{display:flex;align-items:center;width:auto;height:100%;transition:margin-left .5s ease}#controls{width:100%;flex-grow:1;display:flex;justify-content:space-between}#controls #leftarrow,#controls #rightarrow{color:#ffc39c;display:inline-block;font-size:3.5rem;font-weight:normal;cursor:pointer}#controls #leftarrow{margin-left:3rem}#controls #rightarrow{margin-right:3rem}#square1 .spinny{animation:square1 4s linear infinite}#square2 .spinny{animation:square2 4s ease-in-out infinite}#square2 .col-even .spinny{width:100% !important;height:7% !important}#square3 .spinny{animation:square3 4s ease-in-out infinite}#square4 .circle{animation:square4 2s ease infinite alternate}#square5 .circle{animation:square5 2s linear infinite alternate}#square6 .circle{animation:square6 1s linear infinite alternate}#square7 .triangle{animation:square7 4s ease-in-out infinite}#square8 .col-even .triangle{animation:square8 3s ease-in-out infinite alternate}#square8 .col:not(.col-even) .triangle{animation:square8 3s ease-in-out infinite alternate-reverse}#square9 .triangle{animation:square9 3s ease infinite alternate}@media (min-width: 576px){.square{min-width:220px;height:220px;margin-left:calc((100vw - 220px) / 2);margin-right:calc((100vw - 220px) / 2)}#viewbox{height:70%}#controls{align-items:center}}@media (min-width: 768px){.square{min-width:600px;height:600px;margin-left:calc((100vw - 600px) / 2);margin-right:calc((100vw - 600px) / 2)}#controls #leftarrow,#controls #rightarrow{font-size:7rem}#controls #leftarrow{margin-left:10rem}#controls #rightarrow{margin-right:10rem}}@media (min-width: 992px){.square{min-width:450px;height:450px;margin-left:calc((100vw - 450px) / 2);margin-right:calc((100vw - 450px) / 2)}#controls{justify-content:center}#controls #leftarrow{margin-right:10rem}#controls #rightarrow{margin-left:10rem}}@media (min-width: 1200px){.square{min-width:400px;height:400px;margin-left:calc((100vw - 400px) / 2);margin-right:calc((100vw - 400px) / 2)}#controls{align-items:flex-start}#controls #leftarrow,#controls #rightarrow{font-size:5rem}#controls #leftarrow{margin-right:7rem}#controls #rightarrow{margin-left:7rem}}