#projects { display: grid; grid-template-columns: repeat(auto-fill, calc(1.1 * 24rem)); justify-content: center;}.proj-box { position: relative; display: block; text-decoration: none; color: #222; background-color: #f8f8f8; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #fff; border-right: 1px solid #fff; width: 24rem; height: calc(min(24rem, 32vh) + 2px); margin: 1rem;}.proj-box:hover { background-color: #e8eaec; padding: 0; border: 1px solid #ccc;}.proj-box article { position: relative; pointer-events: none; overflow: clip; height: min(24rem, 32vh); padding-top: 0.1rem; margin-left: 1.5rem; margin-right: 1.5rem;}.proj-overlay { position: absolute; pointer-events: none; width: 100%; height: 30%; bottom: 0; left: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1) 90%); z-index: 1;}#proj-screen { display: flex; flex-direction: column; height: 100%;}#proj-page { position: relative; width: 100%; height: 100%;}#proj-sidebar { position: absolute; display: flex; flex-direction: column; align-items: flex-start; left: 0; top: 0; bottom: 0; width: min(20rem, 25%); border-right: 1px solid #ccc; background-color: #f8f8f8; overflow: auto;}#proj-sidebar hr { width: 90%;}#proj-name { padding-left: 5%; margin-bottom: 0.75rem; width: 90%; overflow-wrap: break-word;}#proj-tree { width: 100%; overflow: auto; flex-grow: 1;}#proj-tree ul { list-style-type: none; padding-left: 0.75rem; padding-right: 0.75rem; font-family: monospace; color: #222;}#proj-tree li { font-style: oblique; padding-left: 0.5rem; padding-right: 0.5rem;}#proj-tree a { display: inline-block; width: 100%; overflow: clip; color: #222; text-decoration: inherit;}.proj-tree-item { cursor: pointer; user-select: none;}.proj-tree-item:hover { text-decoration: underline; background-color: #ccc;}#proj-download { font-size: 80%; margin-top: 0.2rem; margin-left: 5%; margin-bottom: 0.7rem; background-color: #48f; color: #f8f8f8;}#proj-download:hover { background-color: #26f;}#proj-main { display: flex; flex-direction: column; position: absolute; left: min(20rem, 25%); right: 0; top: 0; bottom: 0;}#proj-header { display: flex; background-color: #f8f8f8; user-select: none;}#proj-header h3 { font-size: 110%; font-style: oblique; margin-top: 16px; margin-bottom: 16px; padding-left: 20px;}#file-hdr-margin { display: flex; justify-content: center; align-items: center; width: 80px; height: 100%; background-color: #e8eaec;}#file-hdr-margin a { text-decoration: underline #666;}#file-hdr-type-select { font-size: 90%; padding: 0.3rem 0.4rem 0.3rem 0.4rem; color: #444;}#proj-content { flex-grow: 0; overflow: auto;}.proj-md { margin-left: 1rem; margin-right: 1rem;}#proj-blob-outer { width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ccc; overflow: auto;}.file-code::before { counter-reset: listing;}.file-code { display: flex; flex-direction: column; white-space: pre; tab-size: 4; font-family: monospace; font-size: 110%;}.file-code code::before { content: counter(listing); display: inline-block; width: calc(80px - 1rem); padding-right: 1rem; margin-right: 1rem; text-align: right; background-color: #e8eaec;}.file-code code { counter-increment: listing;}