/* General Styles */
body {
    text-align: center;
}

/* tap targets at least 48px - use min-width 48px for tappable elements */

/* 
    ensure relative widths to prevent content overflow - max-width overrides
    width when width is set to fixed number of pixels that exceed display width
*/
img, embed, object, video {
    max-width: 100%;
}

/* Mobile-First Design - responsive styles should be applied smallest to largest */

/* Phone (Portrait) */
body { background: steelblue; }

/* Phone (Landscape) */
@media screen and (min-width: 600px) {
    body { background: orange; }
}

/* iPad (Portrait) */
@media screen and (min-width: 750px) {
    body { background: green; }
}

/* iPad (Landscape) & Laptop */
@media screen and (min-width: 1000px) {
    body { background: pink; }
}

/* Desktop */
@media screen and (min-width: 1200px) {
    body { background: yellow; }
}

/* Large Monitor */
@media screen and (min-width: 1450px) {
    body { background: white; }
}