/* Write your global styles here, in PostCSS syntax */
@font-face {
	font-family: 'Space Grotesk';
	src: url('/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

@font-face {
	font-family: 'Space Mono';
	src: url('/fonts/Space_Mono/SpaceMono-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Nippo';
	src: url('/fonts/Nippo/Nippo-Variable.ttf') format('truetype');
}
@tailwind base;
:root {
	--blackish: #202626;
	--gray-dark: #292f2f;
	--gray-light: rgba(242, 242, 242, 0.6);
	--white: rgba(255, 255, 255, 1);
	--whitish: rgb(225, 225, 225);
	--steel: hsl(184, 18%, 50%);
	--steel-rgb: 105, 147, 150;
	--steel-white: hsl(185, 28%, 95%);
	--steel-very-light: hsl(185, 28%, 88%);
	--steel-light: hsl(185, 18%, 66%);
	--steel-light-bright: hsl(185, 45%, 66%);
	--steel-bright: hsl(185, 75%, 33%);
	--steel-bright-rg: 21, 137, 147;
	--steel-dark: hsl(185, 18%, 33%);
	--steel-night: hsl(185, 12%, 12%);
	--neon-green: #59f02b;
	--green: #19d457;
	--green-light: #61f291;
	--green-dark: #198754;
	--jade: #45a164;
	--hunter-green: #405c37;
	--dark-blue: #315db5;
	--blue: #477eed;
	--blue-light: #53d3e0;
	--blue-very-light: #a7f6ff;
	--violet: #9198e5;
	--violet-light: #b4bbff;
	--mauve: #cc71c2;
	--pink: #bf2c7f;
	--purple: #b638f5;
	--sunset: #ff7575;
	--sunset-light: #ffb585;
	--orangered: #fa5f5f;
	--max-red: #de1a1a;
	--yellow: #fad14b;
	--header-height: 3.81rem;
}

@tailwind components;

@tailwind utilities;

.dark body {
	background: rgb(var(--color-surface-700));
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-weight: 350;
}

.link {
	color: rgb(var(--color-primary-500));
	text-decoration: underline;
}

svg.mirror {
	transform: scaleX(-1);
}

input:focus-visible {
	outline: none;
}

.btn {
	font-family: 'Nippo';
}
.input,
.textarea,
.select {
	font-family: 'Nippo';
	font-weight: 300;
}

.rail-icon {
	@apply w-full h3;
}
