/* ============ GLOBALS ============ */
:root {
    --card-width: 100px;
    --border: 4px;
    font-family: monospace;
}
html, body { margin: 0; padding: 0; }

/* ============ GENERIC ============ */
.flex { display: flex; flex-direction: row; gap: 1rem; }
.float-l { float: left; }
.float-r { float: right; }

/* ============ TABLE ============ */
table {
    border-collapse: collapse;
    border: 1px solid silver;
}
table th,
table td {
    text-align: left;
    padding: 0.5rem;
    border: 1px solid silver;
}

/* ============ CARD ============ */
.card { width: var(--card-width); }
.card > img {
    width: calc(var(--card-width) - 2 * var(--border));
    height: calc(1.5 * var(--card-width) - 2 * var(--border));
    object-fit: cover;
    border: var(--border) solid silver;
}
.card > p { margin-block: 0; }
.card > p span.userId { font-weight: bold; }