body{margin:0;padding:0;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;background-color:#f1f1ff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-container>footer{margin-top:auto}.app-header{padding:4rem 0;position:relative}.app-header>h1{font-weight:900;font-size:3.2rem;margin:0 2rem;line-height:1.375;text-align:center;color:#4c3adc}.app-repository{position:absolute;top:2rem;right:2rem;display:block}.app-repository>svg{height:3rem;width:3rem;fill:#4c4777}.container>*{width:calc(100% - 4rem);max-width:48rem;margin-left:auto;margin-right:auto}.canvas-container{max-width:84rem;display:flex;flex-flow:row wrap}.canvas-hint{position:absolute;z-index:99;top:50%;left:50%;transform:translate3d(-50%,-50%,0);font-weight:bolder;display:block;font-size:1.5rem;color:#43498e;text-align:center}.canvas{background-color:#fff;width:calc(50% - 4rem);height:32rem;border-radius:2rem;margin:0 1rem 2rem;border:1px solid #f1f1f1;box-shadow:0 18px 26px -20px #00000039;overflow:hidden;transition:opacity 325ms cubic-bezier(.215,.61,.355,1)}.canvas:last-of-type:hover{opacity:.75}.controls{display:flex;align-items:center;flex-flow:row wrap}.control>figcaption{font-weight:bolder;color:#295e7e;margin-bottom:1.5rem}.control>ul{list-style:none;display:flex;padding:0}.control>ul>li{width:3rem;height:4rem;margin-right:1rem}button{display:block;border-radius:1rem;border:0;padding:0;margin:0}.control>ul>li>button{height:100%;width:100%;box-shadow:none;outline:0;opacity:.775;transition:background-color 225ms cubic-bezier(.215,.61,.355,1),transform 225ms cubic-bezier(.175,.885,.32,1.275),box-shadow 225ms cubic-bezier(.215,.61,.355,1),opacity 175ms cubic-bezier(.215,.61,.355,1)}.control>ul>li>button.active{box-shadow:0 8px 18px -12px #0000006c;transform:translate3d(0,-4px,0) scale(1.25);opacity:1}.size-button{display:flex;align-items:center;justify-content:center;background-color:#a19efa}.size-button.active{background-color:#8a86f9}.size-button>div{border-radius:50%;background-color:#fff}.reset-button{background-color:#6d53fd;color:#fff;padding:1.25rem 2rem;font-weight:bolder;letter-spacing:.125em;margin-top:3.5rem;box-shadow:0 10px 14px -10px #00000040}.app-footer{display:flex;justify-content:center;padding:2rem 0;font-weight:bolder;color:#295e7e}.app-footer>p{margin:0}.app-footer>p>a{color:currentColor}.app-footer>p>span{margin:0 .5em}@media(max-width:42em){.app-header{padding:4rem 0 2rem}.app-header>h1{font-size:2.25rem}.app-repository{top:1rem;right:1rem}.container>*{width:calc(100% - 2rem)}.canvas{width:100%;height:24rem;margin:0 0 2rem}.controls>div{margin:0 auto}.controls{margin-bottom:4rem}.reset-button{margin-top:2.5rem}}