:root {
	/* ===== COLORS (Base) ===== */
	--color-primary: hsl(255, 80%, 50%);
	--color-error: hsl(0, 80%, 50%);
	--color-warning: hsl(45, 100%, 50%);
	--color-caution: hsl(30, 80%, 50%);
	--color-success: hsl(120, 80%, 50%);
	--color-accent: hsl(255, 80%, 67%);
	--color-muted: hsl(255, 20%, 50%);
	--color-highlighted: hsl(255, 80%, 70%);
	--color-border: hsl(255, 90%, 77%);
	--color-text: hsl(255, 0%, 10%);
	--color-bg: hsl(255, 90%, 90%);
	
	--border-rounding: 0.25rem;
	--border-rounding-lg: 0.5rem;
	--border-rounding-full: 9999px;
}

/* ===== DARK MODE TOGGLE (Optional) ===== */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: hsl(255, 90%, 95%);
		--color-bg: hsl(255, 40%, 20%);
	}
}

/* ===== SPACING ===== */
.margin-0 { margin: 0 !important; }
.margin-1 { margin: 0.25rem !important; }
.margin-2 { margin: 0.5rem !important; }
.margin-3 { margin: 0.75rem !important; }
.margin-4 { margin: 1rem !important; }
.margin-5 { margin: 1.5rem !important; }
.margin-6 { margin: 2rem !important; }
.margin-7 { margin: 3rem !important; }
.margin-8 { margin: 4rem !important; }
.margin-0 { margin: 0 !important; }
.margin-top-1 { margin-top: 0.25rem !important; }
.margin-top-2 { margin-top: 0.5rem !important; }
.margin-top-3 { margin-top: 0.75rem !important; }
.margin-top-4 { margin-top: 1rem !important; }
.margin-top-5 { margin-top: 1.5rem !important; }
.margin-top-6 { margin-top: 2rem !important; }
.margin-top-7 { margin-top: 3rem !important; }
.margin-top-8 { margin-top: 4rem !important; }
.margin-bottom-1 { margin-bottom: 0.25rem !important; }
.margin-bottom-2 { margin-bottom: 0.5rem !important; }
.margin-bottom-3 { margin-bottom: 0.75rem !important; }
.margin-bottom-4 { margin-bottom: 1rem !important; }
.margin-bottom-5 { margin-bottom: 1.5rem !important; }
.margin-bottom-6 { margin-bottom: 2rem !important; }
.margin-bottom-7 { margin-bottom: 3rem !important; }
.margin-bottom-8 { margin-bottom: 4rem !important; }
.margin-left-1 { margin-left: 0.25rem !important; }
.margin-left-2 { margin-left: 0.5rem !important; }
.margin-left-3 { margin-left: 0.75rem !important; }
.margin-left-4 { margin-left: 1rem !important; }
.margin-left-5 { margin-left: 1.5rem !important; }
.margin-left-6 { margin-left: 2rem !important; }
.margin-left-7 { margin-left: 3rem !important; }
.margin-left-8 { margin-left: 4rem !important; }
.margin-right-1 { margin-right: 0.25rem !important; }
.margin-right-2 { margin-right: 0.5rem !important; }
.margin-right-3 { margin-right: 0.75rem !important; }
.margin-right-4 { margin-right: 1rem !important; }
.margin-right-5 { margin-right: 1.5rem !important; }
.margin-right-6 { margin-right: 2rem !important; }
.margin-right-7 { margin-right: 3rem !important; }
.margin-right-8 { margin-right: 4rem !important; }
.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
.margin-x-0 { margin-left: 0 !important; margin-right: 0 !important; }
.margin-x-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.margin-x-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.margin-x-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.margin-x-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.margin-x-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.margin-x-6 { margin-left: 2rem !important; margin-right: 2rem !important; }
.margin-x-7 { margin-left: 3rem !important; margin-right: 3rem !important; }
.margin-x-8 { margin-left: 4rem !important; margin-right: 4rem !important; }
.margin-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-y-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.margin-y-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.margin-y-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.margin-y-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.margin-y-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.margin-y-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.margin-y-7 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.margin-y-8 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

.object-initial { object-fit: initial !important; }
.object-inherit { object-fit: inherit !important; }
.object-cover { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-fill { object-fit: fill !important ;}
.object-scale-down { object-fit: scale-down !important; }

.pad-0 { padding: 0 !important; }
.pad-1 { padding: 0.25rem !important; }
.pad-2 { padding: 0.5rem !important; }
.pad-3 { padding: 0.75rem !important; }
.pad-4 { padding: 1rem !important; }
.pad-5 { padding: 1.5rem !important; }
.pad-6 { padding: 2rem !important; }
.pad-7 { padding: 3rem !important; }
.pad-8 { padding: 4rem !important; }
.pad-0 { padding: 0 !important; }
.pad-top-1 { padding-top: 0.25rem !important; }
.pad-top-2 { padding-top: 0.5rem !important; }
.pad-top-3 { padding-top: 0.75rem !important; }
.pad-top-4 { padding-top: 1rem !important; }
.pad-top-5 { padding-top: 1.5rem !important; }
.pad-top-6 { padding-top: 2rem !important; }
.pad-top-7 { padding-top: 3rem !important; }
.pad-top-8 { padding-top: 4rem !important; }
.pad-bottom-1 { padding-bottom: 0.25rem !important; }
.pad-bottom-2 { padding-bottom: 0.5rem !important; }
.pad-bottom-3 { padding-bottom: 0.75rem !important; }
.pad-bottom-4 { padding-bottom: 1rem !important; }
.pad-bottom-5 { padding-bottom: 1.5rem !important; }
.pad-bottom-6 { padding-bottom: 2rem !important; }
.pad-bottom-7 { padding-bottom: 3rem !important; }
.pad-bottom-8 { padding-bottom: 4rem !important; }
.pad-left-1 { padding-left: 0.25rem !important; }
.pad-left-2 { padding-left: 0.5rem !important; }
.pad-left-3 { padding-left: 0.75rem !important; }
.pad-left-4 { padding-left: 1rem !important; }
.pad-left-5 { padding-left: 1.5rem !important; }
.pad-left-6 { padding-left: 2rem !important; }
.pad-left-7 { padding-left: 3rem !important; }
.pad-left-8 { padding-left: 4rem !important; }
.pad-right-1 { padding-right: 0.25rem !important; }
.pad-right-2 { padding-right: 0.5rem !important; }
.pad-right-3 { padding-right: 0.75rem !important; }
.pad-right-4 { padding-right: 1rem !important; }
.pad-right-5 { padding-right: 1.5rem !important; }
.pad-right-6 { padding-right: 2rem !important; }
.pad-right-7 { padding-right: 3rem !important; }
.pad-right-8 { padding-right: 4rem !important; }
.pad-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pad-x-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.pad-x-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.pad-x-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.pad-x-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.pad-x-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pad-x-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pad-x-7 { padding-left: 3rem !important; padding-right: 3rem !important; }
.pad-x-8 { padding-left: 4rem !important; padding-right: 4rem !important; }
.pad-x-16 { padding-left: 8rem !important; padding-right: 8rem !important; }
.pad-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pad-y-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.pad-y-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.pad-y-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.pad-y-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pad-y-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.pad-y-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.pad-y-7 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pad-y-8 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pad-y-16 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* ===== BORDERS ===== */
.border { border: 1px solid var(--color-border) !important; }
.border-right { border-right: 1px solid var(--color-border) !important; }
.border-left { border-left: 1px solid var(--color-border) !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }

.border-0 { border: none !important; }

.border-color-primary { border-color: var(--color-primary) !important; }
.border-color-error { border-color: var(--color-error) !important; }
.border-color-warning { border-color: var(--color-warning) !important; }
.border-color-caution { border-color: var(--color-caution) !important; }
.border-color-success { border-color: var(--color-success) !important; }
.border-color-accent { border-color: var(--color-accent) !important; }

.border-rounded { border-radius: var(--border-rounding) !important; }
.border-rounded-lg { border-radius: var(--border-rounding-lg) !important; }
.border-rounded-full { border-radius: var(--border-rounding-full) !important; }

.joined-vertically { border-top: none !important; border-bottom: none !important; }
.joined-vertically:first-of-type { border-top: 1px solid var(--color-border) !important; }
.joined-vertically:last-of-type { border-bottom: 1px solid var(--color-border) !important; }

.joined-horizontally { border-left: none !important; border-right: none !important; }
.joined-horizontally:first-of-type { border-left: 1px solid var(--color-border) !important; }
.joined-horizontally:last-of-type { border-right: 1px solid var(--color-border) !important; }

/* ===== FLEX & GRID & INLINE / ETC ===== */
.align-center { align-content: center !important; }
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-center { justify-content: center !important; align-items: center !important; }
.flex-start { justify-content: flex-start !important; align-items: flex-start !important; }
.flex-end { justify-content: flex-end !important; align-items: flex-end !important; }
.flex-grow { flex-grow: 1 !important; }
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }

/* === MEDIA === */
.media.vertical { overflow: hidden; overflow-x: auto; aspect-ratio: 9 / 16 !important; }
.media.letterbox { overflow: hidden; overflow-y: auto; aspect-ratio: 16 / 9 !important; }
.media.square { overflow: hidden; overflow-y: auto; aspect-ratio: 1 / 1 !important; }

/* ===== TYPOGRAPHY ===== */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-md { font-size: 1rem !important; }
.text-lg { font-size: 1.25rem !important; }
.text-xl { font-size: 1.5rem !important; }
.text-bold { font-weight: bold !important; }
.text-italic { font-style: italic !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.undecorated { text-decoration: none !important; }
.line-height-100 { line-height: 1 !important; }
.line-height-125 { line-height: 1.25 !important; }
.line-height-150 { line-height: 1.50 !important; }
.line-height-175 { line-height: 1.75 !important; }
.line-height-200 { line-height: 2 !important; }
.line-height-250 { line-height: 2.5 !important; }
.line-height-300 { line-height: 3 !important; }
.font-sans { font-family: ui-sans-serif, sans-serif; }
.font-mono { font-family: ui-monospace, monospace; }

/* ===== COLORS (Background, Text, etc.) ===== */
.bg-default { background-color: var(--color-bg) !important; }
.bg-offset { background-color: hsl( from var(--color-bg) h calc(s * 0.8) calc( l * 0.9 ) ) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-muted { background-color: var(--color-muted) !important; }
.bg-highlighted { background-color: var(--color-highlighted) !important; }
.bg-transparent { background-color: transparent !important; }

.text-default { color: var(--color-text) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-success { color: var(--color-success) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-muted { color: var(--color-muted) !important; }
.text-highlighted { color: var(--color-highlighted) !important; }

/* ===== EFFECTS ===== */
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
.transition { transition: all 0.2s ease-in-out !important; }
.transition-fast { transition: all 0.1s ease-in-out !important; }
.transition-slow { transition: all 0.5s ease-in-out !important; }

@keyframes keyframes-zoomsettle {
	from { opacity: 0; transform: scale(1.2); }
	to { opacity: 1; transform: scale(1.0); }
}
.anim-zoomsettle { animation-name: keyframes-zoomsettle; animation-duration: 0.2s; }
.anim-zoomsettle-fast { animation-name: keyframes-zoomsettle; animation-duration: 0.1s; }
.anim-zoomsettle-slow { animation-name: keyframes-zoomsettle; animation-duration: 0.5s; }

/* ===== POSITIONING ===== */
.abs { position: absolute !important; }
.rel { position: relative !important; }
.sticky { position: sticky !important; }
.fixed { position: fixed !important; }
.noresize { resize: none !important; }
.top-0 { top: 0 !important; }
.top-1 { top: 0.25rem !important; }
.top-2 { top: 0.5rem !important; }
.top-3 { top: 0.75rem !important; }
.top-4 { top: 1rem !important; }
.top-5 { top: 1.5rem !important; }
.top-6 { top: 2rem !important; }
.top-7 { top: 3rem !important; }
.top-8 { top: 4rem !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-1 { bottom: 0.25rem !important; }
.bottom-2 { bottom: 0.5rem !important; }
.bottom-3 { bottom: 0.75rem !important; }
.bottom-4 { bottom: 1rem !important; }
.bottom-5 { bottom: 1.5rem !important; }
.bottom-6 { bottom: 2rem !important; }
.bottom-7 { bottom: 3rem !important; }
.bottom-8 { bottom: 4rem !important; }
.left-0 { left: 0 !important; }
.left-1 { left: 0.25rem !important; }
.left-2 { left: 0.5rem !important; }
.left-3 { left: 0.75rem !important; }
.left-4 { left: 1rem !important; }
.left-5 { left: 1.5rem !important; }
.left-6 { left: 2rem !important; }
.left-7 { left: 3rem !important; }
.left-8 { left: 4rem !important; }
.right-0 { right: 0 !important; }
.right-1 { right: 0.25rem !important; }
.right-2 { right: 0.5rem !important; }
.right-3 { right: 0.75rem !important; }
.right-4 { right: 1rem !important; }
.right-5 { right: 1.5rem !important; }
.right-6 { right: 2rem !important; }
.right-7 { right: 3rem !important; }
.right-8 { right: 4rem !important; }
.z-behind { z-index: -1 !important; }
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-60 { z-index: 60 !important; }
.z-70 { z-index: 70 !important; }
.z-80 { z-index: 80 !important; }
.z-90 { z-index: 90 !important; }
.z-100 { z-index: 100 !important; }

/* === GENERICS === */
.display-none { display: none !important; }
.transparent { opacity: 0 !important; }
.pointer { cursor: pointer !important; }
.hideoverflow { overflow: hidden !important; }
.hidden { display: none !important; visibility: hidden !important; }

.scroll-x { overflow-x: scroll !important; }
.scroll-y { overflow-y: scroll !important; }
.scroll-smoothly { scroll-behavior: smooth !important; }

.box-xxs { width: 1rem; height: 1rem; }
.box-xs { width: 2rem; height: 2rem; }
.box-sm { width: 3rem; height: 3rem; }
.box-md { width: 4.5rem; height: 4.5rem; }
.box-lg { width: 6rem; height: 6rem; }
.box-xl { width: 9rem; height: 9rem; }
.box-xxl { width: 12rem; height: 12rem; }

/* === MAX WIDTHS === */
.max-width-16px { max-width: 16px !important; }
.max-width-20px { max-width: 20px !important; }
.max-width-24px { max-width: 24px !important; }
.max-width-28px { max-width: 28px !important; }
.max-width-32px { max-width: 32px !important; }
.max-width-36px { max-width: 36px !important; }
.max-width-40px { max-width: 40px !important; }
.max-width-44px { max-width: 44px !important; }
.max-width-48px { max-width: 48px !important; }
.max-width-52px { max-width: 52px !important; }
.max-width-56px { max-width: 56px !important; }
.max-width-60px { max-width: 60px !important; }
.max-width-64px { max-width: 64px !important; }
.max-width-92px { max-width: 92px !important; }
.max-width-100px { max-width: 100px !important; }
.max-width-128px { max-width: 128px !important; }
.max-width-200px { max-width: 200px !important; }
.max-width-240px { max-width: 240px !important; }
.max-width-256px { max-width: 256px !important; }
.max-width-300px { max-width: 300px !important; }
.max-width-360px { max-width: 360px !important; }
.max-width-384px { max-width: 384px !important; }
.max-width-400px { max-width: 400px !important; }
.max-width-480px { max-width: 480px !important; }
.max-width-500px { max-width: 500px !important; }
.max-width-512px { max-width: 512px !important; }
.max-width-600px { max-width: 600px !important; }
.max-width-640px { max-width: 640px !important; }
.max-width-700px { max-width: 700px !important; }
.max-width-720px { max-width: 720px !important; }
.max-width-768px { max-width: 768px !important; }
.max-width-800px { max-width: 800px !important; }
.max-width-900px { max-width: 900px !important; }
.max-width-960px { max-width: 960px !important; }
.max-width-1000px { max-width: 1000px !important; }
.max-width-1024px { max-width: 1024px !important; }
.max-width-1080px { max-width: 1080px !important; }
.max-width-1200px { max-width: 1200px !important; }

/* === REM WIDTHS/HEIGHTS === */
.width-auto { width: auto !important; }
.width-0 { width: 0 !important; }
.width-1 { width: 1rem !important; }
.width-2 { width: 2rem !important; }
.width-3 { width: 3rem !important; }
.width-4 { width: 4rem !important; }
.width-5 { width: 5rem !important; }
.width-6 { width: 6rem !important; }
.width-7 { width: 7rem !important; }
.width-8 { width: 8rem !important; }
.width-9 { width: 9rem !important; }
.width-10 { width: 10rem !important; }
.width-11 { width: 11rem !important; }
.width-12 { width: 12rem !important; }
.width-13 { width: 13rem !important; }
.width-14 { width: 14rem !important; }
.width-15 { width: 15rem !important; }
.width-16 { width: 16rem !important; }
.width-20 { width: 20rem !important; }
.width-24 { width: 24rem !important; }
.width-28 { width: 28rem !important; }
.width-32 { width: 32rem !important; }
.width-100 { width: 100% !important; }
.width-100vw { width: 100vw !important; }

.height-auto { height: auto !important; }
.height-0 { height: 0 !important; }
.height-1 { height: 1rem !important; }
.height-2 { height: 2rem !important; }
.height-3 { height: 3rem !important; }
.height-4 { height: 4rem !important; }
.height-5 { height: 5rem !important; }
.height-6 { height: 6rem !important; }
.height-7 { height: 7rem !important; }
.height-8 { height: 8rem !important; }
.height-9 { height: 9rem !important; }
.height-10 { height: 10rem !important; }
.height-11 { height: 11rem !important; }
.height-12 { height: 12rem !important; }
.height-13 { height: 13rem !important; }
.height-14 { height: 14rem !important; }
.height-15 { height: 15rem !important; }
.height-16 { height: 16rem !important; }
.height-20 { height: 20rem !important; }
.height-24 { height: 24rem !important; }
.height-28 { height: 28rem !important; }
.height-32 { height: 32rem !important; }
.height-100 { height: 100% !important; }
.height-100vh { height: 100vh !important; }

/* === INPUT PLACEHOLDERS === */
form div {
	position: relative;
}

form label.placeholder {
	position: absolute;
	top: 0.5rem;
	left: 0;
	font-size: large;
	padding: 0 10px;
	-webkit-transition:
		top 0.2s ease-in-out,
		font-size 0.2s ease-in-out;
	transition:
		top 0.2s ease-in-out,
		font-size 0.2s ease-in-out;
}

form div:has(label.placeholder) {
	margin-top: 1.5rem;
}

form input:focus~label.placeholder,
form input:valid~label.placeholder {
	top: -1.2rem;
	left: 0.5rem;
	font-size: small;
	border: 1px solid rgba(128, 128, 128, 0.2);
	border-bottom: 0;
}

form input:focus {
	outline: none;
}

form input,
form textarea {
	width: 100%;
	color: inherit;
	border-radius: var(--border-rounding);
	border: 1px solid rgba(128, 128, 128, 0.2);
	resize: none;
	background: rgba(0, 0, 0, 0.01);
	padding: 0.5rem;
	font-size: large;
}

input[type="text"]:focus,
textarea:focus {
	border-color: rgb(from var(--color-highlighted) r g b / 60%);
	outline: 0;
	-webkit-box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 2px rgb(from var(--color-highlighted) r g b / 60%);
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 2px rgb(from var(--color-highlighted) r g b / 60%);
}

/* === MOCKUPS === */
.mockup { position: relative !important; }
.mockup::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(-55deg,
			rgba(0, 0, 0, 0.25) 0px,
			rgba(0, 0, 0, 0.25) 20px,
			rgba(255, 177, 1, 0.25) 20px,
			rgba(255, 177, 1, 0.25) 40px);
}