body{overflow:hidden;height:100vh;margin:0;padding:0}#app{height:100%;width:100%}#app canvas{outline:none}#debug{position:fixed;right:10px;top:10px;width:350px;z-index:10}body{color:#000;font-family:Roboto,sans-serif;font-size:13px;background-color:#fff;margin:0;overflow:hidden;position:relative}.sidebar{position:fixed;top:0;padding:50px 0 0;left:-330px;width:330px;height:100%;background-color:#fff;transition:left .3s ease;overflow-x:hidden;overflow-y:auto;box-shadow:#0000003d 0 3px 8px}.sidebar.open{left:0}.title{font-size:20px;font-weight:700;text-align:center;margin-bottom:10px;color:#0e2431}.title-line{display:block;height:2px;width:50%;margin:0 auto 10px;background:#0e2431;border-radius:50px}.pattern{height:100px;width:300px;object-fit:cover;margin:5px 10px;cursor:pointer;border-radius:5px;box-shadow:#0000003d 0 3px 8px}.remove-pattern{display:flex;justify-content:center;align-items:center}.checkbox{position:absolute;display:block;height:32px;width:32px;top:25px;left:30px;z-index:5;cursor:pointer}.hamburger-lines{display:block;height:26px;width:32px;position:absolute;top:25px;left:30px;z-index:2;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.hamburger-lines .line{display:block;height:4px;width:100%;border-radius:10px;background:#0e2431}.hamburger-lines .line1{transform-origin:0% 0%;transition:transform .4s ease-in-out}.hamburger-lines .line2{transition:transform .2s ease-in-out}.hamburger-lines .line3{transform-origin:0% 100%;transition:transform .4s ease-in-out}#hamburger.open+.menu-items{transform:translate(0)}#hamburger.open .line1{transform:rotate(45deg)}#hamburger.open .line2{transform:scaleY(0)}#hamburger.open .line3{transform:rotate(-45deg)}