Utilities

// Utilities for controlling the box shadow of an element.
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.shadow-outline { box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); }
.shadow-none { box-shadow: none; }

// Utilities for controlling the font size of an element.
.text-xs   { font-size: .75rem;  }
.text-sm   { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem;  }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }
.text-5xl  { font-size: 3rem; }
.text-6xl	 {font-size: 4rem; }

// Utilities for setting the height of an element
.h-0 { height: 0; }
.h-1	{ height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6	{ height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-auto {	height: auto;}
.h-px { height: 1px; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

// Utilities for controlling the text color of an element.
.text-transparent { color: transparent;	}
.text-black  {	color: #000; }
.text-white {	color: #fff; }
// Gray
.text-gray-100	{ color: #f7fafc; }
.text-gray-200 { color: #edf2f7; }
.text-gray-300	{ color: #e2e8f0; }
.text-gray-400 { color: #cbd5e0; }
.text-gray-500 { color: #a0aec0; }
.text-gray-600 { color: #718096; }
.text-gray-700 { color: #4a5568; }
.text-gray-800 { color: #2d3748; }
.text-gray-900 { color: #1a202c;}
// Red
.text-red-100 { color: #fff5f5; }
.text-red-200 { color: #fed7d7; }
.text-red-300 { color: #feb2b2; }	
.text-red-400 { color: #fc8181; }	
.text-red-500 { color: #f56565; }	
.text-red-600 { color: #e53e3e; }	
.text-red-700 { color: #c53030; }	
.text-red-800 { color: #9b2c2c; }	
.text-red-900 { color: #742a2a; }
// Orange	
.text-orange-100  {	color: #fffaf0; }	
.text-orange-200  {	color: #feebc8; }	
.text-orange-300  {	color: #fbd38d; }	
.text-orange-400  {	color: #f6ad55; }	
.text-orange-500  {	color: #ed8936; }	
.text-orange-600  {	color: #dd6b20; }	
.text-orange-700  {	color: #c05621; }	
.text-orange-800  {	color: #9c4221; }	
.text-orange-900  {	color: #7b341e; }	
// Yellow
.text-yellow-100 { color: #fffff0; }	
.text-yellow-200 { color: #fefcbf; }	
.text-yellow-300 { color: #faf089; }	
.text-yellow-400 { color: #f6e05e; }	
.text-yellow-500 { color: #ecc94b; }	
.text-yellow-600 { color: #d69e2e; }	
.text-yellow-700 { color: #b7791f; }	
.text-yellow-800 { color: #975a16; }	
.text-yellow-900 { color: #744210; }	
// Green
.text-green-100 { color: #f0fff4; }	
.text-green-200 { color: #c6f6d5; }	
.text-green-300 { color: #9ae6b4; }	
.text-green-400 { color: #68d391; }	
.text-green-500 { color: #48bb78; }	
.text-green-600 { color: #38a169; }	
.text-green-700 { color: #2f855a; }	
.text-green-800 { color: #276749; }	
.text-green-900 { color: #22543d; }	
// Teal
.text-teal-100 { color: #e6fffa; }	
.text-teal-200 { color: #b2f5ea; }	
.text-teal-300 { color: #81e6d9; }	
.text-teal-400 { color: #4fd1c5; }	
.text-teal-500 { color: #38b2ac; }	
.text-teal-600 { color: #319795; }	
.text-teal-700 { color: #2c7a7b; }	
.text-teal-800 { color: #285e61; }	
.text-teal-900 { color: #234e52; }	
// Blue
.text-blue-100 { color: #ebf8ff; }	
.text-blue-200 { color: #bee3f8; }	
.text-blue-300 { color: #90cdf4; }	
.text-blue-400 { color: #63b3ed; }	
.text-blue-500 { color: #4299e1; }	
.text-blue-600 { color: #3182ce; }	
.text-blue-700 { color: #2b6cb0; }	
.text-blue-800 { color: #2c5282; }	
.text-blue-900 { color: #2a4365; }	
// Indigo
.text-indigo-100 { color: #ebf4ff; }	
.text-indigo-200 { color: #c3dafe; }	
.text-indigo-300 { color: #a3bffa; }	
.text-indigo-400 { color: #7f9cf5; }	
.text-indigo-500 { color: #667eea; }	
.text-indigo-600 { color: #5a67d8; }	
.text-indigo-700 { color: #4c51bf; }	
.text-indigo-800 { color: #434190; }	
.text-indigo-900 { color: #3c366b; }	
// Purple
.text-purple-100 { color: #faf5ff; }	
.text-purple-200 { color: #e9d8fd; }	
.text-purple-300 { color: #d6bcfa; }	
.text-purple-400 { color: #b794f4; }	
.text-purple-500 { color: #9f7aea; }	
.text-purple-600 { color: #805ad5; }	
.text-purple-700 { color: #6b46c1; }	
.text-purple-800 { color: #553c9a; }	
.text-purple-900 { color: #44337a; }	
// Pink
.text-pink-100 { color: #fff5f7; }
.text-pink-200 { color: #fed7e2; }
.text-pink-300 { color: #fbb6ce; }
.text-pink-400 { color: #f687b3; }
.text-pink-500 { color: #ed64a6; }
.text-pink-600 { color: #d53f8c; }
.text-pink-700 { color: #b83280; }
.text-pink-800 { color: #97266d; }
.text-pink-900 { color: #702459; }

// Utilities for controlling how a replaced element's content should be resized.
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill {	object-fit: fill; }
.object-none {	object-fit: none; }
.object-scale-down { object-fit: scale-down; }

// Utilities for controlling how an element is positioned in the DOM.
.static	{ position: static; }
.fixed	{ position: fixed; }
.absolute	{ position: absolute; }
.relative	{ position: relative; }
.sticky	{ position: sticky; }

// Utilities for controlling the width an element's borders.
.border { border-width: 1px; }
.border-0	{ border-width: 0; }
.border-2	{ border-width: 2px; }
.border-4	{ border-width: 4px; }
.border-8	{ border-width: 8px; }
.border-t	{ border-top-width: 1px; }
.border-r	{ border-right-width: 1px; }
.border-b	{ border-bottom-width: 1px; }
.border-l	{ border-left-width: 1px; }
.border-t-0 {border-top-width: 0; }
.border-r-0 {border-right-width: 0; }
.border-b-0 {border-bottom-width: 0; }
.border-l-0 {border-left-width: 0; }
.border-t-2 {border-top-width: 2px; }
.border-r-2 {border-right-width: 2px; }
.border-b-2 {border-bottom-width: 2px; }
.border-l-2 {border-left-width: 2px; }
.border-t-4 {border-top-width: 4px; }
.border-r-4 {border-right-width: 4px; }
.border-b-4 {border-bottom-width: 4px; }
.border-l-4 {border-left-width: 4px; }
.border-t-8 {border-top-width: 8px; }
.border-r-8 {border-right-width: 8px; }
.border-b-8 {border-bottom-width: 8px; }
.border-l-8 {border-left-width: 8px; }

// Utilities for controlling the style of an element's borders.
.border-solid	{ border-style: solid; }
.border-dashed	{ border-style: dashed; }
.border-dotted	{ border-style: dotted; }
.border-double	{ border-style: double; }
.border-none	{ border-style: none; }

// Utilities for controlling the color of an element's borders.
.border-transparent	{ border-color: transparent; }	
.border-black	     { border-color: #000; }	
.border-white	     { border-color: #fff; }	
// Gray
.border-gray-100	{ border-color: #f7fafc; }
.border-gray-200	{ border-color: #edf2f7; }
.border-gray-300	{ border-color: #e2e8f0; }
.border-gray-400	{ border-color: #cbd5e0; }
.border-gray-500	{ border-color: #a0aec0; }
.border-gray-600	{ border-color: #718096; }
.border-gray-700	{ border-color: #4a5568; }
.border-gray-800	{ border-color: #2d3748; }
.border-gray-900	{ border-color: #1a202c; }
// Red
.border-red-100	{ border-color: #fff5f5; }
.border-red-200	{ border-color: #fed7d7; }
.border-red-300	{ border-color: #feb2b2; }
.border-red-400	{ border-color: #fc8181; }
.border-red-500	{ border-color: #f56565; }
.border-red-600	{ border-color: #e53e3e; }
.border-red-700	{ border-color: #c53030; }
.border-red-800	{ border-color: #9b2c2c; }
.border-red-900	{ border-color: #742a2a; }
// Orange
.border-orange-100	{ border-color: #fffaf0; }
.border-orange-200	{ border-color: #feebc8; }
.border-orange-300	{ border-color: #fbd38d; }
.border-orange-400	{ border-color: #f6ad55; }
.border-orange-500	{ border-color: #ed8936; }
.border-orange-600	{ border-color: #dd6b20; }
.border-orange-700	{ border-color: #c05621; }
.border-orange-800	{ border-color: #9c4221; }
.border-orange-900	{ border-color: #7b341e; }
// Yellow
.border-yellow-100	{ border-color: #fffff0; }
.border-yellow-200	{ border-color: #fefcbf; }
.border-yellow-300	{ border-color: #faf089; }
.border-yellow-400	{ border-color: #f6e05e; }
.border-yellow-500	{ border-color: #ecc94b; }
.border-yellow-600	{ border-color: #d69e2e; }
.border-yellow-700	{ border-color: #b7791f; }
.border-yellow-800	{ border-color: #975a16; }
.border-yellow-900	{ border-color: #744210; }
// Green
.border-green-100	{ border-color: #f0fff4; }
.border-green-200	{ border-color: #c6f6d5; }
.border-green-300	{ border-color: #9ae6b4; }
.border-green-400	{ border-color: #68d391; }
.border-green-500	{ border-color: #48bb78; }
.border-green-600	{ border-color: #38a169; }
.border-green-700	{ border-color: #2f855a; }
.border-green-800	{ border-color: #276749; }
.border-green-900	{ border-color: #22543d; }
// Teal
.border-teal-100	{ border-color: #e6fffa; }
.border-teal-200	{ border-color: #b2f5ea; }
.border-teal-300	{ border-color: #81e6d9; }
.border-teal-400	{ border-color: #4fd1c5; }
.border-teal-500	{ border-color: #38b2ac; }
.border-teal-600	{ border-color: #319795; }
.border-teal-700	{ border-color: #2c7a7b; }
.border-teal-800	{ border-color: #285e61; }
.border-teal-900	{ border-color: #234e52; }
// Blue
.border-blue-100	{ border-color: #ebf8ff; }
.border-blue-200	{ border-color: #bee3f8; }
.border-blue-300	{ border-color: #90cdf4; }
.border-blue-400	{ border-color: #63b3ed; }
.border-blue-500	{ border-color: #4299e1; }
.border-blue-600	{ border-color: #3182ce; }
.border-blue-700	{ border-color: #2b6cb0; }
.border-blue-800	{ border-color: #2c5282; }
.border-blue-900	{ border-color: #2a4365; }
// Indigo
.border-indigo-100	{ border-color: #ebf4ff; }
.border-indigo-200	{ border-color: #c3dafe; }
.border-indigo-300	{ border-color: #a3bffa; }
.border-indigo-400	{ border-color: #7f9cf5; }
.border-indigo-500	{ border-color: #667eea; }
.border-indigo-600	{ border-color: #5a67d8; }
.border-indigo-700	{ border-color: #4c51bf; }
.border-indigo-800	{ border-color: #434190; }
.border-indigo-900	{ border-color: #3c366b; }
// Purple
.border-purple-100	{ border-color: #faf5ff; }
.border-purple-200	{ border-color: #e9d8fd; }
.border-purple-300	{ border-color: #d6bcfa; }
.border-purple-400	{ border-color: #b794f4; }
.border-purple-500	{ border-color: #9f7aea; }
.border-purple-600	{ border-color: #805ad5; }
.border-purple-700	{ border-color: #6b46c1; }
.border-purple-800	{ border-color: #553c9a; }
.border-purple-900	{ border-color: #44337a; }
// Pink
.border-pink-100	{ border-color: #fff5f7; }
.border-pink-200	{ border-color: #fed7e2; }
.border-pink-300	{ border-color: #fbb6ce; }
.border-pink-400	{ border-color: #f687b3; }
.border-pink-500	{ border-color: #ed64a6; }
.border-pink-600	{ border-color: #d53f8c; }
.border-pink-700	{ border-color: #b83280; }
.border-pink-800	{ border-color: #97266d; }
.border-pink-900	{ border-color: #702459; }

// Utilities for setting the width of an element
.w-0	{ width: 0; }               
.w-1	{ width: 0.25rem; }
.w-2	{ width: 0.5rem; }
.w-3	{ width: 0.75rem; }
.w-4	{ width: 1rem; }
.w-5	{ width: 1.25rem; }
.w-6	{ width: 1.5rem; }
.w-8	{ width: 2rem; }
.w-10	{ width: 2.5rem; }
.w-12	{ width: 3rem; }
.w-16	{ width: 4rem; }
.w-20	{ width: 5rem; }
.w-24	{ width: 6rem; }
.w-32	{ width: 8rem; }
.w-40	{ width: 10rem; }
.w-48	{ width: 12rem; }
.w-56	{ width: 14rem; }
.w-64	{ width: 16rem; }
.w-auto	{ width: auto; }
.w-px	{ width: 1px; }
.w-1-2	{ width: 50%; }
.w-1-3	{ width: 33.333333%; }
.w-2-3	{ width: 66.666667%; }
.w-1-4	{ width: 25%; }
.w-2-4	{ width: 50%; }
.w-3-4	{ width: 75%; }
.w-1-5	{ width: 20%; }
.w-2-5	{ width: 40%; }
.w-3-5	{ width: 60%; }
.w-4-5	{ width: 80%; }
.w-1-6	{ width: 16.666667%; }
.w-2-6	{ width: 33.333333%; }
.w-3-6	{ width: 50%; }
.w-4-6	{ width: 66.666667%; }
.w-5-6	{ width: 83.333333%; }
.w-1-12	{ width: 8.333333%; }
.w-2-12	{ width: 16.666667%; }
.w-3-12	{ width: 25%; }
.w-4-12	{ width: 33.333333%; }
.w-5-12	{ width: 41.666667%; }
.w-6-12	{ width: 50%; }
.w-7-12	{ width: 58.333333%; }
.w-8-12	{ width: 66.666667%; }
.w-9-12	{ width: 75%; }
.w-10-12	{ width: 83.333333%; }
.w-11-12	{ width: 91.666667%; }
.w-full	{ width: 100%; }
.w-screen	{ width: 100vw; }