html,
body {
    overflow-x: hidden;
}

header {
    padding: 15px;
    text-align: center;
    font-size: 40px;
    color: white;
}

article {
    padding: 10px;
    text-align: left;
    font-size: 20px;
    color: white;
    white-space: pre;
    word-break: break-word;
}

.broider {
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACNklEQVR4AezawW7DIBBFUSf//8/pzhJXKmjKMyb1zaojYBgOdNpF3kf488EnnP72dDjehwXFQbnB02JBwzcu6G6g7CkvfDgerv/ydKwfx3tx3BcavhJBBQ0LhNOVXyh7BuvhOHsO5+8Ws37Wx3GerwzKDYxbAUFbj+lI0GnCNsEQlD3jOI42AyL2FAxvF6bPNwTdTmDzggQNX5CgV4OmewrzrY7pxf05zrj6N8EXSsHJWNBJQC4XlCKTcRm02lM4f3Vc9WF91fVl0OoGT5svaPjGBU2D8v8y9hDGf9z/tmWrz+cLDV+1oIKGBcLp3tUeyZ4UrieebvX5/JUPX6GggoYFwul8oYKGBcLpfKGChgXC6XZ+oeGjrkknaNhZUEHDAuF0vlBBwwLhdL5QQcMC4XS+UEHDAuF0vlBBwwLhdP/thYZ56ukErZt1Vwja5akPClo3664QtMtTHxS0btZdIWiXpz4oaN2su6IMOvqu0Ld994k6s+crg7IA41ZA0NZjOhJ0mrBNMA3KnskexPF2+y2ibhGsf3S+adBuNQ8cFDR86YLeDcqewno4zp7D+bvFrJ/1cZzn84VSbDIWdBKQywWlyGQ8BGXPGO3HnjKaf/d4+nxD0LsP/G37Cxq+MUGvBk33FOZbHdOL+3Oc8S9/EzjtjH2hJ0XmB0EzjmcWQU+KzA9l0GpP4fzVcZWJ9VXXl0GrGzxtvqDhGxc0Dcr/y9hDGIf3vzzd6vP5QsNXKqigYYFwuh8AAAD//xNdsv4AAAAGSURBVAMAtOkgtjXHa5cAAAAASUVORK5CYII=") 28 / 28px / 0 round;
    border-width: 28px;
    border-style: solid;
    background-color: rgba(0, 0, 0, 0.811);
}

.chapter-content {
    display: none;
}

.chapter-content.active {
    display: block;
}