*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  direction: rtl;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.active {
  display: flex;
}

.emoji {
  font-family: var(--font-emoji);
}