firasx/algorithm-playground

1 2@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');3 4:root {5  --primary: #7e22ce;6  --primary-dark: #6b21a8;7  --primary-light: #a855f7;8  --dark: #0f172a;9  --light: #f8fafc;10  --gray: #94a3b8;11  --gray-dark: #334155;12}13 14.dark {15  --bg: var(--dark);16  --text: var(--light);17  --surface: #1e293b;18  --border: #334155;19}20 21.light {22  --bg: var(--light);23  --text: var(--dark);24  --surface: #ffffff;25  --border: #e2e8f0;26}27 28body {29  min-height: 100vh;30  display: flex;31  flex-direction: column;32  background: var(--bg);33  color: var(--text);34  font-family: 'Inter', sans-serif;35  transition: background 0.3s, color 0.3s;36}37 38h1, h2, h3, h4, h5, h6 {39  font-weight: 700;40  line-height: 1.2;41}42 43.glass {44  background: rgba(255, 255, 255, 0.1);45  backdrop-filter: blur(10px);46  border: 1px solid rgba(255, 255, 255, 0.1);47  border-radius: 12px;48}49 50.glass-dark {51  background: rgba(30, 41, 59, 0.7);52  backdrop-filter: blur(10px);53  border: 1px solid rgba(255, 255, 255, 0.05);54  border-radius: 12px;55}56 57.btn-gradient {58  background: linear-gradient(135deg, var(--primary), var(--primary-light));59  color: white;60  border: none;61  transition: all 0.3s;62  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);63}64 65.btn-gradient:hover {66  transform: translateY(-2px);67  box-shadow: 0 6px 12px rgba(126, 34, 206, 0.3);68}69 70.btn-outline {71  background: transparent;72  border: 2px solid var(--primary);73  color: var(--primary);74  transition: all 0.3s;75}76 77.btn-outline:hover {78  background: var(--primary);79  color: white;80}81 82.animate-float {83  animation: float 6s ease-in-out infinite;84}85 86@keyframes float {87  0%, 100% { transform: translateY(0); }88  50% { transform: translateY(-20px); }89}90 91.animate-pulse {92  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;93}94 95@keyframes pulse {96  0%, 100% { opacity: 1; }97  50% { opacity: 0.5; }98}99 100.fade-in {101  animation: fadeIn 0.5s ease-in;102}103 104@keyframes fadeIn {105  from { opacity: 0; transform: translateY(10px); }106  to { opacity: 1; transform: translateY(0); }107}108.code-block {109    font-family: 'Fira Code', monospace;110    background-color: #1e1e1e;111    border-radius: 8px;112    overflow: hidden;113}114 115.code-header {116    background-color: #2d2d2d;117    padding: 0.5rem 1rem;118    display: flex;119    justify-content: space-between;120    align-items: center;121}122 123.code-copy-btn {124    background-color: #3a3a3a;125    border: none;126    color: #a0a0a0;127    padding: 0.25rem 0.5rem;128    border-radius: 4px;129    cursor: pointer;130    transition: all 0.2s;131}132 133.code-copy-btn:hover {134    background-color: #4a4a4a;135    color: #ffffff;136}137 138pre {139    margin: 0;140    padding: 1rem;141    overflow-x: auto;142}143 144/* Animation canvas container */145.animation-container {146    width: 100%;147    height: 400px;148    background-color: #1e1e1e;149    border-radius: 8px;150    position: relative;151    overflow: hidden;152}153 154/* Controls */155.controls {156    display: flex;157    gap: 0.5rem;158    margin-top: 1rem;159}160 161.control-btn {162    padding: 0.5rem 1rem;163    border-radius: 4px;164    background-color: #3b82f6;165    color: white;166    border: none;167    cursor: pointer;168    transition: background-color 0.2s;169}170 171.control-btn:hover {172    background-color: #2563eb;173}174 175/* Algorithm explanation */176.explanation {177    background-color: rgba(30, 41, 59, 0.5);178    border-radius: 8px;179    padding: 1.5rem;180    margin-top: 1.5rem;181}182 183/* Responsive adjustments */184@media (max-width: 768px) {185    .animation-container {186        height: 300px;187    }188}