/* Base styles for mobile (320px - 480px) */
body {
  margin:0em; padding:0em; background-color:grey;
}

header, footer, main {
  width:100%; margin-left:auto; margin-right:auto; background-color:white;
}

/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {
  header, footer, main {
    width:90%; margin-left:auto; margin-right:auto; background-color:white;
  }
}

/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
  header, footer, main {
    width:80%; margin-left:auto; margin-right:auto; background-color:white;
  }
}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
  header, footer, main {
    width:60%; margin-left:auto; margin-right:auto; background-color:white;
  }
}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
  header, footer, main {
    width:60%; margin-left:auto; margin-right:auto; background-color:white;
  }
}