html,
body,
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px;
    height: 100%;
    width: 100%;
    overflow: visible;
    background: #fff;
}
canvas {
    object-fit: contain;
    max-width: 100vw !important;
    max-height: calc(100vh - 2rem) !important;
    width: auto !important;
    height: auto !important;
    border: 0;
    margin: 0;
    --shadow-color: 0deg 0% 61%;
    box-shadow: 0px 0.1px 0.1px hsl(var(--shadow-color) / 0.56),
    0px 0.2px 0.2px -0.6px hsl(var(--shadow-color) / 0.5),
    0.1px 0.5px 0.4px -1.2px hsl(var(--shadow-color) / 0.44),
    0.2px 1px 0.8px -1.7px hsl(var(--shadow-color) / 0.39),
    0.4px 1.9px 1.6px -2.3px hsl(var(--shadow-color) / 0.33),
    0.7px 3.4px 2.8px -2.9px hsl(var(--shadow-color) / 0.27),
    1.1px 5.6px 4.6px -3.5px hsl(var(--shadow-color) / 0.21),
    1.7px 8.8px 7.2px -4.1px hsl(var(--shadow-color) / 0.16),
    2.6px 12.9px 10.6px -4.6px hsl(var(--shadow-color) / 0.1);
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}