body { max-width: 800px; font-family: sans-serif; font-size: 12pt; line-height: 1.4; padding-left: 2ch; padding-right: 3ch; /* for scrollbar */ margin: 0 auto; background-color: #fdf6e3; color: #586e75; /*base01*/ } h1 { color: #d33682; /* magenta */ } h2 { color: #d33682; /* magenta */ } h3 { color: #cb4b16; /* orange */ } div#banner { height: 50px; /*background-color: #2aa198;*/ /* cyan */ background-color: #268bd2; /* blue */ } a { color: #268bd2; /* blue */ text-decoration: none; } div#navigation { background-color: #268bd2; /* blue */ text-align: center; border-bottom: 4px solid black; text-transform: uppercase; margin-bottom: 30px; } div#navigation a { color: white; text-decoration: none; background-color: black; padding: 3px 10px 3px 10px; margin: 0px 10px 0px 10px; } p.date { background-color: #eee8d5; /* base2 */ padding: 10px 10px 10px 10px; } p.repository { background-color: #eee8d5; /* base2 */ padding: 10px 10px 10px 10px; } ul.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); gap: 10px; grid-gap: var(gap); /* fallback */ list-style: none; padding-left: 0; font-size: 14pt; } ul.projects a { display: block; border: 1pt solid #ddd; height: 100%; text-align: center; text-transform: uppercase; } #footer { max-width: 800px; margin: 0 auto; padding-top: 40px; padding-bottom: 20px; color: #93a1a1; text-align: center; font-size: small; }