@media screen and (max-width: 768px){
    .heading{
        font-size: 3em;
        font-family: Anaheim;
    }
}

@media screen and (min-width: 768px){
    .heading{
        font-size: 4em;
        font-family: Anaheim;
    }
}

@media screen and (min-width: 992px){
    .heading{
        font-size: 4.5em;
        font-family: Anaheim;
    }
}

@media screen and (min-width: 992px){
    .heading{
        font-size: 5em;
        font-family: Anaheim;
    }
}

* {
 box-sizing: border-box;
}

*:before,
*:after {
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 position: relative;
}

.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}

footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}