*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}.App{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:50px 0}.container{display:flex;justify-content:center;max-width:calc(1170 + 50px);flex-wrap:nowrap;margin:0 auto}.canvas-container{grid-area:canvas;margin-right:30px}.canvas-style{background-color:#fff;border-radius:35px;box-shadow:0 15px 45px #00000080;max-height:calc(100vh - 115px)}.tools-wrapper{grid-area:tools;display:flex;flex-direction:column;align-items:center;flex-shrink:1;min-width:0}.color-selection{display:flex;flex-direction:column;background:white;padding:28px;border-radius:30px;margin-bottom:18px;gap:14px}.color-option{height:60px;width:60px;border-radius:7px;box-sizing:border-box}.color-option.selected{border:4px solid #686868}.eraser-option{padding-top:1px;height:60px;width:61px;border-radius:7px;border:4px solid white}.eraser-option.selected{border-color:#686868}.clear-button{color:#fff;background:#686868;border:none;border-radius:10px;padding:5px;font-size:15px;cursor:pointer;transition:background .3s}.clear-button:hover{background:#575757}.thickness-wrapper{background:white;padding:24px 28px;border-radius:30px;box-sizing:border-box}.thickness-option{display:flex;align-items:center;justify-content:flex-end;position:relative;cursor:pointer;transition:background .3s}.thickness-option:not(:last-child){margin-bottom:5px}.arrow{position:absolute;right:calc(80% + 15px);top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:8px solid #686868}.thickness-bar{background:black;width:58px;transition:background .3s}.thickness-bar:hover{background:#686868}@media screen and (max-width: 1200px){.container{flex-direction:column}.canvas-container{margin-bottom:30px}.canvas-style{margin:20px auto}.tools-wrapper{flex-direction:row;justify-content:center;gap:20px;margin-top:-10px}.color-selection{flex-direction:row;gap:20px;justify-content:center;padding:20px}}