.jep
{
	display: grid;
	grid-template-rows: min-content 1fr;
	grid-template-areas:
	"titlebar"
	"dock";

	width: 100vw;
	height: 100vh;
}

.dock
{
	grid-area: dock;
	overflow: hidden;
}

.title-bar
{
	grid-area: titlebar;

	background-color: var(--menu-bar-background-color);

	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
	"icon title"
	"icon menubar";
	align-items: center;
}

.title-bar__icon
{
	grid-area: icon;

	aspect-ratio : 1 / 1;
	height: 100%;

	/*height: 2em;*/
	/*width: 2em;*/

	background-image: url(/src/assets/GlitchyEngineTransparent.png);
	background-size: contain;
	mask: radial-gradient(white 65%, transparent 75%);

	margin-right: 0.5em;
}

.title-bar__title
{
	display: flex;
	grid-area: title;
	height: 2em;
	align-items: center;
}

.engine-name
{
	font-weight: bold;
	margin-right: 1em;
}

.title-bar__button
{
	grid-area: title;
	height: 100%;
	width: 47px;
	background-color: transparent;
	border: none;
	color: white;
}
.title-bar__button:hover
{
	background-color: gray;
}

.title-bar__button.minimize
{
	margin-left: auto;
}

.title-bar__button.close:hover
{
	background-color: red;
}