/* CSS BY  */
Robynne Asato

/* Global */
body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
}

header, nav, main, footer { 
    padding: 1rem; 
    font-family: Arial, Helvetica, sans-serif;
}

nav ul {
    list-style-type: none;
    justify-content: center;
}

nav a {
    text-decoration: none;
}

nav li {
    font-size: 2rem;
}

/* Medium screens */
@media only screen and (min-width: 600px) {
 nav ul { 
    display: flex; 
    gap: 1rem;
    }
 main {
    background: yellow;
    }
}

/* Large screens */
@media only screen and (min-width: 900px) {
 body { 
    max-width: 900px; 
    margin: auto; 
    }

 h1 { 
    font-size: 3rem; 
    }

  main {
    background: blue;
    color: white;
    }
}

/* Extra large */
@media only screen and (min-width: 1200px) {
  main {
    background: red;
    }
}