html, body, .screens {
  width: 100%;
  height: 100%;
  overflow: clip;
}

body {
  background-color: #181818;
  color: #fff;
  margin: 0;
}

body, input {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
}

/* 'Design system' */

.menuItem, .toolbar {
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.toolbarBox {
  padding-top: env(safe-area-inset-top, 0);
}

.toolbar {
  font-size: 32px;
}

.toolbar .title {
  flex: 100 100 0;
  padding: 0 4px 0 8px;
}

.toolbar .imageButton {
  padding: 8px 4px;
  width: 40px;
  height: 40px;
}

.onBrightBackground {
  color: #000000;
}

.onBrightBackground .notificationsButton img {
  filter: none;
}

.onBrightBackground img {
  filter: invert(100%);
}

.onDarkBackground {
  color: #ffffff;
}

h3, .menuItem {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
}

.menuItem {
  padding: 0 16px;
}

.fadeIn {
  animation: 300ms ease-in fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Screens */

.screens > * {
  position: absolute;
  width: 100%;
  height: 100%;
}

.screens *.enterFromRight {
  animation: 300ms ease-out 0s 1 normal enterFromRight;
  animation-fill-mode: forwards;
}

@keyframes enterFromRight {
  from {
    transform: translateX(100%);
  }
}

.screens *.enterFromLeft {
  animation: 300ms ease-out 0s 1 normal enterFromLeft;
  animation-fill-mode: forwards;
}

@keyframes enterFromLeft {
  from {
    transform: translateX(-100%);
  }
}

.screens *.exitToLeft {
  animation: 300ms ease-out 0s 1 normal exitToLeft;
  animation-fill-mode: forwards;
}

@keyframes exitToLeft {
  to {
    transform: translateX(-100%);
  }
}

.screens *.exitToRight {
  animation: 300ms ease-out 0s 1 normal exitToRight;
  animation-fill-mode: forwards;
}

@keyframes exitToRight {
  to {
    transform: translateX(100%);
  }
}

/* Menu */

.menuBox {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;

  background-color: #000000cc;
  transition: opacity 100ms ease-in;

  display: flex;
  flex-direction: column;
  align-items: end;
}

.openMenuBox {
  opacity: 1;
  pointer-events: auto;
}

.closedMenuBox {
  opacity: 0;
  pointer-events: none;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menu .toolbar {
  background-color: #181818;
}

.menuItem {
  color: #fff;
  background-color: #181818;
}

.menuItem:hover  {
  background-color: #2a2a2a;
}