/*
Repeating the background mostly makes sense in the <body>. 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;
}