:root {
  --sr-green: #20ff6b;
  --sr-red: #ff2338;
  --sr-black: #050608;
}

.text-srgreen { color: var(--sr-green); }
.bg-srgreen { background-color: var(--sr-green); }
.border-srgreen { border-color: var(--sr-green); }
.text-srblack { color: var(--sr-black); }
.bg-srblack { background-color: var(--sr-black); }

.bg-srgreen\/30 { background-color: rgba(32, 255, 107, 0.3); }
.bg-srgreen\/90 { background-color: rgba(32, 255, 107, 0.9); }
.border-srgreen\/30 { border-color: rgba(32, 255, 107, 0.3); }
.border-srgreen\/40 { border-color: rgba(32, 255, 107, 0.4); }
.border-srgreen\/50 { border-color: rgba(32, 255, 107, 0.5); }
.border-srgreen\/60 { border-color: rgba(32, 255, 107, 0.6); }
.border-srgreen\/70 { border-color: rgba(32, 255, 107, 0.7); }
.border-srgreen\/80 { border-color: rgba(32, 255, 107, 0.8); }

.from-srgreen.via-red-500.to-srblack {
  background-image: linear-gradient(to bottom right, var(--sr-green), var(--sr-red), var(--sr-black));
}

.from-srgreen.to-srblack {
  background-image: linear-gradient(to bottom right, var(--sr-green), var(--sr-black));
}

.after\:bg-srgreen\/90::after {
  content: var(--tw-content);
  background-color: rgba(32, 255, 107, 0.9);
}

.after\:shadow-\[0_0_10px_rgba\(255\,35\,56\,0\.8\)\]::after {
  content: var(--tw-content);
  box-shadow: 0 0 10px rgba(255, 35, 56, 0.8);
}

.shadow-\[0_0_18px_rgba\(255\,35\,56\,0\.85\)\] {
  box-shadow: 0 0 18px rgba(255, 35, 56, 0.85);
}

.drop-shadow-\[0_0_18px_rgba\(255\,35\,56\,0\.9\)\] {
  filter: drop-shadow(0 0 18px rgba(255, 35, 56, 0.9));
}

.drop-shadow-\[0_0_18px_rgba\(255\,35\,56\,0\.95\)\] {
  filter: drop-shadow(0 0 18px rgba(255, 35, 56, 0.95));
}

@media (hover: hover) {
  .hover\:text-srgreen:hover {
    color: var(--sr-green);
  }
}