body, html
{
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-page);
}

html
{
  height: 100vh;
  -webkit-text-size-adjust: 100%;
}

body
{
  height: 100vh;
  background: var(--color-page);
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font);
}

.clear
{
  display: block;
  clear: both;
  float: none;
}

.app
{
  height: 100vh;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: stretch;
  //grid-gap: 3px;
}

.theme-switching, .theme-switch *
{
  transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}

.theme-rounded .app
{
  grid-gap: 0;
}

.app-main
{
  overflow-y: auto;
}

.fade-enter-active, .fade-leave-active
{
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to
{
  opacity: 0;
}


.ui-split, .ui-split-three, .ui-split-four
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding);
  align-items: stretch;
  justify-content: stretch;

  & + .ui-split
  {
    margin-top: 50px;
  }

  .ui-property + .ui-property
  {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.ui-split-three
{
  grid-template-columns: 1fr 1fr 1fr;
}

.ui-split-four
{
  grid-template-columns: 1fr 1fr 1fr 1fr;
}