/* Спільне для анімованих екранів JAAM Touch у вікі: екран 480x480, вписаний у ширину iframe.
   Шрифти: Onest (https://github.com/googlefonts/onest) і JetBrains Mono
   (https://github.com/JetBrains/JetBrainsMono), обидва під SIL Open Font License 1.1
   (https://openfontlicense.org), тексти ліцензій - fonts/OFL-*.txt. */
@font-face {
  font-family: Onest;
  font-weight: 100 900;
  src: url(fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-weight: 100 900;
  src: url(fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF;
}

/* Без цього браузер малює iframe на білому тлі, коли схема сторінки (темна тема) інша:
   у заокруглених кутах екрана видно білі трикутники. */
:root { color-scheme: light dark; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.screen {
  position: relative;
  width: 480px;
  height: 480px;
  background: #000;
  border-radius: 71px;
  overflow: hidden;
  transform-origin: 0 0;
  font-family: Onest, system-ui, sans-serif;
  color: #F2F4F7;
}

.abs { position: absolute; }
.center-text { position: absolute; left: 0; right: 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .screen * { animation: none !important; }
}