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

:root {
  --bg: #f4f1ea;
  --dark: #10131d;
  --light: #f4f1ea;
  --accent: #fa6a21;
  --gap: 1.5rem;
  --clock-size: min(88vmin, 1100px);
}

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

body {
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--dark);
  font-family: "Zeitkreis Barlow Condensed", "Arial Narrow", sans-serif;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
}

.app {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--gap);
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  overflow: hidden;
}

.clock {
  display: block;
  width: var(--clock-size);
  height: var(--clock-size);
}

@supports not (height: 100dvh) {
  :root {
    --clock-size: min(88vmin, 1100px);
  }
}