body.crtmode .customBackground { background: radial-gradient( ellipse, var(--crt-bg-color-shine) 0%, var(--bg-color) 90% ); } body.crtmode::after { content: ""; display: block; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999999999; background-image: repeating-linear-gradient( 0deg, var(--crt-bg-color-stripe) 0px, var(--crt-bg-color-stripe) 1px, transparent 2px, transparent 5px ); background-size: 50% 5px; opacity: 0.3; mix-blend-mode: color-burn; pointer-events: none; } body.crtmode #scanline { width: 100%; height: 100px; z-index: 1001; position: absolute; bottom: 100%; opacity: 0.1; pointer-events: none; background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, var(--crt-bg-color-shine) 10%, rgba(0, 0, 0, 0.1) 100% ); animation: scanline 10s linear infinite; } body.crtmode header, body.crtmode main, body.crtmode footer, body.crtmode #result, body.crtmode #popups, body.crtmode [data-ui-element="notifications"], body.crtmode #words .word.error, body.crtmode #words .word .hints hint, body.crtmode input, body.crtmode button, body.crtmode textarea, body.crtmode #bannerCenter .banner { text-shadow: 3px 0 1px color-mix(in srgb, currentColor 20%, transparent), -3px 0 color-mix(in srgb, currentColor 30%, transparent), 0 0 3px; } body.crtmode #testModesNotice { text-shadow: none; } body.crtmode #testModesNotice .textButton { text-shadow: 3px 0 1px var(--crt-sub-color-glow), -3px 0 var(--crt-sub-color-glow), 0 0 3px; } body.crtmode #testModesNotice .textButton:hover { text-shadow: 3px 0 1px var(--crt-text-color-glow), -3px 0 var(--crt-text-color-glow), 0 0 3px; } body.crtmode #testModesNotice .textButton.active { text-shadow: 3px 0 1px var(--crt-main-color-glow), -3px 0 var(--crt-main-color-glow), 0 0 3px; } body.crtmode #testModesNotice .row { box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow), -3px 0 var(--crt-sub-alt-color-glow); } body.crtmode #caret { box-shadow: 3px 0 1px var(--crt-caret-color-glow), -3px 0 var(--crt-caret-color-glow); } body.crtmode #paceCaret, body.crtmode key, body.crtmode #bannerCenter .banner { box-shadow: 3px 0 1px var(--crt-sub-color-glow), -3px 0 var(--crt-sub-color-glow); } body.crtmode #caret.banana, body.crtmode #caret.carrot, body.crtmode #paceCaret.banana, body.crtmode #paceCaret.carrot { box-shadow: none; } body.crtmode header [data-ui-element="logo"] svg { filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow)) drop-shadow(-3px 0px 0px var(--crt-main-color-glow)); } body.crtmode header [data-ui-element="navAvatar"] svg { filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow)) drop-shadow(-3px 0px 0px var(--crt-sub-color-glow)); } body.crtmode [data-ui-element="navAvatar"], body.crtmode [data-ui-element="userLevel"], body.crtmode [data-ui-element="xpBar"], body.crtmode header[data-focused] [data-ui-element="logo"] svg { filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow)) drop-shadow(-3px 0px 0px var(--crt-sub-color-glow)); } body.crtmode [data-ui-element="xpBreakdown"] { backdrop-filter: none; background: var(--bg-color); } body.crtmode .button, body.crtmode .scrollToTopButton { box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow), -3px 0 var(--crt-sub-alt-color-glow), 0 0 3px var(--crt-sub-alt-color-glow); } body.crtmode .button.active, body.crtmode .scrollToTopButton.active { box-shadow: 3px 0 1px var(--crt-main-color-glow), -3px 0 var(--crt-main-color-glow), 0 0 3px; } body.crtmode .button:hover, body.crtmode .scrollToTopButton:hover { box-shadow: 3px 0 1px var(--crt-text-color-glow), -3px 0 var(--crt-text-color-glow), 0 0 3px; } body.crtmode #keymap .keymapKey { box-shadow: 3px 0 1px var(--crt-sub-color-glow), -3px 0 var(--crt-sub-color-glow), 0 0 3px; } body.crtmode #keymap .keymapKey.activeKey { box-shadow: 3px 0 1px var(--crt-main-color-glow), -3px 0 var(--crt-main-color-glow), 0 0 3px; }