@font-face {
  font-family: 'sevensegment';
  src: url('../assets/Seven\ Segment.ttf') format('truetype');
}
:root {
  cursor: url('../assets/icons/cursor/default.svg'), default;
}
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: black;
  pointer-events: none;
  font-family: 'sevensegment';
}
body {
  user-select: none;
  display: grid;
  grid-template-columns: 1fr min(100%, calc(100dvh - 64px)) 1fr;
  margin: 0;
  padding: 32px;
  height: -webkit-fill-available;
}
form[name='clock'] {
  width: min(100%, calc(100dvh - 64px));
  aspect-ratio: 1 / 1;
  height: auto;
  margin: auto;
  position: relative;
}

/* Error message and framerate */
body > span {
  position: absolute;
  bottom: 2ch;
  left: 2ch;
}

#middle {
  position: absolute;
  left: 50%;
  top: 50%;
}

input {
  appearance: none;
}