<svelte:head>
	<style>
		body,
		html {
			margin: 0;
			padding: 0;
			background: url(/assets/tile.png) repeat fixed;
			overflow-y: hidden;
		}

		* {
			box-sizing: border-box;
		}

		@font-face {
			font-family: 'Material Icons';
			font-style: normal;
			font-weight: 400;
			src: url('/fonts/MaterialIcons-Regular-subset.woff2') format('woff2');
		}

		@font-face {
			font-family: 'Montserrat';
			font-style: normal;
			font-weight: 300;
			src: url('/fonts/Montserrat-Light.woff2') format('woff2');
		}

		.material-icons {
			font-family: 'Material Icons';
			font-weight: normal;
			font-style: normal;
			font-size: 24px;
			line-height: 1;
			letter-spacing: normal;
			text-transform: none;
			display: inline-block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-moz-font-feature-settings: 'liga';
			-moz-osx-font-smoothing: grayscale;
		}

		.panel {
			background-color: rgba(0, 0, 0, 0.8);
			overflow: auto;
			border: 4px double;
			border-radius: 10px;
			color: white;
		}

		.panel-alt {
			background-color: white;
			overflow: auto;
			border: 3px double;
			border-radius: 5px;
			color: rgba(0, 0, 0, 0.6);
		}
	</style>
</svelte:head>

<slot />
