@media (min-width: 600px){html,body{margin:0;height:100vh;background-color:#fff;padding:0;align-items:center;justify-content:center;display:flex;overflow:hidden;font-family:Roboto,sans-serif}#container3D canvas{width:100vw;height:100vh;position:absolute;top:0;left:0;background-color:transparent!important}#container3D{background-color:transparent}.test{font-size:150px;font-family:Roboto,sans-serif;font-weight:800;display:flex;margin-bottom:250px;color:#000}.moveable{height:235px;width:300px;left:70%;border:2px black solid;background-color:#fff;position:absolute;padding:0;margin:0}.moveable div{padding:0;margin:0}.headerTab{width:100%;height:35px;display:flex;align-items:center}.headerTab div{padding:0 20px;height:100%;font-size:20px;display:flex;align-items:center}.styleTab,.colorTab{border-right:2px black solid;border-bottom:2px black solid}.styleTabActive,.colorTabActive{border-bottom:none}.fillerTab{width:100%;border-bottom:2px black solid}.colorGrid{display:grid;grid-template-columns:repeat(3,100px);justify-items:center;align-items:center;height:200px}.colorGrid div{align-items:center;justify-content:center;display:flex;flex-direction:column}.colorGrid div div{width:60px;height:60px;border-radius:40px;border:2px black solid}.colorGrid div p{font-size:14px;margin:0}.colorConRed div{background-color:#ff5050}.colorConGreen div{background-color:#4aec4a}.colorConBlue div{background-color:#5151ec}.colorConCyan div{background-color:#7bffff}.toonCon{height:100px;width:300px;border-bottom:2px solid black;display:flex;align-items:center;justify-content:space-between}.realCon{height:100px;width:300px;display:flex;align-items:center;justify-content:space-between}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;border:2px solid black;border-radius:15px;background-color:#fff;cursor:pointer;position:relative}input[type=checkbox]:checked{background-color:#4caf50}.toonLeft,.realLeft{display:flex;flex-direction:column;align-items:center;width:100px}.toonLeft p,.realLeft p,.toonRight{font-size:14px;margin:0}.toonRight{width:200px}.toonRight input{margin-top:11px}.toonStepsString{font-size:14px;margin-top:10px;margin-bottom:0;text-align:center;padding-right:30px}input[type=range]{width:175px;height:8px;background:#ddd;border-radius:5px;outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#ccc;border-radius:5px}input[type=range]::-moz-range-track{height:8px;background:#ccc;border-radius:5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#4caf50;border:none;cursor:pointer;margin-top:-6px}input[type=range]::-moz-range-thumb{width:27px;height:27px;background:#4caf50;border:2px solid black;border-radius:20px;cursor:pointer}}@media (max-width: 600px){html,body{margin:0;height:100vh;background-color:#fff;padding:0;align-items:center;justify-content:center;display:flex;overflow:hidden;font-family:Roboto,sans-serif}#container3D canvas{width:100vw;height:80px;position:absolute;top:0;left:50%;transform:translate(-50%);background-color:transparent!important}#container3D{background-color:transparent}.test{font-size:150px;font-family:Roboto,sans-serif;font-weight:800;display:flex;height:95%;color:#000}.moveable{height:235px;width:100%;left:0;bottom:0;border:2px black solid;background-color:#fff;position:absolute;padding:0;margin:0}.moveable div{padding:0;margin:0}.headerTab{width:100%;height:35px;display:flex;align-items:center}.headerTab div{padding:0 20px;height:100%;font-size:20px;display:flex;align-items:center}.styleTab,.colorTab{border-right:2px black solid;border-bottom:2px black solid}.styleTabActive,.colorTabActive{border-bottom:none}.fillerTab{width:100%;border-bottom:2px black solid}.colorGrid{display:grid;grid-template-columns:repeat(3,30%);justify-items:center;align-items:center;height:200px}.colorGrid div{align-items:center;justify-content:center;display:flex;flex-direction:column}.colorGrid div div{width:60px;height:60px;border-radius:40px;border:2px black solid}.colorGrid div p{font-size:14px;margin:0}.colorConRed div{background-color:#ff5050}.colorConGreen div{background-color:#4aec4a}.colorConBlue div{background-color:#5151ec}.colorConCyan div{background-color:#7bffff}.toonCon{height:100px;width:100%;border-bottom:2px solid black;display:flex;align-items:center;justify-content:space-between}.realCon{height:100px;width:100%;display:flex;align-items:center;justify-content:space-between}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;border:2px solid black;border-radius:15px;background-color:#fff;cursor:pointer;position:relative}input[type=checkbox]:checked{background-color:#4caf50}.toonLeft,.realLeft{display:flex;flex-direction:column;align-items:center;width:100px}.toonLeft p,.realLeft p,.toonRight{font-size:14px;margin:0}.toonRight{width:200px}.toonRight input{margin-top:11px}.toonStepsString{font-size:14px;margin-top:10px;margin-bottom:0;text-align:center;padding-right:30px}input[type=range]{width:175px;height:8px;background:#ddd;border-radius:5px;outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#ccc;border-radius:5px}input[type=range]::-moz-range-track{height:8px;background:#ccc;border-radius:5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#4caf50;border:none;cursor:pointer;margin-top:-6px}input[type=range]::-moz-range-thumb{width:27px;height:27px;background:#4caf50;border:2px solid black;border-radius:20px;cursor:pointer}}