1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
@media (prefers-color-scheme: dark) { html, body { background-color: black; font-family: Roboto, sans-serif; color: chartreuse; } a { color: aqua; } .accent { color: red; } input { background-color: green; color: white; font-size: 1.5em; padding: .2em; border: none; } button { background-color: darkgreen; border: none; padding: 0.5em 1em; color: white; font-size: 1em; } } @media (prefers-color-scheme: light) { html, body { background-color: whitesmoke; font-family: Roboto, sans-serif; color: grey; } a { color: darkorange; } h1, h2 { color: orange; } .accent { color: orangered; } input { background-color: orange; color: white; font-size: 1.5em; padding: .2em; border: none; } button { background-color: darkorange; border: none; padding: 0.5em 1em; color: white; font-size: 1em; } } h1 { font-size: 2em; } h2 { font-size: 1.3em; } div { font-size: 1.2em; margin-top: 1em; } div.container { max-width: 35em; margin: 2em; } form label { display: flex; flex-direction: column; max-width: 30em; }