@font-face {
	font-family: "Sesame Sans";
	src: url("./assets/SesameSans-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Sesame Sans";
	src: url("./assets/SesameSans-Semibold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Sesame Sans";
	src: url("./assets/SesameSans-RegularOblique.woff2") format("woff2");
	font-weight: normal;
	font-style: oblique;
}

@font-face {
	font-family: "Lucida Grande";
	src: url("./assets/lucida-grande.woff") format("woff");
}

html {
	font-family: "Sesame Sans", system-ui;
}

sesame-street-english {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;

	display: grid;
	grid-template-columns: min-content minmax(0, 1fr);
	grid-template-rows: 100%;

	color: var(--color-black);
	background-color: white;
}

sesame-street-english > app-nav {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 1;
}

sesame-street-english > app-nav[data-expand="settings"],
sesame-street-english > app-nav[data-expand="other"] {
	z-index: 3;
}

sesame-street-english > app-router {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 2;
	overflow: visible;
}