.hard-shadow {
                        box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
                }

                .hard-shadow-hover:hover {
                        transform: translateY(-2px);
                        box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
                }

                .hard-shadow-active:active {
                        transform: translateY(2px);
                        box-shadow: none;
                }

                .bg-grid-pattern {
                        background-size: 32px 32px;
                        background-image:
                                linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
                                linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
                }

                .fade-bottom {
                        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
                }

:root {
  --grid-color: rgba(0, 94, 151, 0.05);
  --error-container: #ffdad6;
  --on-primary-container: #f7f9ff;
  --on-tertiary-fixed-variant: #6f3800;
  --tertiary-fixed-dim: #ffb77f;
  --inverse-on-surface: #eef1f7;
  --tertiary-fixed: #ffdcc4;
  --on-tertiary-container: #fff8f5;
  --primary-container: #0077be;
  --on-secondary-container: #616363;
  --primary: #005e97;
  --secondary-container: #dfe0e0;
  --error: #ba1a1a;
  --tertiary: #8b4800;
  --inverse-primary: #9acbff;
  --on-secondary: #ffffff;
  --on-secondary-fixed-variant: #454747;
  --primary-fixed: #cfe5ff;
  --surface-dim: #d7dae0;
  --surface-container: #ebeef4;
  --outline-variant: #c0c7d2;
  --surface-container-highest: #e0e2e9;
  --outline: #707882;
  --on-error: #ffffff;
  --surface-container-lowest: #ffffff;
  --on-tertiary: #ffffff;
  --tertiary-container: #af5d02;
  --background: #f7f9ff;
  --on-secondary-fixed: #1a1c1c;
  --on-background: #181c20;
  --on-surface-variant: #404751;
  --on-primary-fixed: #001d34;
  --surface: #f7f9ff;
  --secondary: #5d5f5f;
  --inverse-surface: #2d3136;
  --on-tertiary-fixed: #2f1500;
  --on-surface: #181c20;
  --secondary-fixed-dim: #c6c6c7;
  --surface-tint: #00629e;
  --on-error-container: #93000a;
  --primary-fixed-dim: #9acbff;
  --surface-container-low: #f1f3fa;
  --on-primary: #ffffff;
  --surface-bright: #f7f9ff;
  --surface-container-high: #e6e8ee;
  --on-primary-fixed-variant: #004a79;
  --surface-variant: #e0e2e9;
  --secondary-fixed: #e2e2e2;
  --icy-blue: #f0f8ff;
}

.dark {
  --grid-color: rgba(255, 255, 255, 0.03);
  --error-container: #ffdad6;
  --on-primary-container: #f5f5f5;
  --on-tertiary-fixed-variant: #6f3800;
  --tertiary-fixed-dim: #ffb77f;
  --inverse-on-surface: #eef1f7;
  --tertiary-fixed: #ffdcc4;
  --on-tertiary-container: #fff8f5;
  --primary-container: #262626;
  --on-secondary-container: #616363;
  --primary: #818cf8;
  --secondary-container: #dfe0e0;
  --error: #ba1a1a;
  --tertiary: #8b4800;
  --inverse-primary: #a3a3a3;
  --on-secondary: #ffffff;
  --on-secondary-fixed-variant: #454747;
  --primary-fixed: #cfe5ff;
  --surface-dim: #d7dae0;
  --surface-container: #171717;
  --outline-variant: #262626;
  --surface-container-highest: #262626;
  --outline: #525252;
  --on-error: #ffffff;
  --surface-container-lowest: #0a0a0a;
  --on-tertiary: #ffffff;
  --tertiary-container: #af5d02;
  --background: #0a0a0a;
  --on-secondary-fixed: #1a1c1c;
  --on-background: #ffffff;
  --on-surface-variant: #ffffff;
  --on-primary-fixed: #001d34;
  --surface: #0a0a0a;
  --secondary: #a78bfa;
  --inverse-surface: #2d3136;
  --on-tertiary-fixed: #2f1500;
  --on-surface: #ffffff;
  --secondary-fixed-dim: #c6c6c7;
  --surface-tint: #00629e;
  --on-error-container: #93000a;
  --primary-fixed-dim: #9acbff;
  --surface-container-low: #171717;
  --on-primary: #0a0a0a;
  --surface-bright: #f7f9ff;
  --surface-container-high: #171717;
  --on-primary-fixed-variant: #004a79;
  --surface-variant: #171717;
  --secondary-fixed: #e2e2e2;
  --icy-blue: #0a0a0a;
}