body { --text-color: #222; --bkg-color: white; --alink-color: blue; --aactive-color: red; --avisited-color: #006400; --petite-color: #a0a0a0; } body.dark-theme { --text-color: #d3cfc9; --bkg-color: #131516; --alink-color: #5555db; --aactive-color: red; --avisited-color: #0f7d0f; --petite-color: #aca59a; } @media (prefers-color-scheme: dark) { /* defaults to dark theme */ body { --text-color: #d3cfc9; --bkg-color: #131516; --alink-color: #5555db; --aactive-color: red; --avisited-color: #0f7d0f; --petite-color: #aca59a; } body.light-theme { --text-color: #222; --bkg-color: white; --alink-color: blue; --aactive-color: red; --avisited-color: #006400; --petite-color: #a0a0a0; } } body { background-color: var(--bkg-color); font-family: Arial, Helvetica, Verdana, sans-serif; font-size : 16pt; max-width: 800px; margin: auto; padding: 10px; color: var(--text-color); } a:link {color: var(--alink-color)} a:active {color: var(--aactive-color)} a:visited {color: var(--avisited-color)} h1 { font-size : 27pt; font-weight: inherit; } #textbox{ max-width: 90%; margin: auto; } /* #fontsize18 { font-size : 18pt; text-align: center; } */ .env{ float: right; padding-right: 5px; } .petite { font-size : 10pt; color: var(--petite-color); text-align: center; } .cover-images { text-align: center; max-width: 850px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }