*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: Amatic;
    src: url('fonts/AmaticSC-Regular.ttf');
}

@font-face {
    font-family: Fredericka;
    src: url('fonts/FrederickatheGreat-Regular.ttf');
}
@font-face {
    font-family: Dancing;
    src: url('fonts/DancingScript-Regular.ttf');
}

html {
    width: auto;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

body {
    min-height: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    font-size: 16px;
    font-family: 'Arial';
    margin: 0 0 0 0;
    padding: 0 0 0 0;

    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}

header {
    flex: 0 1 65px;
    padding: 5px;
    border-bottom: 1px solid;
}

main {
    padding: 10px;
    background-color: rgba(0,255,0,0.1);
    flex: 1 1 100%;
    min-height: 100%;
}

footer {
    background-color: rgba(0,0,255,0.1);
    flex: 0 1 100px;
    padding: 5px;
    border-top: 1px solid;
}