/* ============================================================= 🤪 CRAZY MODE — Maximum Ugliness Edition Activated by adding .crazy-mode to ============================================================= */ body.crazy-mode { background: linear-gradient(135deg, #ff69b4, #ff1493, #ff00ff, #ff69b4) !important; background-size: 400% 400% !important; animation: crazy-bg 3s ease infinite !important; color: #39ff14 !important; font-family: "Curlz MT", "Papyrus", "Comic Sans MS", "Jokerman", cursive, fantasy !important; cursor: url("data:image/svg+xml;utf8,"), auto !important; } @keyframes crazy-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Rainbow text animation for headings */ @keyframes rainbow-text { 0% { color: #ff0000; } 15% { color: #ff8800; } 30% { color: #ffff00; } 45% { color: #39ff14; } 60% { color: #00ffff; } 75% { color: #8800ff; } 100% { color: #ff0000; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* --- All text --- */ body.crazy-mode, body.crazy-mode p, body.crazy-mode span, body.crazy-mode li, body.crazy-mode td, body.crazy-mode th, body.crazy-mode label, body.crazy-mode .p, body.crazy-mode div { font-family: "Curlz MT", "Papyrus", "Comic Sans MS", "Jokerman", cursive, fantasy !important; color: #39ff14 !important; } /* --- Headings: Papyrus + rainbow --- */ body.crazy-mode h1, body.crazy-mode h2, body.crazy-mode h3, body.crazy-mode h4, body.crazy-mode h5, body.crazy-mode h6, body.crazy-mode .h1, body.crazy-mode .h2, body.crazy-mode .h3, body.crazy-mode .h4, body.crazy-mode .h5, body.crazy-mode .h6 { font-family: "Papyrus", "Curlz MT", "Comic Sans MS", fantasy !important; animation: rainbow-text 2s linear infinite !important; text-shadow: 3px 3px 0 #ff00ff, -2px -2px 0 #00ffff !important; background-color: transparent !important; border-bottom: 4px dashed #ffff00 !important; letter-spacing: 0.1em !important; } /* --- Links --- */ body.crazy-mode a { color: #ffff00 !important; text-decoration: wavy underline #ff0000 !important; font-weight: 900 !important; } body.crazy-mode a:hover { color: #00ffff !important; text-shadow: 0 0 10px #00ffff, 0 0 20px #ff00ff !important; animation: wobble 0.3s ease infinite !important; display: inline-block; } /* --- Navbar --- */ body.crazy-mode .navbar { background: linear-gradient(90deg, #ff1493, #ff8c00, #ffff00, #39ff14, #00bfff, #8a2be2) !important; background-size: 600% 100% !important; animation: crazy-bg 2s ease infinite !important; border-bottom: 5px dotted #39ff14 !important; } body.crazy-mode .navbar .nav-link, body.crazy-mode .navbar .navbar-brand { font-family: "Curlz MT", "Comic Sans MS", cursive !important; color: #000000 !important; font-weight: 900 !important; text-shadow: 2px 2px 0 #ff69b4 !important; font-size: 1.4em !important; } /* --- Footer --- */ body.crazy-mode .nav-footer { background: repeating-linear-gradient( 45deg, #ff1493, #ff1493 10px, #39ff14 10px, #39ff14 20px ) !important; border-top: 5px double #ffff00 !important; } body.crazy-mode .nav-footer, body.crazy-mode .nav-footer p, body.crazy-mode .nav-footer a, body.crazy-mode .nav-footer i { color: #000000 !important; font-family: "Papyrus", "Comic Sans MS", fantasy !important; font-weight: 900 !important; text-shadow: 1px 1px 0 #ffff00 !important; } /* --- Cards --- */ body.crazy-mode .card { background: #000000 !important; border: 4px dashed #ff00ff !important; box-shadow: 8px 8px 0 #39ff14, -4px -4px 0 #ff1493 !important; animation: wobble 1s ease infinite !important; } body.crazy-mode .card-title { animation: rainbow-text 1s linear infinite !important; font-family: "Curlz MT", cursive !important; } /* --- Code blocks --- */ body.crazy-mode pre, body.crazy-mode code, body.crazy-mode .sourceCode { background: #1a0033 !important; color: #39ff14 !important; border: 3px solid #ff00ff !important; font-family: "Curlz MT", "Comic Sans MS", monospace !important; text-shadow: 0 0 5px #39ff14 !important; } /* --- Buttons --- */ body.crazy-mode .btn { background: #ffff00 !important; color: #ff1493 !important; border: 3px double #39ff14 !important; font-family: "Papyrus", "Comic Sans MS", fantasy !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; animation: blink 1.5s ease infinite !important; } body.crazy-mode .btn:hover { background: #ff1493 !important; color: #39ff14 !important; transform: scale(1.2) rotate(5deg) !important; box-shadow: 0 0 20px #ff00ff, 0 0 40px #39ff14 !important; } /* --- Sidebar --- */ body.crazy-mode #quarto-sidebar, body.crazy-mode .sidebar { background: repeating-linear-gradient( 0deg, #ff00ff, #ff00ff 15px, #000000 15px, #000000 30px ) !important; } body.crazy-mode .sidebar-item a, body.crazy-mode .sidebar-link { color: #ffff00 !important; font-family: "Curlz MT", cursive !important; } /* --- Images spin on hover --- */ body.crazy-mode img:hover { animation: spin 1s linear infinite !important; } /* --- Hero banner image swap --- */ body.crazy-mode .hero-img { background-image: url("../images/Hellish-hero.jpg") !important; } /* --- Hero text --- */ body.crazy-mode .hero-text, body.crazy-mode .hero-text-homepage, body.crazy-mode .hero-text-page { font-family: "Curlz MT", "Papyrus", cursive, fantasy !important; text-shadow: 4px 4px 0 #ff00ff, -3px -3px 0 #39ff14, 2px -2px 0 #ffff00 !important; animation: rainbow-text 1.5s linear infinite !important; } /* --- Tables --- */ body.crazy-mode table { border: 3px solid #39ff14 !important; background: #1a0033 !important; } body.crazy-mode th { background: #ff1493 !important; color: #ffff00 !important; } body.crazy-mode td { border: 2px dotted #ff00ff !important; } /* --- Selection --- */ body.crazy-mode ::selection { background: #39ff14 !important; color: #ff1493 !important; } /* --- Scrollbar (webkit) --- */ body.crazy-mode::-webkit-scrollbar { width: 16px; } body.crazy-mode::-webkit-scrollbar-track { background: #ff1493; } body.crazy-mode::-webkit-scrollbar-thumb { background: #39ff14; border: 3px solid #ffff00; } /* --- The crazy mode button itself --- */ #crazy-mode-btn { background: transparent; border: none; cursor: pointer; font-size: 1.2em; padding: 0.25em 0.5em; margin-left: 0.5em; opacity: 0.6; transition: opacity 0.2s, transform 0.2s; } #crazy-mode-btn:hover { opacity: 1; transform: scale(1.3); } body.crazy-mode #crazy-mode-btn { animation: spin 2s linear infinite !important; opacity: 1 !important; font-size: 1.5em !important; }