:root{--whitey: #faf3ddff;--whitey-hover: #f4e6b8;--greeny: #02c39aff;--greeny-hover: #02a27f;--pinky: #e58c8aff;--pinky-hover: #de6a68;--pinky-darker: #da5a58;--blues: #3db2f1;--blues-hover: #60aae6;--blacky: #363732ff;--blacky-hover: #2a2b27;--rich-black-fogra-29: hsla(222, 38%, 9%, 1);--independence: hsla(228, 26%, 30%, 1);--independence-2: hsla(252, 13%, 38%, 1);--roman-silver: hsla(212, 8%, 58%, 1);--imperial-red: hsla(348, 100%, 50%, 1);--turquoise: hsla(168, 62%, 61%, 1);--hot-pink: hsla(334, 96%, 71%, 1);--beige: hsla(62, 52%, 90%, 1);--maximum-yellow-red: hsla(40, 90%, 61%, 1)}.bg-white{background-color:var(--beige);color:#000}.bg-green{background-color:var(--turqoise);color:#fff}.bg-pink{background-color:var(--pinky);color:#fff}.bg-pink-darker{background-color:var(--pinky-darker)!important;color:#fff}.bg-blue{background-color:var(--independence-2);color:#000}.bg-black{background-color:var(--rich-black-fogra-29);color:#fff}.bg-lavender{background-color:#dcd6f7;color:#394160}.bg-strong-red{background-color:var(--imperial-red);color:#fff}body{padding:0;margin:0;font-family:Helvetica,sans-serif;background-color:var(--rich-black-fogra-29);overflow:auto}h3,h4{margin:.3rem}.title{grid-area:header;margin-top:0px;margin-bottom:0px;text-align:center;border-bottom-right-radius:1rem}.mode-title{margin-top:0px;margin-bottom:0px;text-align:center;grid-area:modetitleplace;border-bottom-left-radius:1rem}.modetitlemargin{margin:0px;padding:.3rem}.timebar{grid-area:timebar;text-align:center;padding-top:.2em}.modes-holder{grid-area:modes;text-align:center;overflow:auto;padding-bottom:1rem;padding-top:.4rem;border-top-right-radius:1rem}#canvas-holder{grid-area:main;padding:0px;margin:0px;overflow:hidden;position:relative}canvas{border-top-left-radius:1rem;border-top-right-radius:1rem;box-shadow:5px 10px 18px black;margin:0px}.sidebar{grid-area:sidebar;overflow:auto;padding-bottom:1rem;padding-left:.6rem;padding-right:.6rem;padding-top:0rem;margin-top:0px}.page-container{display:grid;grid-template-columns:10rem auto 10rem;grid-template-rows:2rem 1fr;grid-template-areas:"header timebar modetitleplace" "modes main sidebar";width:100vw;height:100vh;max-width:100vw;max-height:100vh}.full-width{width:100%}.button{background-color:var(--independence);border:none;color:#fff;padding:.4em .6em;text-align:center;text-decoration:none;display:inline-block;border-radius:.3em;-webkit-transition:.2s;transition:opacity .2s;opacity:.8}.big-button{background-color:var(--independence);border:none;color:#fff;padding:.4em .6em;text-align:center;text-decoration:none;display:inline-block;font-size:medium;border-radius:.3em;box-shadow:var(--blacky);margin-top:.5em;box-shadow:3px 3px 3px black;-webkit-transition:.2s;transition:opacity .2s;width:75%;opacity:.8}.button:hover,.big-button:hover{opacity:1}.fix-width{width:88%}.rotate{grid-area:rotate;display:none}.modal-bg{visibility:hidden;transform:scale(0);position:fixed;width:100%;height:100%;top:0px;left:0px;background-color:rgba(0,0,0,0);transition:visibility 0s ease .45s,transform .2s ease-out .25s,background-color .25s ease}.showModal{transition:visibility 0s,transform .2s ease-out,background-color .25s ease .2s;visibility:visible;background-color:rgba(0,0,0,.502);transform:scale(1)}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35rem;max-width:50%;min-width:22rem;max-height:90%;box-shadow:0 0 60px 10px rgba(0,0,0,.9);border-radius:1rem;background-color:var(--rich-black-fogra-29);color:#fff;overflow:auto}.close-button{position:absolute;z-index:1;top:.2rem;right:.2rem;border:0;background-color:rgba(255,255,255,.02);padding:0px;width:2rem;height:2rem;border-radius:100vh;transition:background-color .2s}.close-button:hover{background-color:rgba(255,255,255,.102)}.close-button:hover>svg{fill:rgba(255,255,255,.3)}.close-button>svg{display:block;width:60%;height:60%;fill:rgba(255,255,255,.15);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.creation-image-modal{width:100%;border-radius:1rem}@media (max-width: 1125px){.big-button{padding:.25em .4em;font-size:small}}@media (max-width: 768px){.page-container{grid-template-columns:8rem auto 8rem}.button{padding:.4em .5em;font-size:x-small}.big-button{width:83%}.fix-width{width:90%}}@media (max-width: 500px){.page-container{grid-template-columns:0rem auto 0rem;grid-template-rows:2rem 1fr 7rem;grid-template-areas:"header timebar modetitleplace" "modes main sidebar" "rotate rotate rotate"}.rotate{display:block;font-size:x-large;font-weight:bold;text-align:center;padding-top:1.2rem}}