/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	html {
		font-size: 62.5%;
	}

	html,
	body {
		@apply text-gray-700;
	}

	#svelte {
		/* display: grid;
		grid-template-columns: 25rem 1fr; */
		height: 100%;
	}

	h1 {
		@apply w-full text-7xl mb-20 text-gray-700 tracking-widest font-normal;
	}

	h2 {
		@apply w-full border-t-2 border-gray-300 pt-5 text-5xl text-gray-700 tracking-widest font-normal;
		font-variant: small-caps;
	}

	h3 {
		@apply w-full pt-5 text-3xl text-gray-500 tracking-widest font-normal;
	}

	p code,
	li code {
		@apply py-1 px-2 text-red-500 shadow;
	}

	blockquote {
		@apply bg-red-100 p-5 rounded-md text-gray-700;
	}

	section ul {
		@apply pl-5;
	}

	section ul li:before {
		content: '\279C';
		@apply text-red-400 mr-3;
	}

	p a {
		@apply text-red-700 hover:underline;
	}
}

@layer utilities {
	.border-1 {
		border-width: 1px;
	}

	.border-t-1 {
		border-top-width: 1px;
	}
	.border-b-1 {
		border-bottom-width: 1px;
	}

	.border-l-1 {
		border-left-width: 1px;
	}
	.border-r-1 {
		border-right-width: 1px;
	}
}

@layer components {
	.main-link {
		@apply text-gray-700 text-3xl;
		font-variant: small-caps;
	}

	.main-link:not(:first-child) {
		@apply mt-10;
	}

	.sub-link {
		@apply text-gray-500 text-2xl;
		@apply pl-5;
	}
}
