*{padding:0;margin:0;box-sizing:border-box;position:relative}body{font-family:Raleway,sans-serif;background:#f0f0f0;color:#333}body.play{background:#444}.container{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;max-width:1300px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:auto}.container .main{width:75%}.container .main.blogs{width:100%}.container .main.blogs h2{padding-bottom:20px;font-weight:500;text-transform:uppercase;font-size:20px;color:#333}.container .main.blogs a{font-size:18px;display:block}.container .panel{width:24%}.container .section{width:100%;background:#fff;padding:20px;box-shadow:0 0 5px 0 rgba(0,0,0,.25)}.container .section:not(:last-child){margin-bottom:20px}.container .section h3{text-transform:uppercase;font-size:16px;font-weight:700;padding-bottom:20px}.container .section p{font-size:16px;line-height:28px;font-weight:500}.container .section a{color:#333}.container .section img{display:block;max-width:100%}.container .section img.fullscreen{width:100%}.container .section .code-snippet{background:#f0f0f0;border:1px solid #ddd;border-radius:3px;padding:3px;text-decoration:none;color:#333;white-space:nowrap}.container .section .code-block{width:100%;background:#f0f0f0;color:#333;border-radius:3px;border:1px solid #ddd;font-family:monospace;padding:10px}.container .section.play p a{display:inline;font-size:16px;line-height:28px}.container .section.play .game-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.container .section.play .game-container .game,.container .section.title>div{display:-webkit-box;display:-ms-flexbox;-webkit-box-orient:vertical;-webkit-box-direction:normal}.container .section.play .game-container .game{width:200px;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-decoration:none}.container .section.play .game-container .game img{width:70%;margin:0 auto}.container .section.play .game-container .game img.circle-status{-webkit-animation:shake 2s ease-in-out infinite;animation:shake 2s ease-in-out infinite}.container .section.play .game-container .game img.wheres-balldo{-webkit-animation:shake 2s ease-in-out .5s infinite;animation:shake 2s ease-in-out .5s infinite}.container .section.play .game-container .game img.four-factors{-webkit-animation:shake 2s ease-in-out 1s infinite;animation:shake 2s ease-in-out 1s infinite}.container .section.play .game-container .game h3{text-align:center;padding:20px 0}.container .section.play .game-container .game p{text-align:center}.container .section.title img{width:100%}.container .section.title img.small{max-width:507px;margin:auto}.container .section.title .overlay{position:absolute;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px);background:rgba(0,0,0,.5)}.container .section.title>div{position:absolute;width:100%;height:100%;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;text-align:center;top:0;left:0;color:#fff;text-transform:uppercase}.container .section.title>div h1{font-weight:600;padding-bottom:20px;font-size:50px}.container .section.title>div h2{font-weight:400;font-size:20px}.container .section.title>div .buttons{display:-webkit-box;display:-ms-flexbox;display:flex}.container .section.title>div .buttons a{width:150px;height:45px;background:#fff;border-radius:5px;padding:10px 0;margin:0 20px;box-shadow:0 0 5px 0 rgba(0,0,0,.25)}.container .section.title>div .buttons a img{height:100%;width:auto;margin:auto}.container .section.creating-the-polygons .equation{max-height:45px}.container .section.creating-the-polygons .equation-diagram{height:100px}.container .section.powerups .magnet-animation{max-width:250px}.container .section.published p{font-style:italic}.container .section.about{position:-webkit-sticky;position:sticky;top:20px}.container .section.about img{width:100%}.container .section.about i{padding-right:5px}@media screen and (max-width:900px){.container{display:block}.container .main{width:100%}.container .panel{width:100%;margin-top:20px}.container .panel .section.about{position:relative;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.container .panel .section.about img{width:30%;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.container .panel .section.about>div{width:65%}.container .panel .section.about br:first-child{display:none}}@media screen and (max-width:650px){.container .section p,.container .section.play p a{font-size:12px;line-height:22px}.container .section h3{font-size:12px}.container .section.play p a{display:inline}.container .section.play .game-container{display:block}.container .section.play .game-container .game{margin:auto;width:100%;box-shadow:0 0 5px 0 rgba(0,0,0,.25);padding:15px;background:#444;color:#fff}.container .section.play .game-container .game img{width:30%}.container .section.title>div h1{font-size:25px;padding-bottom:10px}.container .section.title>div h2{font-size:12px;padding:0 20px}.container .section.title>div .buttons a{width:100px;height:35px}.container .panel .section.about img{display:none}.container .panel .section.about>div{width:100%}}@-webkit-keyframes shake{40%,5%{-webkit-transform:rotate(0);transform:rotate(0)}10%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}15%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}20%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}25%{-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}30%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}35%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}}@keyframes shake{40%,5%{-webkit-transform:rotate(0);transform:rotate(0)}10%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}15%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}20%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}25%{-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}30%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}35%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}}