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