/* Repeating the background mostly makes sense in the . Otherwise, people usually want the image and preferably its center (not the top-right corner) */ *:not(body) { background-repeat: no-repeat; background-position: center center; background-size: cover; } /* In applications, there can be lists but HTML lists have bullet points and a bunch of useless styling attributes */ ul, ol, menu { margin: 0; padding: 0; } ul, menu { list-style: none; } p ul{ list-style-type: "-"; } li { margin: 0; padding: 0; } /* buttons are clickable */ button{ cursor: pointer; } /* i find default iframe borders ugly */ iframe{ border: 0; } * { border-collapse: collapse; } /* contain feels like a better default than fill (which stretches the image)*/ img{ object-fit: contain; } /* Typography. Adapted from https://github.com/etalab/template.data.gouv.fr/blob/7674ae351d44b46d9a8b7b4a41d491275f1c8861/src/css/base/typography.css (MIT licence) */ body { font-family: "Source Sans Pro", Arial, sans-serif; font-size: 16px; line-height: 1.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } h1 { font-size: 2em; line-height: 1.125em; } h2 { font-size: 1.75em; line-height: 1.25em; } h3 { font-size: 1.5em; line-height: 1.5em; } h4 { font-size: 1.25em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; }