button,.filebtn{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none;outline:none;border:none;background:#fff;border:2px solid var(--light-content);color:var(--light-content);border-radius:3px;padding:.25em .75em;font-weight:700;font-size:.875em;transition:background .1s ease,color .1s ease}button:enabled:hover,.filebtn:hover{background:var(--main-accent);border:2px solid var(--main-accent);color:#fff}button:enabled:active,.filebtn:active{transform:scale(.95)}button:disabled{opacity:.8;background:var(--disabled);color:var(--light-content);border:2px solid var(--disabled)}.filebtn>input{display:none}button>svg{width:24px}button:disabled>svg{fill:var(--light-content)}button:enabled:hover>svg{fill:#fff}.toggle{display:flex;align-items:center}.toggle>input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:18px;display:inline-block;position:relative;border-radius:50px;outline:none;border:none;cursor:pointer;background-color:var(--dark-content);transition:background color ease .3s;margin-right:4px}.toggle>input:before{content:"";display:block;position:absolute;z-index:2;width:14px;height:14px;background:#fff;left:2px;top:2px;border-radius:50%;transition:all cubic-bezier(.3,1.5,.7,1) .3s}.toggle>input:checked{background-color:var(--main-accent)}.toggle>input:checked:before{left:16px}.toggle>label{color:var(--dark-content);font-size:1em;font-weight:700}.toggle>input:checked+label{color:var(--main-accent)}.slider{display:flex;align-items:center}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.slider input[type=range]{width:120px}.slider input[type=range]::-webkit-slider-thumb{background:var(--main-accent);height:14px;width:14px;border-radius:7px;padding-bottom:10px;transform:translateY(-5px)}.slider input[type=range]::moz-range-thumb{background:var(--main-accent);height:14px;width:14px;border-radius:7px}.slider input[type=range]::-ms-thumb{background:var(--main-accent);height:14px;width:14px;border-radius:7px}.slider input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--disabled);border-radius:8px}.slider>label{margin-right:6px}.toggleButton{border-radius:14px;background:#fff;padding:4px;margin:4px 4px 2px}.toggleButton>input{display:none}.toggleButton>svg{display:block;width:20px;fill:var(--dark-content);transition:fill .1s ease,transform .1s ease}.toggleButton:hover>svg{fill:var(--main-accent)}.toggleButton>input:checked+svg{fill:var(--main-accent)}.toggleButton>input:active+svg{transform:scale(.9)}button.iconButton{background:#fff;border-radius:14px;padding:4px;margin:4px 4px 2px;border:none}button.iconButton:hover{background:#fff;border:none}button.iconButton:active{transform:unset}button.iconButton>svg{display:block;width:20px;fill:var(--dark-content);transition:fill .1s ease,transform .1s ease}button.iconButton:active>svg{transform:scale(.9)}button.iconButton:hover>svg{fill:var(--main-accent)}.App{display:flex;flex-flow:column nowrap}.App>div{margin-bottom:1em}.Options{position:sticky;display:flex;flex-flow:row nowrap}.Options>*{margin-right:8px}.App h1{font-weight:700;font-size:1.5em;color:var(--dark-content)}.App p{color:var(--light-content)}.App mark{background:var(--highlight);padding:0 .2em}.Contents{display:flex;flex-flow:column nowrap;align-items:stretch}.Contents>canvas{display:block}.Contents>button{margin-top:1em}.printOptions{margin-top:20px}.printOptions>*{margin-right:8px}.printOptions .errorMessage{color:var(--main-accent);font-size:.875em;font-style:italic}.imageoptions{width:100%;display:flex;flex-flow:row nowrap;justify-content:space-between;padding:6px 8px;border-radius:4px;background:#fff}.overlayButtons{display:flex;flex-flow:column nowrap;position:absolute;top:0;left:0}.upload{display:flex;flex-flow:column nowrap}@media (hover: hover){.upload:hover .canvas .toggleButton,.upload:hover .canvas button.iconButton{opacity:.85;transform:scale(1)}.upload .canvas .toggleButton,.upload .canvas button.iconButton{opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .4s ease}}.canvas{position:relative}.textEditor{font-family:IBM Plex Mono,monospace;line-height:1.4;position:relative;width:42ch}.textEditor p{color:#000}.textEditor h1{font-size:3em;font-weight:400}.textEditor h2{font-size:2em}.textEditor mark{background:#000;color:#fff}.textEditor .toolbar{display:flex;flex-flow:row;align-items:flex-start;margin-bottom:2px;margin-top:8px}.textEditor .toolbar .iconButton{margin:0 3px 0 0;transition:background .2s ease}.textEditor .toolbar .iconButton:hover{background:#ececec}.textEditor .overlayButtons{left:-25px;width:25px;height:100%;display:flex;flex-flow:column nowrap;justify-content:center;opacity:.2;transition:opacity .3s ease}.textEditor .overlayButtons>svg{fill:var(--light-content)}.textEditor:hover .overlayButtons{opacity:1}.modal{position:fixed;top:0;left:0;height:100vh;width:100vw;background:#ffd80e80;display:flex;justify-content:center;align-items:center}.modalContents{background:#fff;width:90%;max-width:350px;max-height:60%;border-radius:8px;padding:10px 12px 12px;display:flex;flex-flow:column nowrap;overflow-y:hidden}.modalTitle{display:flex;flex-flow:row nowrap;justify-content:space-between;flex-shrink:0;margin-bottom:8px}.modal h3{margin-bottom:10px}.arenaChannel{margin-top:16px;margin-bottom:10px;display:flex;flex-flow:row nowrap}.arenaChannel>input{flex-grow:1;border:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-family:DM Sans;color:var(--dark-content);font-size:14px;padding:0 6px;height:26px;border:2px solid var(--light-content);margin-right:6px}.arenaChannel>input:focus{outline:2px solid var(--main-accent)}body{font-family:DM Sans;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{box-sizing:border-box;font-size:16px}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul,figure{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{max-width:100%;height:auto}#root{max-width:500px;margin:0 auto;padding:2.5em 1em}:root{--disabled: #c4c4c4;--main-accent: #4154E8;--dark-content: #383943;--light-content: #96979C;--highlight: #FFF399}