body { font-size: 1.5rem; margin: 0; background: rgb(255, 244, 235); } .contents { margin: 32px; } h1 { color: #ecab72; margin: 32px; text-align: center; } a { color: currentColor; } a.stretched-link::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } /* FILTERS */ .tag { background: none; font-size: 20px; display: inline-block; border: 1px solid currentColor; padding: 0 0.5em; border-radius: 1em; margin: 4px; text-transform: capitalize; user-select: none; cursor: pointer; transform: translateY(0); transition: transform 0.4s ease-in; } .tag.active { background-color: white; } .tag.active.all { background: none; } .filters .tag:focus, .filters .tag:hover { transform: translateY(-4px); transition: transform 0.2s ease-out; } ul { padding: 0; } /* TABLE */ table { border-collapse: collapse; } tr { /* display: none; */ position: relative; } tr:nth-child(even) { background-color: rgb(251, 237, 225); } tr.active { display: table-row; } tr:hover { background-color: rgb(250, 232, 217); } tr .tag { cursor: default; } tr.header { display: table-row; text-align: left; } .categories { width: 20%; } .overview { font-style: italic; width: 40%; } .date { width: 14ch; } form { margin: 32px; display: inline-block; padding: 2rem; background-color: rgb(250, 232, 217); border-radius: 50%; } form h2 { margin: 0; margin-bottom: 16px; font-size: 28px; }