canvas{border:1px solid #596c73}aside.buttons{width:calc(600px + 1.5rem);margin:0 -.75rem}aside.buttons .columns{margin:0;text-align:center}aside.buttons .columns .column{position:relative;padding:.5rem .75rem}aside.buttons .button-columns{width:100%;margin-top:0;height:auto}aside.buttons .button-columns .column:first-child{text-align:left}aside.buttons .button-columns .column:last-child{text-align:right}aside.buttons .button{margin:0}aside.buttons .canvas-button-tooltip:not(:last-child){margin-right:.5rem}aside.buttons .canvas-button{height:40px;width:40px}aside.buttons .canvas-button.selected{border:1px solid #0a0a0a}aside.buttons .circle{display:block;width:10px;height:10px;border-radius:100%;background-color:#000;transition:all .1s}@media screen and (max-width:768px){aside.buttons{position:absolute;bottom:.5rem;margin:0;width:100%}aside.buttons .columns{margin:0 auto}aside.buttons .columns .column{margin:.1rem auto;padding:0}aside.buttons .columns .column button.button.canvas-button:not(:last-child){margin-right:.1rem;margin-top:.1rem}aside.buttons .columns .column:first-child,aside.buttons .columns .column:last-child{text-align:center}.canvas-holder{margin:-1rem;padding:0}}@keyframes spinAround{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.is-common:not(.is-outlined){background:linear-gradient(52deg,#53c497 20%,#4da762 84%)}.is-rare:not(.is-outlined){background:linear-gradient(52deg,#70ccdf 6%,#5289c5 94%)}.is-epic:not(.is-outlined){background:linear-gradient(52deg,#8379ea 30%,#b996d6 94%)}.is-legendary:not(.is-outlined){background:linear-gradient(52deg,#ff4933,#eac979 28%,#ee795c 50%,#ee5c5c 78%,#ee935c)}.is-mythical:not(.is-outlined){background:linear-gradient(52deg,#33fff4,#ea79db 20%,#5ce1ee 44%,#d885e1 61%,#5ce1ee 79%,#ea79db 96%)}.webui{width:100vw;height:100vh;background:#f5f5f5}.webui-header{display:flex;align-items:center}.webui-message{margin-bottom:1rem;max-width:600px}.empty-bar{width:100%;height:.75rem;background-color:#36393f;position:relative;transition:height .2s ease;z-index:2}.empty-bar .fill-bar-label{position:absolute;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;transition:opacity .2s ease}.empty-bar:hover{height:2.5rem}.empty-bar:hover .fill-bar-label{opacity:1}.empty-bar:hover .fill-bar{filter:brightness(.9);-webkit-filter:brightness(.9)}.empty-bar .fill-bar{position:absolute;width:100vw;height:100%;transition:.5s;background:linear-gradient(52deg,#79eac1,#33ceff 20%,#e550d3 44%,#79eac1 61%,#5865f2 79%,#79eac1);background-size:300% 300%;background-position:0 50%;animation:reverse-gradient 20s ease-in-out infinite alternate;-webkit-animation:reverse-gradient 20s ease-in-out infinite alternate}@media(prefers-reduced-motion:reduce){.empty-bar{transition:none;height:2.5rem}.empty-bar .fill-bar-label{opacity:1}.empty-bar .fill-bar{filter:brightness(.9);-webkit-filter:brightness(.9);animation:none}}.webui-content-wrapper{position:absolute;top:0;left:0;height:100vh;width:100vw;display:flex;flex-grow:1;flex:1;align-items:center;justify-content:center;overflow:hidden}.webui-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px;border-radius:.5rem;box-shadow:0 3px 6px rgba(0,0,0,.05),0 3px 6px rgba(0,0,0,.05);padding:2em;box-sizing:border-box;background:#fff;background-clip:border-box;border:solid transparent}@media(prefers-reduced-motion:reduce){.webui-content:before{animation:none}}@media screen and (max-width:768px){.empty-bar{height:2.5rem}.empty-bar .fill-bar-label{opacity:1}.empty-bar .fill-bar{filter:brightness(.9);-webkit-filter:brightness(.9)}.webui-content{padding:0;padding-top:2.5rem;box-shadow:none;height:100%;width:100%;border-radius:0}}