html, body {
    height: 100vh;
    overflow: hidden;
}

.main-layout {
    display: flex;
    flex-direction: column;
    height: 100%;

}

.main-layout header {
    background-color: blueviolet;
}

.main-layout main {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
}

.main-layout footer {
    background-color: blue;
}

.hero {
    font-size: 40pt;
    height: 10em;
    background-color: aquamarine;
}