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

header,
nav,
main,
footer {
    padding: 1rem;
}

/* Medium screens */
@media only screen and (min-width: 600px) {
    nav ul {
        list-style: none;
        display: flex;
        gap: 1rem;
    }
    nav li {
  margin: 0;
  padding: 0 10px; /* spacing around text */
  position: relative;
}

nav li:not(:last-child)::after {
  content: "|"; /* separator */
  position: absolute;
  right: 0;
}

    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;
    }
}

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