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

html, body {
    position: relative  !important;
    min-height: 100vh  !important;
    font-family: 'Red Hat Display', sans-serif;

}


#root{
   
    min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px;
   
}

@media only screen and (max-width: 800px) {
    #root{
        min-height: 100vh; /* will cover the 100% of viewport */
     overflow: hidden;
     display: block;
     position: relative;
     padding-bottom: 200px;
    }
  }

  @media only screen and (max-width: 500px) {
    #root{
        min-height: 100vh; /* will cover the 100% of viewport */
     overflow: hidden;
     display: block;
     position: relative;
     padding-bottom: 300px;
    }
  }