:root{background-color:#6495ed}.layer{position:fixed;height:100%;width:100%;top:0;left:0}.sidebar{position:fixed;display:flex;flex-direction:column;height:80%;width:15%;top:10%;left:5%;background-color:#fff;border-radius:30px}.mode-button{height:10%;width:80%;margin:10%;background-color:#6495ed;border-radius:15px;color:#fff;border-color:transparent;font-size:25px;transition:transform .5s ease}.mode-button.not{background-color:#b0c4de}.mode-button:hover{transform:scale(1.1)}.back{position:absolute;height:10%;width:80%;left:10%;bottom:10%;background-color:#6495ed;border-radius:15px;color:#fff;border-color:transparent;font-size:25px;transition:transform .5s ease}.back.not{background-color:#b0c4de}.back:hover{transform:scale(1.1)}.grid-container{position:fixed;height:90%;width:50%;top:5%;left:25%;background-color:#fff}.painter-tool{position:fixed;height:80%;width:15%;top:10%;right:5%;background-color:#fff;border-radius:30px}.color-picker{position:absolute;height:50%;width:80%;top:5%;left:10%;padding:0;border-radius:25px;border:5px solid cornflowerblue}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border-color:transparent}.color-picker-fake{position:absolute;height:48%;width:75%;top:5%;left:10%;padding:0;border-radius:25px;border:5px solid cornflowerblue}.size-picker{position:absolute;height:5%;width:80%;top:60%;left:10%;-webkit-appearance:none}.size-picker::-webkit-slider-runnable-track{background-color:#fff;border-radius:50px;border:5px solid cornflowerblue}.size-picker::-webkit-slider-thumb{-webkit-appearance:none;background-color:#6495ed;height:25px;aspect-ratio:1/1;border-radius:50%}.size{position:absolute;height:5%;width:100%;top:65%;left:0;text-align:center;font-size:25px}.grid{position:absolute;height:50%;width:50%;z-index:20;transition:transform .5s ease,box-shadow .5s ease}.grid:hover{box-shadow:0 0 15px 5px #4682b4}.grid.a{top:0;left:0}.grid.b{top:0;right:0}.grid.c{bottom:0;left:0}.grid.d{bottom:0;right:0}.canvas{position:absolute;height:100%;width:100%;top:0;left:0}.save-background{position:fixed;height:100%;width:100%;top:0;left:0;background-color:#191970;opacity:.8;z-index:100}.save-container{position:fixed;height:90%;width:90%;top:5%;left:5%;background-color:#191970;border-radius:50px;z-index:101}.preview{position:absolute;height:90%;aspect-ratio:1/1;top:5%;left:5%}.download{position:absolute;height:20%;width:30%;right:10%;bottom:10%;background-color:#fff;border-color:transparent;border-radius:25px;font-size:40px;color:#191970;transition:transform 1s ease}.download:hover{transform:scale(1.2)}.exit{position:fixed;height:10%;aspect-ratio:1/1;border-radius:50%;top:2.5%;right:4%;background-color:#fff;border-color:transparent;font-size:25px;color:#191970;transition:transform .5s ease}.exit:hover{transform:scale(1.1)}.confirm{position:absolute;height:60%;width:50%;top:10%;right:0;font-size:50px;text-align:center;color:#fff}