body {
  margin: 0px;
  position: relative;

  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(../images/page.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

canvas {
  background-color: transparent;
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.logo {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	width: 100px;
	aspect-ratio: 1;
	background-image: url('../images/favicon.webp');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

@media (max-width: 760px) {
	.logo {
		position: absolute;
		top: 0px;
		left: 0px;
		width: clamp(30px, 10vw,100px);
		background-image: url('../images/favicon.webp');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
}