@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url(/fonts/pretendard/PretendardVariable.woff2) format('woff2-variations');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(/fonts/pretendard/Pretendard-Black.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(/fonts/pretendard/Pretendard-ExtraBold.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(/fonts/pretendard/Pretendard-Bold.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(/fonts/pretendard/Pretendard-SemiBold.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(/fonts/pretendard/Pretendard-Medium.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(/fonts/pretendard/Pretendard-Regular.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(/fonts/pretendard/Pretendard-Light.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(/fonts/pretendard/Pretendard-ExtraLight.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(/fonts/pretendard/Pretendard-Thin.woff2) format('woff2'), url(/fonts/pretendard/Pretendard-Thin.woff) format('woff');
}

@font-face {
	font-family: 'Commit Mono';
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	src: url(/fonts/commit-mono/commit-mono-var.woff2) format('woff2');
}

@font-face {
	font-family: 'Arial Rounded';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url(/fonts/arial-rounded/arial-rounded-mt-bold.woff) format('woff');
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: rgb(252, 252, 252);
}

a {
	padding: 0 0.25rem;
}

a:focus {
	outline-width: 2px;
	outline-color: #3b82f6;
	border-radius: 0.25rem;
}

/* Letter Spacing -2% on h1, h2, h3 and -1% on h4, h5, h6 */

h1, h2, h3 {
	letter-spacing: -2%;
}

h4, h5, h6 {
	letter-spacing: -1%;
}

.custom-scrollbar {
	scrollbar-width: auto;
	scrollbar-color: #a1a1aa #ffffff;
}

.custom-scrollbar::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #a1a1aa;
	border-radius: 10px;
}

.cta-gradient {
	background: linear-gradient(90deg, rgba(252,252,252,1) 0%, rgba(244,244,245,1) 10%, rgba(244,244,245,1) 90%, rgba(252,252,252,1) 100%);
}

.font-mono {
	font-size: 15px;
}

.animate-svg path {
	transition: stroke-dashoffset 0.3s ease-in-out;
  }
  
  .checked path {
	stroke-dasharray: 20;
	stroke-dashoffset: 0;
  }
  
  .unchecked path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20; 
  }

@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
	}

	.cta-gradient {
		background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(9,9,11,1) 50%, rgba(0,0,0,1) 100%);
	}

	.custom-scrollbar::-webkit-scrollbar-thumb {
		background-color: #71717a;
	}

	.custom-scrollbar {
		scrollbar-color: #71717a #ffffff;
	}
}
