```css
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
}

img,
canvas {
    max-width: 100%;
}

#app {
    max-width: 100%;
}

/* Pablo image */
#pablo {
    max-width: 110px;
    height: auto;
}

/* Text inputs */
input[type="text"] {
    font-size: 16px;
    width: 100%;
    max-width: 400px;
}

/* Keep everything inside the screen */
#app,
header,
main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
}

/* Toolbar */
.toolbar {
    width: 100%;
    max-width: 100%;
}

/* Brush size */
input[type="range"] {
    width: 100%;
    max-width: 300px;
}

/* Main title */
h1 {
    overflow-wrap: anywhere;
}

/* Buttons */
button {
    touch-action: manipulation;
}

/* Drawing canvas */
#canvas {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #ffffff;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Community Shelf images */
#shelfDrawings img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* Mobile */
@media (max-width: 600px) {

    h1 {
        font-size: 1.6rem;
    }

    .woodSign {
        max-width: 100%;
    }

}
```