html,body{height:100%;margin:0}.button{padding:1em 2em;border:none;border-radius:5px;font-weight:bold;letter-spacing:5px;text-transform:uppercase;cursor:pointer;color:#2c9caf;-webkit-transition:all 1000ms;transition:all 1000ms;font-size:15px;position:relative;overflow:hidden;outline:2px solid #2c9caf}button:hover{color:#fff;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);outline:2px solid #70bdca;-webkit-box-shadow:4px 5px 17px -4px #268391;box-shadow:4px 5px 17px -4px #268391}button::before{content:"";position:absolute;left:-50px;top:0;width:0;height:100%;background-color:#2c9caf;-webkit-transform:skewX(45deg);-ms-transform:skewX(45deg);transform:skewX(45deg);z-index:-1;-webkit-transition:width 1000ms;transition:width 1000ms}button:hover::before{width:250%}body{margin:0;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:linear-gradient(135deg, #23294a, #23294a);font-family:"Comic Relief",sans-serif;overflow:hidden}.intro-container{text-align:center;color:#fff;z-index:10;position:relative}.title{font-size:3rem;margin-bottom:.5rem;letter-spacing:2px}.subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.start-btn{background:#fff;color:#2193b0;border:none;padding:15px 40px;font-size:1.1rem;border-radius:50px;cursor:pointer;-webkit-transition:background .3s,-webkit-transform .2s;transition:background .3s,-webkit-transform .2s;transition:transform .2s,background .3s;transition:transform .2s,background .3s,-webkit-transform .2s}.start-btn:hover{background:#e6f7ff;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.transition-circle{position:fixed;width:100px;height:100px;background:conic-gradient(from 0deg, rgba(255, 0, 200, 0.4), rgba(0, 255, 255, 0.4), rgba(255, 255, 0, 0.4), rgba(255, 0, 200, 0.4));border-radius:50%;top:50%;left:50%;-webkit-transform:translate(-50%, 0%) scale(0);-ms-transform:translate(-50%, 0%) scale(0);transform:translate(-50%, 0%) scale(0);z-index:9;-webkit-transition:-webkit-transform 1s ease-in-out;transition:-webkit-transform 1s ease-in-out;transition:transform 1s ease-in-out;transition:transform 1s ease-in-out, -webkit-transform 1s ease-in-out}.transition-circle.active{-webkit-transform:translate(-50%, 0%) scale(25);-ms-transform:translate(-50%, 0%) scale(25);transform:translate(-50%, 0%) scale(25)}