@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root.dark {
  --blue: #CF6A32;
  --dark-blue: #B8562A;
  --red: #B8383B;
  --dark-red: #8B3E1A;
  --background: #2b2b2b;
  --surfacePrimary: #3c3532;
  --surfaceSecondary: #2e2a27;
  --action: #F5E6D3;
  --textPrimary: #c4b8ad;
  --textSecondary: #F5E6D3;
  --iconPrimary: #CF6A32;
  --iconSecondary: #F5E6D3;
  --iconTertiary: #a89a8c;
  --hover: rgba(207, 106, 50, .15);
  --item-selected: rgba(207, 106, 50, .22);
  --borderPrimary: rgba(90, 78, 71, .5);
  --borderSecondary: rgba(90, 78, 71, .7);
  --dividerPrimary: rgba(90, 78, 71, .4);
  --dividerSecondary: rgba(90, 78, 71, .7);
}

:root:not(.dark) {
  --blue: #9C2E30;
  --dark-blue: #7A2426;
  --red: #B8383B;
  --dark-red: #8B3E1A;
  --background: #E8DCC4;
  --surfacePrimary: #E8DCC4;
  --surfaceSecondary: #D9C9AC;
  --action: #1a1410;
  --textPrimary: #3a2e25;
  --textSecondary: #1a1410;
  --iconPrimary: #9C2E30;
  --iconSecondary: #1a1410;
  --iconTertiary: #5a4e47;
  --hover: rgba(26, 20, 16, .08);
  --item-selected: rgba(156, 46, 48, .15);
  --borderPrimary: rgba(26, 20, 16, .2);
  --borderSecondary: rgba(26, 20, 16, .3);
  --dividerPrimary: rgba(26, 20, 16, .15);
  --dividerSecondary: rgba(26, 20, 16, .3);
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif !important;
  background-image: radial-gradient(circle, rgba(207, 106, 50, .06) 1px, transparent 1.4px);
  background-size: 5px 5px;
}

h1, h2, h3 {
  font-family: 'Bebas Neue', 'Inter', sans-serif !important;
  letter-spacing: 1px;
}

.button {
  border-radius: 0 !important;
  border: 2px solid #1a1410 !important;
  box-shadow: 3px 3px 0 #1a1410 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #1a1410 !important;
}
.button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #1a1410 !important;
}

.input,
.share__box,
.card,
.file-icons,
#listing.list .item {
  border-radius: 0 !important;
}