@layer utilities { /* A set of reusable classes */ .bg-editor { background-color: #282c34; } body[data-editor-theme="highContrast"] .bg-editor { background-color: #060708; } .text-editor { color: #c4cad6; } .font-editor { font-family: "JetBrains Mono", "Droid Sans Mono", "monospace"; font-size: 14px; } .shadow-xl-center { box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.1), 0 0 10px -5px rgba(0, 0, 0, 0.04); } .shadow-custom-1 { box-shadow: 10px 5px 25px -8px rgba(0, 0, 0, 0.2); } .flip-horizontally { transform: scaleY(-1); } /* Animations */ .fade-in { animation: fade-in-frames 200ms; } .fade-out { animation: fade-out-frames 200ms; } @keyframes fade-in-frames { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out-frames { from { opacity: 1; } to { opacity: 0; } } }