<!doctype html>

<title>#devPunks "HOLY Holy Grail🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Flexbox</title>

<style>

:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
}

html   { background: black }
body   { background: var(--darkest) }
main   { background: var(--lightest) }
aside  { background: var(--lighter) }
header, footer { background: var(--darker) }

</style>

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}
</style>

<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

<!doctype html>

<title>#devPunks "HOLY Holy Grail🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Flexbox</title>

<style>

:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
}

html   { background: black }
body   { background: var(--darkest) }
main   { background: var(--lightest) }
aside  { background: var(--lighter) }
header, footer { background: var(--darker) }

</style>

<link
  as=style
  href=index.css
  rel='preload stylesheet'
>

@media (min-width:1300px) {
  body { margin: auto 23vw }
}
</style>

<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

Migrate link for holy grail css
Migrate link for holy grail css
