@tailwind base;
@tailwind components;
@tailwind utilities;

/* @import './typography.css'; */
@import './cards.css';

@layer base {
	@font-face {
		font-family: 'Inter';
		src: url('../assets/fonts/Inter.ttf') format('truetype-variations');
		font-weight: 1 999;
	}

	body,
	html {
		font-family: 'Inter' !important;
		overflow-y: hidden;
	}
	input.h-8::placeholder {
  @apply text-sm;
}
input.h-10::placeholder {
  @apply text-base;
}

input.h-12::placeholder {
  @apply text-base;
}

input:checked + svg {
  	display: block;
  }
h1 {
		@apply text-8xl;
	}

	h2 {
		@apply text-7xl;
	}

	h3 {
		@apply text-6xl;
	}

	h4 {
		@apply text-5xl;
	}

	h5 {
		@apply text-4xl;
	}

	h6 {
		@apply text-3xl;
	}
	p {
		@apply text-sm tracking-wide;
	}

	code {
		@apply text-sm text-black-500 bg-black-100  dark:bg-black-500 dark:text-black-100 rounded;
	}
	[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-color: #fff; */
    /* border-color: #6b7280; */
    border-width: 0!important;
    /* border-radius: 0px; */
    padding-top: 0rem;
    padding-right: .25rem;
    padding-bottom: 0rem;
    padding-left: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
}
}

@layer components {
	.title {
		@apply text-2xl;
	}

	.sub-title-1 {
		@apply text-xl;
	}
	.sub-title-2 {
		@apply text-lg font-light;
	}
	.section__title {
		@apply text-xl ml-2 pt-16 pb-8 text-gray-700 dark:text-gray-100;
	}

	.w-btn {
		@apply flex justify-center  max-w-max whitespace-nowrap focus:outline-none  focus:ring  focus:border-blue-300;
	}
	.grid-box {
		@apply bg-emerald-300  dark:bg-emerald-700 rounded text-black-600 dark:text-white p-2  text-center;
	}
	.grid-box--default {
		@apply p-2  text-center;
	}
}

@layer utilities {
	.centered {
		@apply flex items-center justify-center w-full;
	}
}
#app {
	overflow-x: hidden;
	@apply flex flex-col relative;
}

::-webkit-scrollbar {
	width: 2px;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: inherit;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	@apply bg-navy-blue-700;
	border-radius: 5px;
}

.grid--auto-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	place-items: center;
}

.grid--auto-cols-xs {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.home {
	overflow-y: auto;
	max-height: calc(100vh - 64px);
}
