:root {
	--quay: #eb6f1d;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	display: flex;
	justify-content: center;
	padding: 5vw;

	font-family: sans-serif;
	color: #fffa;
	background: #071320;
}

body {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	> img {
		width: 100%;
		max-width: 5em;
	}

	> div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		> h1 {
			color: color-mix(in lch, var(--quay), white 20%);
			text-shadow: 0 0 0.5em color-mix(in lch, transparent, var(--quay) 75%);
		}

		> .version {
			font-size: 0.8em;
			opacity: 0.4;
		}
	}
}

.items {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

quay-browser, quay-searchbar, quay-outliner, quay-breadcrumb, quay-dropzone {
	padding: 1em;
}

quay-browser {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 300px;
	justify-content: center;
}

quay-searchbar {
	width: 100%;
}

quay-dropzone {
	height: 150px;
}

quay-outliner {
	width: 300px;
}

.components {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.component {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 0.5em;
	width: 300px;
	padding: 1em;

	h4 {
		color: #ED701E;
		text-align: center;
	}
}

.dropzone {
	flex: 100%;
}

.searchbar {
	flex: 1;
}

.outliner {
	flex: 1;
}

.breadcrumb {
	flex: 1;
}

.browser {
	flex: 100%;
}