.App {
position: fixed;
width: 100vw;
height: calc(100vh - 84px);
display: flex;
}
@media screen and (min-width: 1000px) {
height: calc(100vh - 12rem);
.App-wrapper {
flex: 1;
overflow: hidden;
flex-direction: column;
margin: 0 auto;
max-width: 1000px;
.App-heading {
flex-basis: 3rem;
border-bottom: 1px dashed var(--primary);
align-items: center;
.App-heading small {
opacity: 0.2;
.App-side {
position: absolute;
top: 0;
right: 0;
background: var(--gray-500);
@media screen and (max-width: 1100px) {
display: none;
.App-content {
position: relative;
.App-drawer {
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 2;
background: var(--background);
.App-input {
flex-basis: 7rem;
padding: 0 1rem;