body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: sans-serif;
  font-style: normal;
  margin:0;
  padding:0;
}

body{
  overflow:hidden;
}

#root{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height:100vh;
  %layout-element{
    width:100vw;
    box-sizing:border-box;
  }
  header[role="banner"]{
    flex: 0 0 auto;
    @extend %layout-element;
    padding:1em 1em 0 1em;
  }
  section[role="main-content"]{
    flex:1 1 auto;
    @extend %layout-element;
    padding:0 1em 0 1em;
    overflow-y: auto;
    overflow-x: hidden;
  }
  footer[role="tools"]{
    flex:0 0 auto;
    @extend %layout-element;
    // padding-bottom: 1em;
    // >*{
    //   padding:0.5em 1em;
    // }
  }
}