@import url('https://fonts.googleapis.com/icon?family=Material+Icons') layer(base);
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap')
	layer(base);

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms' {
	strategy: 'class';
}

@theme {
	--font-sans: Roboto, sans-serif;
	--color-primary: #56a1e3;
	--color-secondary: #0e0e54;
	--color-tertiary: #2661a0;
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentcolor);
	}
}

:root {
	--primary: var(--color-primary);
	--secondary: var(--color-secondary);
}

* {
	user-select: none;
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100dvh;
	overflow-x: hidden;
}

input,
textarea {
	user-select: text;
}

// Containers
.bg-gradient {
	background: linear-gradient(to left, #4781ff 0%, #2854af 50%, #08285b 100%);
}

[id] {
	scroll-margin-top: 5rem;
}

// Forms
:is(.form-input, .form-select) ~ span {
	display: none;
}

.is-invalid ~ span {
	display: block;
}