@font-face {
	font-family: "SF Pro Variable";
	src: url(./fonts/SF-Pro.ttf);
	font-weight: 100 900;
	font-style: normal;
}

@font-face {
	font-family: "Suisse Intl Regular";
	src: url(../fonts/SuisseIntl-Regular-WebXL.woff2) format("woff2");
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.canvas-container {
	width: calc(98vh * 9 / 16);
	height: 100vh;
	overflow: hidden;
	position: relative;
	font-family: "SF Pro Variable";
}

/* Fullscreen: fill the entire viewport */
body.fullscreen-mode .canvas-container {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
}

#mode-toggle {
	position: absolute;
	left: calc((100vw - 98vh * 9 / 16) / 4);
	transform: translateX(-50%);
	font-family: "Suisse Intl Regular", sans-serif;
	color: white;
	display: flex;
	gap: 15px;
	align-items: center;
	z-index: 1000;
	font-size: 14px;
	letter-spacing: 0.5px;
}

#mode-toggle .mode-label {
	color: #999;
	margin-right: 5px;
}

#mode-toggle .mode-option {
	cursor: pointer;
	color: #444;
	transition: color 0.3s;
}

#mode-toggle .mode-option.active {
	color: white;
}