*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}html{font-size:62.5%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:cursive;font-size:1.4rem}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App-logo{height:10vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 15s linear infinite;animation:App-logo-spin 15s linear infinite}}@media screen and (min-width:768px){.form-group{grid-template-columns:40% 60%}.label{margin-bottom:0}.container{grid-template-columns:25% 75%}}.App-header{background-color:#333;min-height:17.5vh;display:flex;align-items:center;justify-content:flex-end;font-size:1.6rem;color:#fff;padding-left:15px;padding-right:15px}.container{display:grid;height:100vh;max-width:100vw;width:100%}.playground{margin:0 10px 0 20px;padding:15px;border-left:1.5px solid #999;box-shadow:inset -2.5px 0 20px #ccc}.label{color:#282c34;font-weight:600;font-size:1.4rem;margin:5px}.form-input{padding:10px 20px;width:100%}.form-input,.form-input__colour{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #999;border-radius:5px}.form-input__colour{display:block;padding:5px}.form-group{display:grid;align-items:center;margin:15px}.form-button:disabled{background:rgba(197,116,255,.5);box-shadow:none;color:hsla(0,0%,100%,.5);cursor:not-allowed}.form-button:active{box-shadow:none}.form-button:focus,.form-button:hover{cursor:pointer;color:rgba(0,0,0,.5)}.form-button{background:#c574ff;box-shadow:0 3px 10px 0 #a570ca;grid-column:span 2;color:#fff;font-size:1.4rem;font-weight:700;padding:1.5rem 2.5rem;border-radius:5px;transition-property:box-shadow;transition-duration:.3s;transition-timing-function:ease-in;transform-origin:top}.outline{stroke-dasharray:25px;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.5;stroke:red}.error{color:red;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}svg{display:inline-block;max-width:25%;height:150px;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.circle,.ellipse,.star{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-play-state:running;animation-play-state:running;transform-origin:center}.circle,.ellipse,.rect,.square,.star,.triangle{-webkit-animation-name:fade-in;animation-name:fade-in}.rect,.square,.triangle{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes fade-in{0%,30%{transform:scale(.25);fill:none}to{transform:scale(1)}}@keyframes fade-in{0%,30%{transform:scale(.25);fill:none}to{transform:scale(1)}}@-webkit-keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.e6a63fd0.chunk.css.map */