body {
    overflow-wrap: anywhere;
}

header, main, footer {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.debug-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.debug-table caption {
    text-align: left;
    margin-bottom: 0.5rem;
}

.debug-table th,
.debug-table td {
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.debug-table th:first-child {
    width: 30%;
}

.debug-table thead {
    background: #eee;
}

.header-value {
    max-width: 100%;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    header, main, footer {
        padding: 12px;
    }

    .debug-table th,
    .debug-table td {
        padding: 0.375rem;
    }

    .debug-table th:first-child {
        width: 36%;
    }
}