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

html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    user-select: none;
}

.app-body {
    border: 1px solid blue;
    min-height: 30px;
    width: 400px;
    height: 700px;
    margin: 20px auto;
}

@media screen and (max-width: 1200px) {
    .app-body {
        border: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }
}

.app-body {
    display: grid;
    grid-template-areas: 
        'header'
        'body'
        'footer'
    ;
    grid-template-columns: auto;
    grid-template-rows: max-content auto max-content;
    font-size: 36px;
    grid-gap: 0;
}

.header {
    border: 1px solid green;
    grid-area: header;
}

.body {
    border: 1px solid orange;
    grid-area: body;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    /* user-select: none; */
    /* height: 100%; */
}

.footer {
    border: 1px solid red;
    grid-area: footer;
}

canvas {
    border: 1px solid #aaa;
    height: 100%;
}

.indicator {
    width: 200px;
    height: 10px;
    border: 1px solid gray;
    display: inline-block;
}