@media (min-resolution: 120dpi) and (orientation: portrait) { * { font-size: 18pt; } } @media (min-resolution: 120dpi) and (orientation: landscape) { * { font-size: 10pt; } } @media (orientation: portrait) { #main { padding: 0; } #main > div { display: block; width: 80%; padding: 0 10%; } #main > div { padding-bottom: 2em; } } @media (orientation: landscape) { #main { padding: 0; } #main > div { display: inline-block; vertical-align: top; width: 24%; padding: 0 5%; } } * { font-family: 'Roboto'; } body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; } #main { position: relative; text-align: center; } h1 { font-size: 2.5rem; font-weight: normal; margin: 1.2em 1em; padding: 0; } img { width: 100%; margin-bottom: .8em; } p { text-align: center; font-size: 1.6rem; margin: 0; } a { color: black; text-decoration: none; }