/* # Overrides */

:root {
	--primer-color-accent: 3, 255, 219;

	--color-accent: rgb(var(--primer-color-accent));
}

vv-shell {
	gap: var(--padding);
	width: 100%;
	display: flex;
	max-width: 1200px;
	overflow-x: initial;
	flex-direction: column;
}

/* # Overlay */

div.overlay {
	gap: var(--padding);
	fill: var(--color-accent);
	bottom: var(--padding);
	border: solid 2px rgba(255, 255, 255, .1);
	display: grid;
	padding: var(--padding);
	position: fixed;
	align-self: center;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, .8);
	grid-template-columns: repeat(2, 1fr);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

div.overlay button {
	--size: 60px;

	transition: 300ms background-color;
	width: var(--size);
	height: var(--size);
	border: solid 2px rgba(var(--primer-color-accent), .2);
	padding: calc(var(--padding) / 2);
	border-radius: 6px;
}

div.overlay button.active {
	fill: black;
	pointer-events: none;
	background-color: var(--color-accent);
}

div.overlay button svg {
	width: 100%;
	height: 100%;
}

/* # Sections */

section.preview {
	width: 100%;
	height: 700px;
	border: solid 4px var(--color-accent);
	padding: calc(var(--padding) / 2);
	overflow: hidden scroll;
	align-self: center;
	border-radius: 10px;
}

section.preview.mobile {
	width: 350px;
}

section.preview img {
	width: 100%;
	border-radius: 4px;
}