body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f0f0f0;
    color: #222;
}

a {
    color: #2a5db0;
    text-decoration: none;
}

a:hover {
    color: #1a3d7a;
}

header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 3px solid #aaa;
}

header button, header input {
    padding: 4px 8px;
}

input {
    margin-right: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 2px;
    margin: 2px;
    border-bottom: 2px solid #bbb;
}

/* fitting */
.tight    { padding: 0.25rem; }   /* 4px  */
.snug     { padding: 0.5rem; }    /* 8px  */
.normal   { padding: 1rem; }      /* 16px */
.loose    { padding: 1.5rem; }    /* 24px */
.spacious { padding: 2rem; }      /* 32px */
.huge     { padding: 3rem; }      /* 48px */