/* Import a Google Font */ @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@400;500&display=swap'); /* Global styles */ body { font-family: 'Merriweather', serif; /* Primary font for readability */ line-height: 1.6; padding: 0; margin: 0; background:#202020; /*background color #212121 1b1919 font color #ececec*/ } /* =========================== MATRIX MODE – Homepage only Add to the end of your CSS Usage: =========================== */ :root { --matrix-bg: #0b0f10; --matrix-primary: #00ff9c; /* neon glyphs */ --matrix-accent: #15dbe2; /* links/glow accent */ --matrix-soft: #b7ffcf; /* softer text/accent */ } /* Turn on the effect only for homepage in matrix mode */ body.home-page.matrix { background: radial-gradient(1200px 600px at 15% -10%, rgba(0,255,156,0.15), transparent 60%), radial-gradient(900px 500px at 85% 110%, rgba(0,255,156,0.1), transparent 60%), var(--matrix-bg); color: #e6ffee; overflow-x: hidden; position: relative; } /* Matrix “code rain” layers (pure CSS via tiled inline SVG) */ body.home-page.matrix::before, body.home-page.matrix::after { content: ""; position: fixed; inset: -200px 0 -200px 0; /* bleed outside to avoid gaps while scrolling */ pointer-events: none; mix-blend-mode: screen; opacity: 0.35; z-index: 0; background-repeat: repeat; background-size: 220px 220px; animation: matrixScroll 42s linear infinite; /* Tiled SVG with rows of 0/1 glyphs in neon green */ background-image: url("data:image/svg+xml;utf8,\ "); } /* Second layer: offset, slightly faster & softer to create parallax depth */ body.home-page.matrix::after { opacity: 0.22; filter: blur(0.6px); background-size: 260px 260px; animation-duration: 26s; animation-direction: reverse; background-position: 120px 0; } /* Soft scanlines for CRT vibe (very subtle) */ body.home-page.matrix .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; background: repeating-linear-gradient( to bottom, #000 0 2px, transparent 2px 4px ); } /* Neon headline & link tweaks */ body.home-page.matrix h1, body.home-page.matrix h2, body.home-page.matrix h3 { color: var(--matrix-primary); text-shadow: 0 0 8px rgba(0,255,156,0.5), 0 0 24px rgba(0,255,156,0.25); } body.home-page.matrix a { color: var(--matrix-accent); text-decoration: none; position: relative; } body.home-page.matrix a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--matrix-accent), transparent); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } body.home-page.matrix a:hover::after { transform: scaleX(1); } /* Glassy content card for readability over the rain */ main.home-page { position: relative; z-index: 2; /* above rain layers */ backdrop-filter: blur(4px) saturate(120%); background: rgba(4, 18, 10, 0.55); border: 1px solid rgba(0,255,156,0.35); box-shadow: 0 0 0 1px rgba(0,255,156,0.15) inset, 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0,255,156,0.12); } /* Homepage headline hero treatment */ h1.home-page { font-size: 3.2rem; letter-spacing: 0.02em; margin-bottom: 0.25rem; } p.home-page { color: var(--matrix-soft); text-shadow: 0 0 6px rgba(0,255,156,0.2); } /* Post list = glowing cards */ .post-links { margin-top: 1.25rem; } .post-links li { list-style: none; margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(0,255,156,0.18); background: rgba(6, 24, 14, 0.45); border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .post-links li:hover { transform: translateY(-2px); border-color: rgba(0,255,156,0.35); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(0,255,156,0.18); } /* Code blocks pop nicely on green palette */ pre code { background-color: #0e1411; color: #c9ffe5; border: 1px solid rgba(0,255,156,0.35); box-shadow: 0 4px 10px rgba(0,0,0,0.35); } pre code span.keyword { color: #7dffb5; } pre code span.string { color: #c1ff72; } pre code span.comment { color: #7affea; } pre code span.function { color: #9dffce; } /* Footer tint to match */ footer { border-top: 1px solid rgba(0,255,156,0.2); box-shadow: 0 -4px 20px rgba(0, 255, 156, 0.15), 0 -6px 35px rgba(0, 255, 156, 0.12); } /* Back-to-top button = pill neon */ .back-to-top { background: rgba(0, 255, 156, 0.15); color: var(--matrix-soft); border: 1px solid rgba(0, 255, 156, 0.35); backdrop-filter: blur(6px); } .back-to-top:hover { background: rgba(0, 255, 156, 0.25); } /* Accessibility: users who prefer reduced motion get a static backdrop */ @media (prefers-reduced-motion: reduce) { body.home-page.matrix::before, body.home-page.matrix::after { animation: none; background-attachment: fixed; opacity: 0.18; } } /* Keyframes for vertical scroll of tiled glyph sheet */ @keyframes matrixScroll { 0% { background-position: 0 0; } 100% { background-position: 0 2200px; } } h1, h2, h3 { font-family: 'Roboto', sans-serif; /* Use a clean sans-serif font for headings */ color: #F7882F; margin-bottom: 1rem; letter-spacing: 0.5px; /* Slight spacing for clarity */ text-transform: capitalize; /* Capitalize each word for a neat look */ } h1 { font-size: 2rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 600; /* Stronger weight for better readability */ line-height: 1.4; /* Improved line height for readability */ font-family: 'Helvetica Neue', Arial, sans-serif; } h3 { font-size: 1.1rem; font-weight: 400; } /* Header Styling */ header { text-align: center; color: white; padding: 0.5rem 2rem; /* Side padding for a spacious look */ border-radius: 10px; /* Rounded corners for a softer look */ margin: 1rem 0; /* Vertical margin to separate from other elements */ width: 100%; /* Full width of the window */ box-sizing: border-box; /* Ensure padding is included in total width */ } header h1 { margin: 0; } header p { font-family: 'Roboto', sans-serif; margin: 0.3rem 0; /* Reduced margin for a compact appearance */ color: #1ac6d9; /* White to blend in with the background */ opacity: 0.8; /* Slightly transparent for a softer look */ } header p strong { margin-left: 3rem; } header a { display: block; /* Make the link take its own line */ margin-top: 0.5rem; /* Space above the link */ text-decoration: underline; /* Optional: underline for emphasis */ font-size: 1rem; /* Slightly larger for emphasis */ } /* Image Styling */ img { /*width: 100%; /* Full width by default */ max-width: 50%; /* Limit the max width */ height: auto; /* Maintain aspect ratio */ display: block; margin: 1.5rem auto; } ul { color:#ececec; } ul li{ color:#ececec; line-height: 1.5rem; } .toc { padding: 15px; margin-bottom: 20px; text-align: center; /* Center the contents */ } .toc h2 { margin: 0 0 10px; color:#e7e978; } .toc ul { list-style-type: none; padding: 0; display: inline-block; text-align: left; } .toc li { margin: 5px 0; text-transform: capitalize; /* Capitalize each word for a neat look */ } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; } .toc div{ height: auto; width: 60%; } /*main body styling*/ article { max-width: 90%; margin: auto; padding: 1rem; border-radius: 8px; font-family: 'Merriweather', serif; } /* background: radial-gradient(circle at center, rgba(3, 2, 21, 0.7), rgba(2, 1, 43, 0.8)), conic-gradient(from 180deg at center, rgba(3, 2, 21, 0.1), rgba(2, 1, 43, 0.1), transparent); */ article h3 { color: #2980b9; } section { padding: 1rem; } section p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #ececec; /*color: #ececec #D9D9D9*/ letter-spacing: .01rem; line-height: 2rem; } /* Link Styling */ a { color: #15dbe2; text-decoration: none; } a:hover { text-decoration: underline; } p { font-size: 1rem; margin-top: 0.5rem; } .back-to-top { position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; font-size: 1rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: opacity 0.3s ease; opacity: 0.2; /* mostly transparent */ } .back-to-top:hover { background-color: #0056b3; opacity: 1; /* Fully opaque on hover */ } /* Code snippet Styling */ code { background-color: #1b1f3b; /* Dark indigo background */ color: #ffca28; /* Bright golden-yellow text */ padding: 2px 6px; font-family: "Courier New", Courier, monospace; font-size: 1rem; border-radius: 4px; border: 1px solid #ffca28; /* Golden border to match the text */ } pre code { display: block; padding: 15px; /* Increased padding for comfort */ overflow-x: auto; /* Allow horizontal scrolling */ background-color: #1c1c1c; /* Deep charcoal background */ color: #e0e6f1; /* Soft, light text */ border-radius: 8px; /* Slightly more rounded corners */ border: 1px solid #0a74da; /* Bright blue border */ white-space: pre-wrap; /* Maintain whitespace formatting */ font-family: 'Courier New', monospace; /* Monospace font for code */ font-size: 0.95rem; /* Slightly larger font size */ line-height: 1.5; /* Improved line spacing for readability */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */ margin: 1rem 0; /* Margin above and below for separation */ } pre code span.keyword { color: #ff6f61; /* Bright coral for keywords */ } pre code span.string { color: #f5f567; /* Bright yellow-green for strings */ } pre code span.comment { color: #f78da7; /* Bright pink for comments */ } pre code span.function { color: #79b8ff; /* Sky blue for function names */ } .post-date { display: block; /* Ensure it appears on a new line */ font-size: 0.9rem; /* Slightly smaller font size */ color: #66e5ec; /* Lighter gray color for subtlety */ margin-top: 4px; /* Space above the date for better separation */ font-style: italic; /* Italicize the date for emphasis */ } /* Navigation Styling */ nav { text-align: center; margin: 1.5rem; } nav a { margin: 0 20px; text-decoration: none; color: #2c3e50; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.1rem; } nav a:hover { color: #007bff; } /*End global styles*/ /* Footer Styling */ footer p { text-align: center; padding: 1rem; color: #e7e978; } footer { position: relative; padding: 1.5rem; text-align: center; border-radius: 0; /* full-width strip */ color: #fffcef; z-index: 1; overflow: hidden; /* Psychedelic animated gradient */ background: linear-gradient( 135deg, #ff00ff, #00ffff, #ffea00, #00ff88, #ff0088 ); background-size: 400% 400%; animation: footerPsychedelic 20s ease infinite; /* Glow */ box-shadow: 0 -4px 20px rgba(255, 0, 255, 0.3), 0 -6px 35px rgba(0, 255, 255, 0.25); } /* Overlay for readability */ footer::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); /* translucent dark layer */ z-index: -1; } /* Footer gradient animation */ @keyframes footerPsychedelic { 0% { background-position: 0% 50%; } 25% { background-position: 50% 100%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 0%; } 100% { background-position: 0% 50%; } } footer a { font-size: 1.1rem; color: #fffbea; text-decoration: none; margin: 0 1rem; transition: color 0.3s ease; } footer a:hover { color: #ffea00; } /*Post Links styles*/ .post-links { list-style: none; padding: 0; } .post-links li { margin: 15px 0; } .post-links a { font-size: 1.2rem; color: #fffcef; text-decoration: none; } .post-links a:hover { text-decoration: underline; } /* Index/Home page Styling */ h1.home-page { font-size: 3rem; font-family: 'Roboto', sans-serif; font-weight: 700; margin-bottom: 0.5rem; } p.home-page { font-size: 1.1rem; margin-bottom: 1.5rem; } div img{ height: 30%; width: 30%; object-fit: cover; } main.home-page { margin: 30px auto; max-width: 900px; padding: 2rem; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; background: linear-gradient(to bottom, rgba(3, 2, 21, 0.7), rgba(2, 1, 43, 0.8)); } /*main { position: relative; padding: 2rem; border-radius: 14px; max-width: 900px; margin: 2rem auto; Psychedelic animated gradient background: linear-gradient( 135deg, #ff00ff, #00ffff, #ffea00, #00ff88, #ff0088 ); background-size: 400% 400%; animation: mainPsychedelic 18s ease infinite; /* Add a glowing effect box-shadow: 0 0 25px rgba(255, 0, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.3); z-index: 1; overflow: hidden; /* keeps overlay rounded } /* Overlay for readability main::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); /* dark glassy layer border-radius: inherit; z-index: -1; } /* Keyframes for shifting gradient @keyframes mainPsychedelic { 0% { background-position: 0% 50%; } 25% { background-position: 50% 100%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 0%; } 100% { background-position: 0% 50%; } } */ body.home-page { font-family: 'Merriweather', serif; line-height: 1.7; margin: 0; padding: 0; } /*Contact page styles*/ body.contact-page { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; /* Use flexbox for layout */ flex-direction: column; /* Stack children vertically */ align-items: center; /* Center children horizontally */ justify-content: center; /* Center children vertically */ height: 100vh; /* Full viewport height */ } h1.contact-form { color: #333; /* Darker text color for the heading */ text-align: center; /* Center the heading text */ margin-bottom: 20px; /* Space below the heading */ } .contact-form { background-color: #fff; /* White background for the form */ border-radius: 8px; /* Rounded corners */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */ padding: 20px; /* Padding around the form */ max-width: 600px; /* Limit the width of the form */ width: 100%; /* Full width on small screens */ box-sizing: border-box; /* Include padding in total width */ } label { display: block; /* Labels on separate lines */ margin-bottom: 8px; /* Space below each label */ font-weight: bold; /* Bold labels for emphasis */ } input, textarea { width: 100%; /* Full width for inputs */ padding: 10px; /* Padding inside inputs */ margin-bottom: 15px; /* Space below each input */ border: 1px solid #ccc; /* Light gray border */ border-radius: 4px; /* Rounded corners */ } button { background-color: #0a74da; /* Button background color */ color: white; /* Button text color */ border: none; /* No border */ padding: 10px 15px; /* Padding for the button */ border-radius: 4px; /* Rounded corners for the button */ cursor: pointer; /* Pointer cursor on hover */ } button:hover { background-color: #0a5bbf; /* Darker blue on hover */ } /* Responsive Design for Smaller Screens */ @media (max-width: 768px) { header h1 { font-size: 1.75rem; /* Smaller header font on small screens */ } header p { font-size: 0.9rem; /* Adjusted subheading size */ } img { height: auto; width: 60%; /* Make the image smaller and dynamic on smaller screens */ } } /* ========================================= Homepage header layout (text left, image right) ========================================= */ /* Make header layout a simple vertical stack */ .home-hero { max-width: 900px; margin: 1rem auto; padding: 0 1rem; text-align: left; } /* Make p + image share baseline */ .home-hero p.home-page{ display:inline-flex; align-items:center; gap:0.8rem; } /* Circle = 2× text height */ .portal.matrix-portal{ --r: 0%; /* reveal radius */ --cx: 50%; --cy: 50%; display:inline-grid; place-items:center; width: 4em; /* 2× text size */ height: 4em; /* keep strictly square */ aspect-ratio: 1 / 1; /* belt + suspenders */ border-radius: 50%; overflow: hidden; background: #0b0f10; border: 1px solid rgba(0,255,156,.35); box-shadow: 0 0 8px rgba(0,255,156,.2), inset 0 0 0 1px rgba(0,255,156,.1); position: relative; flex-shrink: 0; } /* IMAGE — make it truly fill the circle */ .portal.matrix-portal .photo{ display: block; /* remove inline image baseline gap */ width: 100%; height: 100%; min-width: 100%; /* guard against intrinsic sizing quirks */ min-height: 100%; object-fit: cover; /* fill without distortion */ border-radius: 0; /* let the container do the rounding */ /* Reveal via crisp circular clip; start at 0 from center */ -webkit-clip-path: circle(var(--r) at var(--cx) var(--cy)); clip-path: circle(var(--r) at var(--cx) var(--cy)); transition: clip-path .35s ease, -webkit-clip-path .35s ease, filter .3s ease, transform .3s ease; } /* Placeholder target inside circle */ .portal.matrix-portal::before{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(0,255,156,.26) 0 42%, transparent 44%) center/75% 75% no-repeat, repeating-radial-gradient(circle at 50% 50%, rgba(0,255,156,.16) 0 2px, transparent 2px 6px); opacity:.9; transition:opacity .25s ease; pointer-events:none; } /* Hint chip (optional) */ .portal.matrix-portal::after{ content:attr(data-hint); position:absolute; left:50%; bottom:-1.3rem; transform:translateX(-50%); font:600 .55rem/1 ui-sans-serif, system-ui, Roboto, Arial; letter-spacing:.08em; text-transform:uppercase; color:#aaffda; background:rgba(0,0,0,.5); padding:.15rem .4rem; border-radius:999px; border:1px solid rgba(0,255,156,.3); opacity:.85; transition:opacity .25s ease, transform .25s ease; } /* HOVER — reveal ALL of the circle (go beyond 50% to be safe) */ .portal.matrix-portal:hover{ --r: 75%; } /* 50% hits edge; 75% guarantees full coverage */ .portal.matrix-portal:hover .photo{ filter: brightness(1) saturate(1.05); transform: scale(1.004); /* micro up-scale to avoid 1px seams on some GPUs */ } .portal.matrix-portal:hover::before, .portal.matrix-portal:hover::after{ opacity:0; transform:translateX(-50%) translateY(3px); } /* Optional cursor-centered opening */ @media (pointer: fine){ .portal.matrix-portal{ cursor: pointer; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .portal.matrix-portal{ --r: 75%; } .portal.matrix-portal .photo{ transition: none; } }