html{font-family:Palatino, serif;font-size:20px;line-height:1.65;font-weight:300;overflow:hidden}body{padding:0;margin:0;overflow:hidden;background-color:#555555}body.is-end{background-color:#fff}h1,h2,h3,h4,h5,h6{font-weight:400}a{text-transform:capitalize;color:white;font-size:20px}.cap{text-transform:capitalize}.wrapper{position:relative;overflow:hidden;height:100vh;width:100vw;margin:auto;text-align:center}.wrapper p{width:400px;margin:auto}.state{position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;display:none;overflow:hidden}.state:target{display:block}.state--levelselect ul,.state--winwin ul{list-style-type:none;padding:0;width:400px;margin:auto}.state--levelselect li,.state--winwin li{position:relative;width:200px;height:200px;float:left}.state--levelselect a,.state--winwin a{text-decoration:none;text-transform:uppercase}.level{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:5em;height:5em;padding:1em;border-radius:50%;line-height:5;transition:background-color 200ms ease}.level:hover{color:#555555}.level.is-done{pointer-events:none;border-width:1px;-webkit-animation:glowing 1500ms infinite;-moz-animation:glowing 1500ms infinite;animation:glowing 1500ms infinite}.level--fire{border:solid 3px #b15050;color:#b15050}.level--fire:hover,.level--fire.is-done,.state--winwin .level--fire{background-color:#b15050}.level--water{border:solid 3px #5177cd;color:#5177cd}.level--water:hover,.level--water.is-done,.state--winwin .level--water{background-color:#5177cd}.level--air{border:solid 3px #f0e292;color:#f0e292}.level--air:hover,.level--air.is-done,.state--winwin .level--air{background-color:#f0e292}.level--earth{border:solid 3px #3a7956;color:#3a7956}.level--earth:hover,.level--earth.is-done,.state--winwin .level--earth{background-color:#3a7956}.how-to{animation:fadeInOut 4s 1;position:absolute;top:360px;left:0;right:0;height:12vh;padding:1em;background:#555;text-align:center;opacity:0;z-index:-1}.how-to strong{font-size:24px;font-weight:600}.quinta{position:absolute;top:-50%;bottom:0;left:0;right:0;margin:auto;width:10em;height:10em;background-color:white;border-radius:50%;transition:transform ease 2000ms}.quinta h1{display:none}.state--winwin{pointer-events:none;border-width:1px}canvas{margin-top:2em}.score{position:absolute;top:0;width:100%;text-align:center;font-size:24px}.score i{display:inline-block;width:15px;height:15px;background-color:pink}.is-won .level{-webkit-animation:expanding 5s 1;-moz-animation:expanding 5s 1;animation:expanding 5s 1}.is-won .quinta{-webkit-animation:quinta 5s 1;-moz-animation:quinta 5s 1;animation:quinta 5s 1}.is-end .level{display:none}.start-btn{display:block;margin:auto;width:2em;height:2em;text-indent:-999%;overflow:hidden;padding:1em;border-radius:50%;background-image:url(../images/alchemist.png);background-repeat:no-repeat;background-position:center;background-color:#555555;transition:background-color 400ms ease}.start-btn:hover{background-color:#fff}@-webkit-keyframes glowing{0%{box-shadow:0 0 1px 1px;opacity:0.5}50%{box-shadow:0 0 10px 10px;opacity:1}100%{box-shadow:0 0 1px 1px;opacity:0.5}}@-moz-keyframes glowing{0%{box-shadow:0 0 1px 1px;opacity:0.5}50%{box-shadow:0 0 10px 10px;opacity:1}100%{box-shadow:0 0 1px 1px;opacity:0.5}}@keyframes glowing{0%{box-shadow:0 0 1px 1px;opacity:0.5}50%{box-shadow:0 0 10px 10px;opacity:1}100%{box-shadow:0 0 1px 1px;opacity:0.5}}@-webkit-keyframes expanding{0%{box-shadow:0 0 1px 1px;opacity:0.5}10%{box-shadow:0 0 10px 10px;opacity:1}20%{box-shadow:0 0 1px 1px;opacity:0.5}30%{box-shadow:0 0 10px 10px;opacity:1}40%{box-shadow:0 0 1px 1px;opacity:0.5;transform:scale(1)}60%{opacity:1}80%{transform:scale(3);opacity:0}100%{opacity:0}}@-moz-keyframes expanding{0%{box-shadow:0 0 1px 1px;opacity:0.5}10%{box-shadow:0 0 10px 10px;opacity:1}20%{box-shadow:0 0 1px 1px;opacity:0.5}30%{box-shadow:0 0 10px 10px;opacity:1}40%{box-shadow:0 0 1px 1px;opacity:0.5;transform:scale(1)}60%{opacity:1}80%{transform:scale(3);opacity:0}100%{opacity:0}}@keyframes expanding{0%{box-shadow:0 0 1px 1px;opacity:0.5}10%{box-shadow:0 0 10px 10px;opacity:1}20%{box-shadow:0 0 1px 1px;opacity:0.5}30%{box-shadow:0 0 10px 10px;opacity:1}40%{box-shadow:0 0 1px 1px;opacity:0.5;transform:scale(1)}60%{opacity:1}80%{transform:scale(3);opacity:0}100%{opacity:0}}@-webkit-keyframes quinta{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}80%{opacity:1}100%{transform:scale(5)}}@-moz-keyframes quinta{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}80%{opacity:1}100%{transform:scale(5)}}@keyframes quinta{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}70%{opacity:1}100%{transform:scale(5)}}@-webkit-keyframes fadeInOut{0%{z-index:99;opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}@-moz-keyframes fadeInOut{0%{z-index:99;opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}@keyframes fadeInOut{0%{z-index:99;opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}