<script>
	let { children } = $props();
	import Top from '$lib/components/layout/Top.svelte';
	import Bottom from '$lib/components/layout/Bottom.svelte';
</script>

<Top />
{@render children()}
<Bottom />

<style>
	:global(:root) {
		--underlineTitle: 4px solid purple;
		--underlineTitleBorderRadius: 4px;
		--img-width: 32px;
		--img-height: 32px;
		--card-background-color: rgba(38, 38, 38, 0.5);
		--card-border-radius: 0.5rem;
	}

	:global(body) {
		background-color: #0f1116;
		color: #ffffff;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		margin: 20px;
	}

	:global(h2) {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		display: flex;
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}
</style>
