Flexbox sticky footer

HTML

<body><header>Header</header>
<main class="Site-content">Site content here <br />
    Note that the body tag has a class of .Site (in the fiddle options) <br />
    Based on code from <a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/"> Philip Walton </a></main>
<footer>
Footer content here<br />
Footer content here<br />
Footer content here<br />
Footer content here<br />
</footer>
</body>

CSS

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;:
}    
.Site-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 1.5em;
    
}

header{
    background-color:pink;
}
.Site-content{
    background-color:aqua;
}

footer{
  background-color:olive;
  color:white;
}