:root{
  --gap: 20px;
	--tv-scale: 0.5;
}

/* Slightly larger header/category titles */
h1{ font-size: 3rem; }

.category > h2{
  font-size: 2rem;
}

/* Cards: a bit larger */
.menu{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.item h2{
  font-size: 1.5rem;
}

.prices{
  font-size: 1.25rem;
}

.page{
	padding: 16px;
}

#tv-scale{
  transform: scale(var(--tv-scale));
  transform-origin: top left;
  width: calc(100% / var(--tv-scale));
}

/* Background */
#background{
  position: fixed;
  inset: 18px;
  pointer-events: none;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#background img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
	opacity: .5;
}

/* Full-screen background image layer */
#bg-photo{
  position: fixed;
  inset: 0px;
  pointer-events: none;
  z-index: -5;          /* behind logo (-1) */
}

#bg-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fill/cover screen nicely */
  opacity: 0.45;        /* optional, so it doesn't fight readability */
}

/* background deco layer */
#bg-deco{
  position: fixed;
  inset: 0px;
  pointer-events: none;
  z-index: -4;          /* behind logo (-1) */
}

#bg-deco img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fill/cover screen nicely */
  opacity: 0.45;        /* optional, so it doesn't fight readability */
}