html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font: verdana, arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

html {
  --app-dark-color: darkblue;
  --app-light-color: white;
  --menu-dark-color: rgb(60,60,60);
  --menu-light-color: white;
  --page-dark-color: darkblue;
  --page-light-color: lightblue;
}



@media (min-width:1px) {
  html {
    --com-app-header-height: 6rem;
    --com-txt-big-size: 2rem;
    --com-txt-medium-size: 1.6rem;
    --com-txt-little-size: 1.1rem;
    --com-txt-tiny-size: 0.7rem;
    --com-icon-big-size: 3.5rem;
    --com-icon-big-radius: 0.75rem;
    --com-icon-medium-size: 3rem;
    --com-icon-medium-radius: 0.5rem;
    --com-icon-little-size: 2rem;
    --com-icon-little-radius: 0.38rem;
    --com-icon-tiny-size: 1rem;
    --com-icon-tiny-radius: 0.2rem;
    --com-margin-big: 1.5rem;
    --com-margin-medium: 1rem;
    --com-margin-little: 0.5rem;
    --com-margin-tiny: 0.2rem;
    --com-panel-width: 21rem;
    --com-column-big: 24rem;
    --com-column-medium: 16rem;
    --com-column-little: 8rem;
    --com-column-tiny: 7rem;
    --popup-button-size:2rem;
    --page-list-margin:0%;
  }
}
@media (min-width:600px) {
}
@media (min-width:900px) {
  html {
    --page-list-margin:20%;
  }
}
@media (min-width:1200px) {
  html {
    --com-rightsidepanel-width: 30rem;
    --txt-big-size: 3rem;
    --txt-medium-size: 2rem;
    --header-height: 5rem;
    --header-icon-size: 3rem;
    --header-icon-margin: 1rem;
  }
}
@media (min-width:1536px) {
}

.menu {
  --menu-width:var(--com-panel-width);
}

.filter {
  --menu-width:var(--com-panel-width);
}