/* ======================================== CSS VARIABLES - Central Configuration Change these to customize the entire theme! ======================================== */:root{/* === PRIMARY COLORS === */ --primary-color:#b74b4b;/* Main accent color (your red) */ --primary-light:#ff6b6b;/* Lighter variant */ --primary-dark:#8a3636;/* Darker variant */ --primary-glow:rgba(183, 75, 75, 0.5);/* Glow effect */ /* === BACKGROUND COLORS === */ --bg-dark:#0a0a0a;/* Darkest background */ --bg-card:rgba(15, 5, 5, 0.95);/* Card/panel background */ --bg-card-light:rgba(25, 10, 10, 0.95);/* === TEXT COLORS === */ --text-primary:#ffffff;--text-secondary:rgba(255, 255, 255, 0.8);--text-muted:rgba(255, 255, 255, 0.6);/* === FONTS === */ --font-primary:'Poppins', sans-serif;--font-heading:'Raleway', sans-serif;--font-mono:'Roboto Mono', monospace;--font-display:'Playfair Display', serif;/* === BOOK DIMENSIONS (Adjust these for size!) === */ /* COVER (closed book) */ --cover-width:55rem;/* Closed cover width (increased 10%) */ --cover-height:75rem;/* Closed cover height (increased 10%) */ /* BOOK (open state) */ --book-width:100rem;/* Open book width (increased ~10%) */ --book-height:70rem;/* Open book height (increased ~10%) */ /* === SPACING === */ --spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;/* === BORDERS === */ --border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;/* === TRANSITIONS === */ --transition-fast:0.3s ease;--transition-normal:0.5s ease;--transition-slow:0.8s cubic-bezier(0.645, 0.045, 0.355, 1);/* === Z-INDEX LAYERS === */ --z-background:-2;--z-vignette:1;--z-content:10;--z-navigation:100;--z-modal:200;--z-loader:10000}/* ======================================== CSS RESET & TYPOGRAPHY BASE ======================================== */ /* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');/* Box Sizing */ *{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;/* 1rem = 10px */ -webkit-text-size-adjust:100%;/* Prevent font scaling in landscape */ -moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:'Poppins', sans-serif;width:100%;height:100vh;overflow:hidden;background:#0a0a0a;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* Scrollbar - Cyber Theme */::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#b74b4b;border-radius:2px;box-shadow:0 0 10px rgba(183, 75, 75, 0.5)}::-webkit-scrollbar-track{background:rgba(183, 75, 75, 0.1)}/* ======================================== TYPOGRAPHY STYLES ======================================== */ h1, h2, h3, h4{font-family:var(--font-heading);font-weight:700;color:var(--text-primary)}h1{font-size:4.5rem;letter-spacing:6px;text-transform:uppercase;text-shadow:0 0 10px var(--primary-glow), 0 0 30px rgba(183, 75, 75, 0.4), 0 0 60px rgba(183, 75, 75, 0.2)}h2{font-size:2.4rem;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 10px var(--primary-glow)}h3{font-size:2rem;letter-spacing:2px}h4{font-size:1.6rem;margin-bottom:0.8rem;color:var(--primary-color)}p{font-size:1.4rem;line-height:1.7;color:var(--text-secondary)}a{color:var(--primary-color);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--primary-light);text-shadow:0 0 10px var(--primary-glow)}.highlight{color:var(--primary-color);font-weight:600}.quote{font-family:var(--font-display);font-style:italic;font-size:1.4rem;color:var(--primary-color);border-left:2px solid var(--primary-color);padding-left:var(--spacing-md);margin:var(--spacing-lg) 0;opacity:0.9}/* ======================================== ANIMATED CYBER BACKGROUND (Fast Loading) Replaces YouTube video for better performance ======================================== */ .cyber-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-background);background:radial-gradient(ellipse at 20% 80%, rgba(183, 75, 75, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(100, 30, 30, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(20, 5, 5, 0.95) 0%, #0a0505 100%);overflow:hidden}/* Animated Grid */ .cyber-grid{position:absolute;top:0;left:0;width:200%;height:200%;background-image:linear-gradient(rgba(183, 75, 75, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 75, 75, 0.1) 1px, transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite;transform:perspective(500px) rotateX(60deg);transform-origin:center top;opacity:0.5}@keyframes gridMove{0%{transform:perspective(500px) rotateX(60deg) translateY(0)}100%{transform:perspective(500px) rotateX(60deg) translateY(50px)}}/* Floating Particles */ .cyber-particles{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px, rgba(183, 75, 75, 0.8), transparent), radial-gradient(2px 2px at 40px 70px, rgba(255, 100, 100, 0.6), transparent), radial-gradient(1px 1px at 90px 40px, rgba(183, 75, 75, 0.9), transparent), radial-gradient(2px 2px at 130px 80px, rgba(183, 75, 75, 0.7), transparent), radial-gradient(1px 1px at 160px 120px, rgba(255, 150, 150, 0.5), transparent), radial-gradient(2px 2px at 200px 50px, rgba(183, 75, 75, 0.8), transparent), radial-gradient(1px 1px at 250px 90px, rgba(183, 75, 75, 0.6), transparent), radial-gradient(2px 2px at 300px 60px, rgba(255, 80, 80, 0.7), transparent);background-size:350px 150px;animation:particleFloat 15s ease-in-out infinite}@keyframes particleFloat{0%, 100%{transform:translateY(0) translateX(0);opacity:0.8}25%{transform:translateY(-20px) translateX(10px);opacity:1}50%{transform:translateY(-10px) translateX(-5px);opacity:0.6}75%{transform:translateY(-30px) translateX(15px);opacity:0.9}}/* Scan Line Effect */ .cyber-scan{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(183, 75, 75, 0.03) 2px, rgba(183, 75, 75, 0.03) 4px );pointer-events:none}.cyber-scan::after{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg, transparent, rgba(183, 75, 75, 0.5), rgba(255, 100, 100, 0.8), rgba(183, 75, 75, 0.5), transparent);animation:scanLine 4s linear infinite;box-shadow:0 0 20px rgba(183, 75, 75, 0.5)}@keyframes scanLine{0%{top:-5px}100%{top:100%}}/* Dark Overlay */ .cyber-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.2);pointer-events:none}/* Vignette Effect */ .vignette{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-vignette);background:radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%)}/* Code Rain Effect (optional - adds floating code) */ .cyber-background::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg, rgba(183, 75, 75, 0.1) 0%, transparent 10%, transparent 90%, rgba(183, 75, 75, 0.1) 100%);pointer-events:none;animation:codeRain 3s ease-in-out infinite}@keyframes codeRain{0%, 100%{opacity:0.3}50%{opacity:0.6}}/* ======================================== LAYOUT - MAIN CONTAINER ======================================== */ .container{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;position:relative;z-index:var(--z-content)}/* ======================================== TWO-PAGE SPREAD LAYOUT ======================================== */ .two-page-spread{display:flex;height:100%;gap:2rem}.spread-left, .spread-right{flex:1;padding:1.5rem;overflow-y:auto;position:relative}.spread-left{border-right:1px solid rgba(183, 75, 75, 0.2);padding-right:2rem;background:var(--bg-dark);z-index:2}.spread-right{padding-left:2rem}/* Spine shadow effect */ .spread-left::after{content:'';position:absolute;top:0;left:50%;width:40px;height:100%;background:linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);pointer-events:none}/* ======================================== LOADER COMPONENT ======================================== */ .loader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-dark);display:flex;justify-content:center;align-items:center;z-index:var(--z-loader);transition:opacity var(--transition-normal)}.loader-content{text-align:center}.loader-book{position:relative;width:80px;height:60px;margin:0 auto var(--spacing-lg)}.loader-page{position:absolute;width:40px;height:60px;background:linear-gradient(90deg, rgba(183, 75, 75, 0.3), rgba(183, 75, 75, 0.1));border-radius:0 4px 4px 0;transform-origin:left center;left:20px;box-shadow:0 0 15px rgba(183, 75, 75, 0.3);border:1px solid rgba(183, 75, 75, 0.5)}.loader-page:nth-child(1){animation:flipPage 1.5s ease-in-out infinite;z-index:3}.loader-page:nth-child(2){animation:flipPage 1.5s ease-in-out infinite 0.2s;z-index:2}.loader-page:nth-child(3){animation:flipPage 1.5s ease-in-out infinite 0.4s;z-index:1}@keyframes flipPage{0%, 100%{transform:rotateY(0)}50%{transform:rotateY(-180deg)}}.loader-text{font-family:var(--font-mono);font-size:1.4rem;color:var(--primary-color);letter-spacing:3px;text-transform:uppercase;animation:cyberBlink 1.5s ease-in-out infinite;text-shadow:0 0 10px var(--primary-glow)}@keyframes cyberBlink{0%, 100%{opacity:0.6}50%{opacity:1}}/* ======================================== NAVIGATION COMPONENTS ======================================== */ /* === SIDE NAVIGATION BUTTONS === */ .nav-button.side-nav{position:fixed;top:50%;transform:translateY(-50%);width:5rem;height:10rem;border:2px solid rgba(183, 75, 75, 0.6);background:var(--bg-card);color:var(--primary-color);font-size:3rem;cursor:pointer;transition:all var(--transition-fast);display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);box-shadow:0 0 20px rgba(183, 75, 75, 0.2);z-index:var(--z-navigation);opacity:0;pointer-events:none}/* POSITION CLOSER TO BOOK - Adjust these values! */ .nav-button.side-nav.prev-btn{left:calc(50% - var(--book-width)/2 - 6rem);/* Position near book edge */ border-radius:var(--border-radius-md) 0 0 var(--border-radius-md);border-right:none}.nav-button.side-nav.next-btn{right:calc(50% - var(--book-width)/2 - 6rem);/* Position near book edge */ border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;border-left:none}.nav-button.side-nav.visible{display:flex;opacity:1;pointer-events:auto}.nav-button.side-nav:hover{background:rgba(183, 75, 75, 0.3);color:var(--text-primary);box-shadow:0 0 40px rgba(183, 75, 75, 0.6);border-color:var(--primary-color)}.nav-button.side-nav:disabled{opacity:0.2;cursor:not-allowed}.nav-button.side-nav:disabled:hover{background:var(--bg-card);color:var(--primary-color);box-shadow:0 0 20px rgba(183, 75, 75, 0.2)}.btn-icon{line-height:1}/* === PAGE INDICATOR === */ .page-indicator{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:1.4rem;color:var(--primary-color);background:var(--bg-card);padding:0.8rem 2rem;border-radius:2rem;border:1px solid rgba(183, 75, 75, 0.4);backdrop-filter:blur(10px);min-width:8rem;text-align:center;text-shadow:0 0 10px var(--primary-glow);box-shadow:0 0 20px rgba(183, 75, 75, 0.15);z-index:var(--z-navigation);opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.page-indicator.visible{opacity:1}/* === FLOATING EMAIL === */ .floating-email{position:fixed;top:var(--spacing-lg);left:var(--spacing-lg);display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;background:var(--bg-card);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.3);backdrop-filter:blur(10px);z-index:var(--z-navigation);opacity:1;pointer-events:auto;transition:all 0.4s ease;box-shadow:0 0 20px rgba(183, 75, 75, 0.1)}.floating-email.visible{opacity:1;pointer-events:auto}.floating-email:hover{background:rgba(183, 75, 75, 0.15);border-color:var(--primary-color);box-shadow:0 0 30px rgba(183, 75, 75, 0.3);transform:translateX(5px)}.email-label{font-family:var(--font-mono);font-size:1rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}.email-address{font-family:var(--font-primary);font-size:1.2rem;color:var(--primary-color);font-weight:500;text-shadow:0 0 10px var(--primary-glow)}/* === TOC TOGGLE BUTTON === */ .toc-toggle{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);width:4rem;height:4rem;background:var(--bg-card);border:1px solid rgba(183, 75, 75, 0.4);border-radius:var(--border-radius-md);color:var(--primary-color);font-size:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);z-index:var(--z-modal);transition:all var(--transition-fast);box-shadow:0 0 20px rgba(183, 75, 75, 0.1);/* Hidden until book is opened */ opacity:0;pointer-events:none;transform:translateY(-20px)}/* Show TOC toggle only when book is open */ .toc-toggle.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.toc-toggle:hover{background:rgba(183, 75, 75, 0.2);border-color:var(--primary-color);box-shadow:0 0 30px rgba(183, 75, 75, 0.3)}/* ======================================== BOOK COMPONENT (Open State) ======================================== */ .book{position:absolute;width:var(--book-width);height:var(--book-height);transform-style:preserve-3d;opacity:0;pointer-events:none;transition:opacity var(--transition-normal) 0.3s}.book.visible{opacity:1;pointer-events:auto}/* Close Button Wrapper */ .close-btn-wrapper{position:absolute;top:10px;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;background:rgba(10, 5, 5, 0.9);padding:5px;border-radius:4px;border:1px solid rgba(183, 75, 75, 0.3)}/* Hide close button on About Me page (page 6) */ .book[data-current-page="6"] .close-btn-wrapper{display:none !important}.book.visible .close-btn-wrapper{opacity:1;pointer-events:auto}/* ======================================== BOOK CLOSE BUTTON (Top Right of Book) ======================================== */ .book-close-btn{position:relative;order:2;width:32px;height:32px;background:transparent;border:1px solid rgba(183, 75, 75, 0.5);border-radius:2px;color:rgba(183, 75, 75, 0.7);font-size:20px;font-weight:300;font-family:var(--font-mono);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:all var(--transition-fast)}.book-close-btn:hover{color:var(--primary-color);border-color:var(--primary-color);background:rgba(183, 75, 75, 0.1);text-shadow:0 0 10px var(--primary-glow);box-shadow:0 0 15px rgba(183, 75, 75, 0.2)}.book-close-btn:active{transform:scale(0.95)}/* Close Button Tooltip - ABOVE the X button */ .close-tooltip{position:relative;order:1;margin-bottom:8px;background:rgba(10, 5, 5, 0.95);border:1px solid var(--primary-color);border-radius:4px;padding:5px 10px;font-family:var(--font-mono);font-size:10px;color:var(--primary-color);white-space:nowrap;opacity:0;transform:translateY(5px);pointer-events:none;box-shadow:0 0 15px rgba(183, 75, 75, 0.3)}/* Arrow pointing DOWN to the X button */ .close-tooltip::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--primary-color)}.close-tooltip.show{animation:tooltipShowAbove 3s ease-in-out forwards}@keyframes tooltipShowAbove{0%{opacity:0;transform:translateY(5px)}10%{opacity:1;transform:translateY(0)}15%, 85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5px)}}/* Pulse animation on button when tooltip shows */ .book-close-btn.attention{animation:closeAttention 0.5s ease-in-out 3}@keyframes closeAttention{0%, 100%{border-color:rgba(183, 75, 75, 0.5);box-shadow:none}50%{border-color:var(--primary-color);box-shadow:0 0 15px rgba(183, 75, 75, 0.5)}}/* Book Spine (Open) */ .book::before{content:'';position:absolute;left:50%;transform:translateX(-50%);top:-5px;width:30px;height:calc(100% + 10px);background:linear-gradient(90deg, #0a0505 0%, #1a0a0a 20%, var(--primary-color) 50%, #1a0a0a 80%, #0a0505 100%);border-radius:5px;box-shadow:0 0 30px var(--primary-glow), 0 0 60px rgba(183, 75, 75, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5);z-index:100;transition:opacity 0.5s ease}/* Hide spine on last page (back cover) */ .book.hide-spine::before{opacity:0;pointer-events:none}/* ======================================== PAGES ======================================== */ .page{position:absolute;width:50%;height:100%;right:0;transform-style:preserve-3d;transform-origin:left center;transition:transform var(--transition-slow);cursor:default}/* Spread Page - Full width */ .page.spread-page{width:100%;left:0;right:0;transform-origin:center center}.page.spread-page .page-front{width:100%;border-radius:var(--border-radius-md)}.page.spread-page .page-back{display:none}/* Page stacking order */ .page[data-page="1"]{z-index:7}.page[data-page="2"]{z-index:6}.page[data-page="3"]{z-index:5}.page[data-page="4"]{z-index:4}.page[data-page="5"]{z-index:3}.page[data-page="6"]{z-index:2}.page[data-page="7"]{z-index:1}.page.flipped{transform:rotateY(-180deg);z-index:0 !important}.page.spread-page.flipped{transform:scale(0);opacity:0}/* Page Front & Back */ .page-front, .page-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;overflow:hidden;border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;box-shadow:5px 5px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(183, 75, 75, 0.1), inset 0 0 50px rgba(183, 75, 75, 0.05)}.page-back{transform:rotateY(180deg);border-radius:var(--border-radius-md) 0 0 var(--border-radius-md)}/* Page Texture */ .page-texture{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg, rgba(15, 5, 5, 0.98) 0%, rgba(25, 10, 10, 0.95) 50%, rgba(15, 5, 5, 0.98) 100%)}.page-texture::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(183, 75, 75, 0.02) 3px, rgba(183, 75, 75, 0.02) 6px), linear-gradient(90deg, rgba(183, 75, 75, 0.05) 0%, transparent 5%, transparent 95%, rgba(183, 75, 75, 0.05) 100%);animation:pageScan 10s linear infinite}@keyframes pageScan{0%{background-position:0 0}100%{background-position:0 200px}}/* Page Content */ .page-content{position:relative;z-index:1;height:100%;padding:2.5rem;overflow-y:auto}/* Page Number */ .page-number{position:absolute;bottom:1.5rem;font-family:var(--font-mono);font-size:1.2rem;font-style:normal;color:var(--primary-color);text-shadow:0 0 10px var(--primary-glow);z-index:2;letter-spacing:2px}.page-front .page-number{right:2rem}.page-front .page-number.left-num{left:2rem;right:auto}.page-front .page-number.right-num{right:2rem;left:auto}.page-back .page-number{left:2rem}/* ======================================== BOOK COVER COMPONENT (Closed State) ======================================== */ .book-wrapper{perspective:3000px;display:flex;justify-content:center;align-items:center}.book-cover{position:relative;width:var(--cover-width);height:var(--cover-height);cursor:pointer;transform-style:preserve-3d;transition:transform var(--transition-slow);animation:coverFloat 4s ease-in-out infinite}@keyframes coverFloat{0%, 100%{transform:translateY(0) rotateY(-5deg)}50%{transform:translateY(-10px) rotateY(-5deg)}}.book-cover:hover{animation-play-state:paused;transform:translateY(-10px) rotateY(-15deg) scale(1.02)}.book-cover.opened{transform:rotateY(-180deg) scale(0);opacity:0;pointer-events:none}/* Cover Front - Cyber Glass */ .cover-front{position:absolute;width:100%;height:100%;background:linear-gradient(135deg, rgba(15, 5, 5, 0.95) 0%, rgba(30, 10, 10, 0.9) 50%, rgba(15, 5, 5, 0.95) 100%);border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;box-shadow:0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(183, 75, 75, 0.15), inset 0 0 100px rgba(183, 75, 75, 0.05), -5px 0 20px rgba(0, 0, 0, 0.5);overflow:hidden;border:2px solid rgba(183, 75, 75, 0.4)}/* Cover Texture Overlay */ .cover-texture{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(183, 75, 75, 0.03) 2px, rgba(183, 75, 75, 0.03) 4px), linear-gradient(135deg, rgba(183, 75, 75, 0.1) 0%, transparent 50%), linear-gradient(225deg, rgba(100, 20, 20, 0.1) 0%, transparent 50%);pointer-events:none;animation:scanMove 8s linear infinite}@keyframes scanMove{0%{background-position:0 0}100%{background-position:0 100px}}/* Cover Spine */ .cover-spine{position:absolute;left:0;top:0;width:25px;height:100%;background:linear-gradient(90deg, #0a0505 0%, #1a0a0a 30%, var(--primary-color) 50%, #1a0a0a 70%, #0a0505 100%);border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);box-shadow:inset -5px 0 15px rgba(0, 0, 0, 0.8), 5px 0 20px rgba(183, 75, 75, 0.3)}/* ======================================== PROFILE PHOTO ON COVER ======================================== */ .cover-photo{position:relative;width:14rem;height:14rem;margin-bottom:1.5rem}.profile-img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--primary-color);box-shadow:0 0 30px rgba(183, 75, 75, 0.5), 0 0 60px rgba(183, 75, 75, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);animation:photoGlow 3s ease-in-out infinite}.photo-glow{position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);border-radius:50%;background:transparent;border:2px solid transparent;box-shadow:0 0 20px rgba(183, 75, 75, 0.6), 0 0 40px rgba(183, 75, 75, 0.3);animation:glowPulse 2s ease-in-out infinite;pointer-events:none}@keyframes photoGlow{0%, 100%{box-shadow:0 0 30px rgba(183, 75, 75, 0.5), 0 0 60px rgba(183, 75, 75, 0.3)}50%{box-shadow:0 0 40px rgba(183, 75, 75, 0.7), 0 0 80px rgba(183, 75, 75, 0.4)}}@keyframes glowPulse{0%, 100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.05);opacity:1}}/* Cover Content */ .cover-content{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:var(--spacing-xl);text-align:center;z-index:1}.cover-ornament{width:120px;height:30px;background:linear-gradient(90deg, transparent, var(--primary-color), transparent);opacity:0.6;clip-path:polygon(0% 50%, 10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%)}.cover-ornament.top{margin-bottom:var(--spacing-sm)}.cover-ornament.bottom{margin-top:var(--spacing-sm)}.cover-year{font-family:var(--font-mono);font-size:1.4rem;color:var(--primary-color);letter-spacing:6px;text-shadow:0 0 10px var(--primary-glow)}.cover-divider{width:15rem;height:2px;background:linear-gradient(90deg, transparent, var(--primary-color), var(--primary-light), transparent);margin:var(--spacing-md) 0;box-shadow:0 0 10px var(--primary-glow)}/* ======================================== RDR2 STYLE FONT OPTIONS Add these classes to .cover-title and .cover-author ======================================== */ /* OPTION 1:Rye - Classic Western Saloon Style */ .rdr2-style-1{font-family:'Rye', cursive !important;text-transform:uppercase;letter-spacing:4px}.cover-title.rdr2-style-1{font-size:5rem;color:#d4a574;text-shadow:2px 2px 0 #8b4513, 4px 4px 0 rgba(139, 69, 19, 0.5), 0 0 20px rgba(212, 165, 116, 0.5), 0 0 40px rgba(183, 75, 75, 0.3)}.cover-author.rdr2-style-1{font-size:3rem;color:var(--primary-color);text-shadow:2px 2px 0 #5a2a2a, 0 0 15px var(--primary-glow)}/* OPTION 2:Cinzel - Elegant Roman/Western Style */ .rdr2-style-2{font-family:'Cinzel', serif !important;text-transform:uppercase;letter-spacing:8px}.cover-title.rdr2-style-2{font-size:4.5rem;color:#c9a86c;background:linear-gradient(180deg, #e8d5a3 0%, #c9a86c 50%, #8b6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px rgba(201, 168, 108, 0.5))}.cover-author.rdr2-style-2{font-size:2.8rem;color:var(--primary-color);letter-spacing:12px}/* OPTION 3:UnifrakturMaguntia - Old English Gothic */ .rdr2-style-3{font-family:'UnifrakturMaguntia', cursive !important;text-transform:none}.cover-title.rdr2-style-3{font-size:5.5rem;color:#c4a35a;text-shadow:3px 3px 0 #2a1a0a, 0 0 30px rgba(196, 163, 90, 0.6);letter-spacing:2px}.cover-author.rdr2-style-3{font-size:3.5rem;color:var(--primary-color)}/* OPTION 4:IM Fell English SC - Vintage Newspaper Style */ .rdr2-style-4{font-family:'IM Fell English SC', serif !important;text-transform:uppercase;letter-spacing:6px}.cover-title.rdr2-style-4{font-size:5rem;color:#d9c8a0;text-shadow:1px 1px 0 #3a2a1a, 2px 2px 0 rgba(58, 42, 26, 0.5), 0 0 20px rgba(217, 200, 160, 0.4)}.cover-author.rdr2-style-4{font-size:3rem;color:var(--primary-color);letter-spacing:8px}/* Default Cover Title/Author (no RDR2 class) */ .cover-title{font-family:var(--font-heading);font-size:4.5rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 10px var(--primary-glow), 0 0 30px rgba(183, 75, 75, 0.4), 0 0 60px rgba(183, 75, 75, 0.2);letter-spacing:6px;text-transform:uppercase}.cover-subtitle{font-size:2rem;color:var(--text-muted);font-style:normal;letter-spacing:4px;margin:0.5rem 0}.cover-author{font-family:var(--font-heading);font-size:3.5rem;font-weight:700;color:var(--primary-color);letter-spacing:10px;text-shadow:0 0 10px var(--primary-glow), 0 0 30px rgba(183, 75, 75, 0.4)}.cover-tagline{font-family:var(--font-mono);font-size:1.3rem;color:rgba(183, 75, 75, 0.8);line-height:1.8;margin-top:var(--spacing-sm);letter-spacing:2px}.click-to-open{position:absolute;bottom:var(--spacing-lg);font-family:var(--font-mono);font-size:1.2rem;color:var(--primary-color);letter-spacing:3px;text-transform:uppercase;animation:cyberPulse 2s ease-in-out infinite}@keyframes cyberPulse{0%, 100%{opacity:0.4;text-shadow:0 0 5px rgba(183, 75, 75, 0.3)}50%{opacity:1;text-shadow:0 0 20px var(--primary-glow)}}/* ======================================== GLITCH TEXT EFFECT ======================================== */ .glitch-text{position:relative}.glitch-text.animated{animation:glitchMain 3s ease-in-out infinite}.glitch-text::before, .glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.glitch-text.animated::before{color:#ff0000;animation:glitchBefore 3s ease-in-out infinite;clip-path:polygon(0 0, 100% 0, 100% 45%, 0 45%)}.glitch-text.animated::after{color:#00ffff;animation:glitchAfter 3s ease-in-out infinite;clip-path:polygon(0 55%, 100% 55%, 100% 100%, 0 100%)}/* ======================================== COVER ANIMATION - Fade In + Typing ======================================== */ .cover-animate{opacity:0;transform:translateY(10px);transition:opacity 0.5s ease, transform 0.5s ease}.cover-animate.show{opacity:1;transform:translateY(0)}/* Typing cursor */ .typing-effect.typing::after{content:'|';color:var(--primary-color);animation:blink 0.5s step-end infinite;margin-left:2px}@keyframes blink{0%, 100%{opacity:1}50%{opacity:0}}@keyframes glitchMain{0%, 90%, 100%{transform:translate(0)}92%{transform:translate(-2px, 1px)}94%{transform:translate(2px, -1px)}96%{transform:translate(-1px, 2px)}98%{transform:translate(1px, -2px)}}@keyframes glitchBefore{0%, 90%, 100%{opacity:0;transform:translate(0)}92%{opacity:0.8;transform:translate(-3px, 0)}94%{opacity:0;transform:translate(3px, 0)}96%{opacity:0.8;transform:translate(-2px, 0)}98%{opacity:0;transform:translate(2px, 0)}}@keyframes glitchAfter{0%, 90%, 100%{opacity:0;transform:translate(0)}91%{opacity:0;transform:translate(0)}93%{opacity:0.8;transform:translate(3px, 0)}95%{opacity:0;transform:translate(-3px, 0)}97%{opacity:0.8;transform:translate(2px, 0)}99%{opacity:0;transform:translate(-2px, 0)}}/* ======================================== TYPING TEXT ANIMATION ======================================== */ .type-text, .type-reveal{opacity:0;transform:translateY(10px)}.type-text.visible, .type-reveal.visible{animation:typeReveal 0.6s ease forwards}@keyframes typeReveal{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}/* Typing cursor effect for text elements */ .type-text.typing::after{content:'_';animation:typingCursor 0.5s step-end infinite}@keyframes typingCursor{0%, 100%{opacity:1}50%{opacity:0}}/* ======================================== TERMINAL COMPONENT ======================================== */ .terminal-header{display:flex;align-items:center;padding:0.8rem 1.2rem;background:rgba(30, 10, 10, 0.8);border-bottom:1px solid rgba(183, 75, 75, 0.2);gap:0.6rem}.terminal-title{margin-left:auto;font-family:var(--font-mono);font-size:1.1rem;color:var(--text-muted)}.terminal-line{margin-bottom:0.4rem;opacity:0;animation:terminalFade 0.3s ease forwards}@keyframes terminalFade{to{opacity:1}}.terminal-line .prompt{color:#27c93f}.terminal-line .command{color:var(--text-primary)}.terminal-line .output{color:var(--text-secondary)}.terminal-line .success{color:#27c93f}.terminal-line .error{color:#ff5f56}.terminal-line .warning{color:#ffbd2e}.terminal-line .highlight{color:var(--primary-color)}.terminal-cursor{display:inline-block;width:8px;height:1.4rem;background:var(--primary-color);animation:cursorBlink 1s step-end infinite;vertical-align:middle;margin-left:2px}@keyframes cursorBlink{0%, 100%{opacity:1}50%{opacity:0}}/* ======================================== TABLE OF CONTENTS PANEL ======================================== */ .toc-panel{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);width:28rem;max-height:45rem;background:linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-light) 50%, var(--bg-card) 100%);border-radius:var(--border-radius-md);box-shadow:0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(183, 75, 75, 0.15), inset 0 0 50px rgba(183, 75, 75, 0.05);border:2px solid rgba(183, 75, 75, 0.4);z-index:var(--z-modal);opacity:0;pointer-events:none;transform:translateX(20px);transition:all var(--transition-fast);overflow:hidden}.toc-panel.visible{opacity:1;pointer-events:auto;transform:translateX(0)}.toc-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid rgba(183, 75, 75, 0.3)}.toc-header h3{font-family:var(--font-mono);font-size:1.4rem;color:var(--primary-color);letter-spacing:3px;text-shadow:0 0 10px var(--primary-glow)}.toc-close{background:none;border:none;color:var(--text-muted);font-size:2rem;cursor:pointer;padding:0;line-height:1;transition:all var(--transition-fast)}.toc-close:hover{color:var(--primary-color);text-shadow:0 0 10px var(--primary-glow)}.toc-list{list-style:none;padding:var(--spacing-sm) 0;max-height:35rem;overflow-y:auto}.toc-link{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;color:var(--text-secondary);transition:all var(--transition-fast);border-left:2px solid transparent}.toc-link:hover{background:rgba(183, 75, 75, 0.1);border-left-color:var(--primary-color)}.toc-title{font-family:var(--font-mono);font-size:1.2rem;letter-spacing:1px}.toc-page{font-family:var(--font-mono);font-size:1.1rem;color:var(--primary-color);opacity:0.7}/* ======================================== INTRO PAGE STYLES ======================================== */ .intro-page{display:flex;flex-direction:column;justify-content:center;height:100%;text-align:center;padding:var(--spacing-lg)}.intro-title{font-family:var(--font-mono);font-size:3.5rem;color:var(--primary-color);letter-spacing:4px;margin-bottom:var(--spacing-md);text-shadow:0 0 20px var(--primary-glow)}.intro-divider{width:10rem;height:2px;background:linear-gradient(90deg, transparent, var(--primary-color), transparent);margin:0 auto var(--spacing-lg)}/* Book Index on Intro Page */ .book-index{text-align:left;max-width:350px;margin:0 auto var(--spacing-lg)}.index-item{display:flex;align-items:center;gap:1.2rem;padding:1rem 0;border-bottom:1px solid rgba(183, 75, 75, 0.2);font-family:var(--font-mono);font-size:1.6rem;color:var(--text-secondary)}.index-item:last-child{border-bottom:none}.index-num{font-size:1.4rem;color:var(--primary-color);min-width:2.5rem}.render-time{margin-top:var(--spacing-lg);padding:var(--spacing-sm);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-sm);border:1px solid rgba(183, 75, 75, 0.2)}.render-label{font-family:var(--font-mono);font-size:1.4rem;color:var(--text-muted)}.render-value{font-family:var(--font-mono);font-size:1.5rem;color:#27c93f;margin-left:0.5rem}/* ======================================== WELCOME TERMINAL ======================================== */ /* Terminal fills left page completely */ .terminal-full{padding:0 !important;border-right:none !important}.terminal-full .welcome-terminal{height:100%;border-radius:0;border:none;border-right:1px solid rgba(183, 75, 75, 0.3)}.welcome-terminal{height:100%;display:flex;flex-direction:column;background:rgba(5, 5, 5, 0.98);border:1px solid rgba(183, 75, 75, 0.4);border-radius:8px;overflow:hidden}.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;background:rgba(30, 15, 15, 0.95);border-bottom:2px solid rgba(183, 75, 75, 0.4)}.terminal-buttons{display:flex;gap:10px}.term-btn{width:16px;height:16px;border-radius:50%}.term-btn.red{background:#ff5f56}.term-btn.yellow{background:#ffbd2e}.term-btn.green{background:#27c93f}.terminal-title{font-family:var(--font-mono);font-size:1.6rem;color:var(--text-secondary)}.terminal-content{flex:1;padding:40px;overflow-y:auto;font-family:var(--font-mono);font-size:1.5rem;line-height:1.6}.term-line{margin-bottom:8px;opacity:0;transform:translateY(5px);animation:termLineShow 0.3s ease forwards}@keyframes termLineShow{to{opacity:1;transform:translateY(0)}}.term-line .prompt{color:#27c93f}.term-line .command{color:#fff}.term-line .output{color:var(--text-secondary)}.term-line .highlight{color:var(--primary-color);font-weight:600}.term-line .comment{color:var(--text-muted);font-style:italic}.term-cursor{display:inline-block;width:14px;height:1.8rem;background:var(--primary-color);animation:cursorBlink 1s step-end infinite;vertical-align:middle;margin-left:4px}@keyframes cursorBlink{0%, 100%{opacity:1}50%{opacity:0}}/* ======================================== ABOUT / PROFILE PAGE STYLES ======================================== */ .page-header{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(183, 75, 75, 0.3)}.page-header h2{font-family:var(--font-mono);font-size:3rem}/* Page 02 & 04 - Match Page 00 Index Text Size */ .about-content{font-family:var(--font-mono);font-size:1.6rem;line-height:1.7;color:var(--text-secondary)}.about-content p{margin-bottom:1rem}.about-content strong{color:var(--primary-color)}.about-section{margin:1.5rem 0;padding:1rem 1.2rem;background:rgba(0, 0, 0, 0.2);border-radius:var(--border-radius-sm);border-left:2px solid var(--primary-color)}.about-section h4{margin-bottom:0.5rem;font-size:1.5rem;color:#c9a86c}.about-section p{margin-bottom:0;font-size:1.5rem}.quote{margin-top:1.5rem;font-size:1.5rem;font-style:italic;color:var(--primary-color)}/* ======================================== LANGUAGE GLITCH EFFECT ======================================== */ .lang-glitch{position:relative;display:inline}.lang-glitch.glitching{color:var(--primary-color);text-shadow:2px 0 #ff0000, -2px 0 #00ffff, 0 0 10px var(--primary-color);animation:textGlitch 0.1s ease-in-out infinite}@keyframes textGlitch{0%{transform:translateX(0);opacity:1}25%{transform:translateX(-2px) skewX(-1deg);opacity:0.9}50%{transform:translateX(2px) skewX(1deg);opacity:0.8}75%{transform:translateX(-1px);opacity:0.9}100%{transform:translateX(0);opacity:1}}/* ======================================== SKILLS PAGE STYLES ======================================== */ .skills-section{margin-bottom:var(--spacing-lg)}.skills-section h4{font-family:var(--font-mono);margin-bottom:var(--spacing-sm);font-size:1.8rem}.skill-tags{display:flex;flex-wrap:wrap;gap:0.8rem}.skill-tag{padding:0.6rem 1.4rem;background:rgba(183, 75, 75, 0.15);border:1px solid rgba(183, 75, 75, 0.4);border-radius:2rem;font-family:var(--font-mono);font-size:1.4rem;color:var(--text-secondary);transition:all var(--transition-fast)}.skill-tag:hover{background:rgba(183, 75, 75, 0.3);color:var(--text-primary);box-shadow:0 0 15px rgba(183, 75, 75, 0.3);transform:translateY(-2px)}/* ======================================== PROJECTS PAGE STYLES ======================================== */ .projects-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.project-item{display:block;padding:var(--spacing-md);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.2);transition:all var(--transition-fast);text-decoration:none;cursor:pointer}.project-item:hover{border-color:var(--primary-color);box-shadow:0 0 20px rgba(183, 75, 75, 0.2);transform:translateX(5px)}.project-item h4{color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:1.8rem}.project-item p{font-size:1.5rem;margin-bottom:var(--spacing-sm);color:var(--text-secondary)}.project-tech{display:flex;gap:0.6rem;flex-wrap:wrap}.project-tech span{padding:0.4rem 1rem;background:rgba(183, 75, 75, 0.2);border-radius:var(--border-radius-sm);font-family:var(--font-mono);font-size:1.2rem;color:var(--primary-color)}.github-link{display:inline-block;margin-top:var(--spacing-lg);font-family:var(--font-mono);font-size:1.5rem;color:var(--primary-color);text-shadow:0 0 10px var(--primary-glow);text-decoration:none;transition:all var(--transition-fast)}.github-link:hover{text-shadow:0 0 20px var(--primary-glow)}/* ======================================== CONTACT PAGE STYLES ======================================== */ .contact-info{display:flex;flex-direction:column;gap:var(--spacing-md)}.contact-intro{font-size:1.6rem;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.contact-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.2);transition:all var(--transition-fast);text-decoration:none;cursor:pointer}.contact-item:hover{border-color:var(--primary-color);box-shadow:0 0 20px rgba(183, 75, 75, 0.2);transform:translateX(5px)}.contact-icon{font-size:2.2rem;width:4rem;text-align:center}.contact-details{display:flex;flex-direction:column}.contact-label{font-family:var(--font-mono);font-size:1.2rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}.contact-value{font-size:1.6rem;color:var(--primary-color)}/* Contact Status Indicator */ .contact-status{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-sm);font-family:var(--font-mono);font-size:1.2rem;color:#4ade80}.status-indicator{width:10px;height:10px;border-radius:50%;background:#4ade80;animation:statusPulse 2s ease-in-out infinite}.status-indicator.online{box-shadow:0 0 10px #4ade80}@keyframes statusPulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.2)}}/* ======================================== EXPERIENCE SECTION STYLES ======================================== */ .experience-section{display:flex;flex-direction:column;gap:var(--spacing-lg);margin-top:var(--spacing-md)}.experience-item{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg);background:rgba(0, 0, 0, 0.4);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.2);transition:all var(--transition-fast)}.experience-item:hover{border-color:var(--primary-color);box-shadow:0 0 20px rgba(183, 75, 75, 0.2)}.exp-icon{font-size:2.5rem;width:4rem;text-align:center;flex-shrink:0}.exp-details{display:flex;flex-direction:column;gap:0.3rem}.exp-label{font-family:var(--font-mono);font-size:0.9rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}.exp-value{font-size:1.4rem;color:var(--text-primary);font-weight:600}.exp-value.error-blink{color:#ff4444;animation:errorBlink 1s ease-in-out infinite}@keyframes errorBlink{0%, 100%{opacity:1}50%{opacity:0.5}}.exp-info{font-size:1.1rem;color:var(--text-secondary)}.exp-status{font-family:var(--font-mono);font-size:1rem;margin-top:0.5rem}.exp-status.success{color:#4ade80}.exp-status.hiring{color:var(--primary-color);animation:hirePulse 2s ease-in-out infinite}@keyframes hirePulse{0%, 100%{opacity:1}50%{opacity:0.6;text-shadow:0 0 10px var(--primary-color)}}/* Hire Me Box */ .hire-me-box{margin-top:var(--spacing-md);padding:var(--spacing-lg);background:linear-gradient(135deg, rgba(183, 75, 75, 0.2), rgba(183, 75, 75, 0.1));border:2px dashed var(--primary-color);border-radius:var(--border-radius-md);text-align:center}.hire-text{font-size:1.2rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.hire-cta{font-family:var(--font-mono);font-size:1.4rem;color:var(--primary-color);font-weight:bold;animation:hirePulse 2s ease-in-out infinite}/* ======================================== THANK YOU PAGE - VISITOR COUNTER ======================================== */ .visitor-counter-final{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:var(--spacing-md) 0;padding:var(--spacing-md);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.3)}.visitor-counter-final .visitor-label{font-family:var(--font-mono);font-size:1.1rem;color:var(--text-secondary)}.visitor-counter-final .visitor-count{font-family:var(--font-mono);font-size:1.8rem;color:var(--primary-color);font-weight:bold;text-shadow:0 0 10px rgba(183, 75, 75, 0.5)}/* AI Credit Small */ .ai-credit-small{margin-top:var(--spacing-md);padding:var(--spacing-sm);border-top:1px solid rgba(183, 75, 75, 0.2)}.ai-text-small{font-size:0.9rem;color:var(--text-muted);text-align:center}.ai-text-small .ai-icon{margin-right:0.3rem}.ai-text-small .ai-name{color:var(--primary-color);font-weight:500}/* ======================================== END PAGE / CREDITS STYLES ======================================== */ .end-page{display:flex;justify-content:center;align-items:center}.end-content{text-align:center;max-width:40rem}.end-ornament{font-size:3rem;color:var(--primary-color);margin:var(--spacing-md) 0;text-shadow:0 0 20px var(--primary-glow)}.end-quote{font-family:var(--font-display);font-size:2rem;font-style:italic;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-md)}.end-author{font-family:var(--font-mono);font-size:1.5rem;color:var(--primary-color);margin-bottom:var(--spacing-md)}.end-divider{width:8rem;height:2px;background:linear-gradient(90deg, transparent, var(--primary-color), transparent);margin:var(--spacing-lg) auto}.end-thanks{font-family:var(--font-mono);font-size:1.8rem;color:var(--primary-color);letter-spacing:4px;text-shadow:0 0 10px var(--primary-glow)}/* Visitor Counter */ .visitor-counter{margin:var(--spacing-lg) 0;padding:var(--spacing-md);background:rgba(0, 0, 0, 0.3);border-radius:var(--border-radius-md);border:1px solid rgba(183, 75, 75, 0.3)}.visitor-label{font-family:var(--font-mono);font-size:1.4rem;color:var(--text-muted)}.visitor-count{font-family:var(--font-mono);font-size:2.5rem;color:var(--primary-color);font-weight:700;display:block;margin-top:var(--spacing-xs);text-shadow:0 0 10px var(--primary-glow)}/* AI Credit */ .ai-credit{margin-top:var(--spacing-lg)}.ai-divider{width:6rem;height:1px;background:rgba(183, 75, 75, 0.3);margin:0 auto var(--spacing-md)}.ai-text{font-size:1.2rem;color:var(--text-muted)}.ai-icon{margin-right:0.5rem}.ai-name{color:var(--primary-color);font-weight:600}.ai-model{font-size:1rem;color:var(--text-muted);opacity:0.7}.ai-subtext{font-family:var(--font-mono);font-size:1rem;color:var(--text-muted);opacity:0.6;margin-top:var(--spacing-xs)}/* ======================================== BACK COVER PAGE STYLES ======================================== */ .back-cover-page{display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg, rgba(15, 5, 5, 0.95) 0%, rgba(30, 10, 10, 0.9) 50%, rgba(15, 5, 5, 0.95) 100%)}.back-cover-content{text-align:center;padding:var(--spacing-xl);max-width:70rem}.back-cover-ornament{font-size:3rem;color:#c9a86c;margin-bottom:var(--spacing-lg);text-shadow:0 0 20px rgba(201, 168, 108, 0.5);letter-spacing:1rem}/* RDR2 STYLE 2 (Cinzel) for Back Cover Title */ .back-cover-title{font-family:'Cinzel', serif;font-size:3.2rem;text-transform:uppercase;letter-spacing:6px;background:linear-gradient(180deg, #e8d5a3 0%, #c9a86c 50%, #8b6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px rgba(201, 168, 108, 0.5));margin-bottom:var(--spacing-lg)}/* ======================================== PAGE 6 - ABOUT ME TWO COLUMN LAYOUT ======================================== */ .fairy-tale-page.two-column{display:grid;grid-template-columns:1fr 1fr;gap:0;height:100%;padding:0;position:relative;z-index:1}.fairy-left-side{display:flex;flex-direction:column;padding:2rem 2.5rem;background:rgba(0, 0, 0, 0.3);border-right:2px solid rgba(183, 75, 75, 0.3)}.fairy-right-side{display:flex;flex-direction:column;justify-content:flex-start;padding:2rem 2.5rem;background:rgba(0, 0, 0, 0.15);position:relative;z-index:1}.fairy-tale-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(201, 168, 108, 0.3)}.fairy-subtitle{font-family:'Cinzel', serif;font-size:1.8rem;text-transform:uppercase;letter-spacing:4px;color:var(--primary-color);margin-top:0.5rem}.fairy-divider{width:8rem;height:2px;background:linear-gradient(90deg, transparent, #c9a86c, transparent);margin:1rem auto}.fairy-tale-right{flex:1;overflow-y:auto}.fairy-tale-left{flex:1;overflow-y:auto}.fairy-tale-text{font-family:var(--font-display);font-size:1.7rem;line-height:1.8;color:var(--text-secondary);margin-bottom:1.2rem;text-align:left}.fairy-tale-text:first-letter{font-size:3.5rem;float:left;line-height:1;margin-right:0.5rem;margin-top:0.2rem;color:#c9a86c;font-family:'Cinzel', serif;font-weight:700}.fairy-tale-text.continued:first-letter{font-size:inherit;float:none;margin-right:0;margin-top:0;color:inherit;font-weight:inherit}.fairy-tale-ending{text-align:center;margin-top:1.5rem;font-family:'Cinzel', serif;font-size:1.6rem;text-transform:uppercase;letter-spacing:3px;background:linear-gradient(180deg, #e8d5a3 0%, #c9a86c 50%, #8b6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px rgba(201, 168, 108, 0.4))}.fairy-right-side .back-cover-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(183, 75, 75, 0.2);text-align:center}/* Original fairy tale styles (for backwards compatibility) */ .fairy-tale{text-align:left;padding:var(--spacing-lg);background:rgba(0, 0, 0, 0.2);border-radius:var(--border-radius-lg);border:1px solid rgba(183, 75, 75, 0.2);max-height:40rem;overflow-y:auto}.back-cover-footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid rgba(183, 75, 75, 0.2)}.back-cover-year{font-family:'Cinzel', serif;font-size:1.6rem;text-transform:uppercase;letter-spacing:6px;color:#c9a86c}.back-cover-close{margin-top:var(--spacing-md);font-family:'Cinzel', serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:3px;color:var(--primary-color);cursor:pointer;transition:all var(--transition-fast);padding:1rem 2rem;border:2px solid rgba(183, 75, 75, 0.4);border-radius:5px;background:rgba(183, 75, 75, 0.1);display:inline-block}.back-cover-close:hover{color:#c9a86c;background:rgba(201, 168, 108, 0.15);border-color:#c9a86c;box-shadow:0 0 20px rgba(201, 168, 108, 0.3)}/* ======================================== PAGE 7 - TWO COLUMN BACK COVER LAYOUT ======================================== */ /* Hide spine on back cover page */ .book-back-cover.no-spine .page-front::after{display:none !important}.book-back-cover .page-front{background:linear-gradient(135deg, rgba(15, 5, 5, 0.98) 0%, rgba(30, 10, 10, 0.95) 50%, rgba(15, 5, 5, 0.98) 100%);border:2px solid rgba(183, 75, 75, 0.4)}/* Two column layout */ .book-back-page.two-column{display:grid;grid-template-columns:1fr 1fr;gap:0;height:100%;padding:0}/* LEFT SIDE - Thank You */ .back-left-side{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);background:rgba(0, 0, 0, 0.3);border-right:1px solid rgba(183, 75, 75, 0.2)}.thank-you-content{text-align:center;max-width:35rem}.thank-ornament{font-size:2.5rem;color:#c9a86c;margin:var(--spacing-md) 0;text-shadow:0 0 15px rgba(201, 168, 108, 0.5)}.thank-title{font-family:'Cinzel', serif;font-size:3rem;text-transform:uppercase;letter-spacing:8px;background:linear-gradient(180deg, #e8d5a3 0%, #c9a86c 50%, #8b6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px rgba(201, 168, 108, 0.5));margin-bottom:0.5rem}.thank-subtitle{font-family:'Cinzel', serif;font-size:1.6rem;text-transform:uppercase;letter-spacing:10px;color:var(--primary-color);margin-bottom:var(--spacing-md)}.thank-divider{width:8rem;height:2px;background:linear-gradient(90deg, transparent, #c9a86c, transparent);margin:var(--spacing-md) auto}.thank-message{font-family:var(--font-display);font-size:1.4rem;color:var(--text-secondary);line-height:1.8;font-style:italic;margin:var(--spacing-md) 0}.thank-quote{padding:var(--spacing-md);margin:var(--spacing-md) 0}.thank-quote p{font-family:var(--font-mono);font-size:1.2rem;color:rgba(183, 75, 75, 0.8);line-height:1.8}/* RIGHT SIDE - Back Cover Info */ .back-right-side{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.back-right-side .book-back-content{position:relative;width:100%;height:auto;display:flex;justify-content:center;align-items:center}.back-right-side .book-back-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-lg);z-index:1}.book-back-logo{width:10rem;height:10rem;border:3px solid #c9a86c;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-md);box-shadow:0 0 25px rgba(201, 168, 108, 0.4), inset 0 0 25px rgba(201, 168, 108, 0.1)}.book-back-logo .logo-text{font-family:'Cinzel', serif;font-size:3.5rem;font-weight:700;background:linear-gradient(180deg, #e8d5a3 0%, #c9a86c 50%, #8b6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.book-back-tagline{font-family:'Cinzel', serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:4px;line-height:1.8;color:#c9a86c;margin:var(--spacing-sm) 0}.book-back-quote{padding:var(--spacing-md);margin:var(--spacing-sm) 0}.book-back-quote p{font-family:var(--font-display);font-size:1.3rem;font-style:italic;color:var(--text-secondary);line-height:1.8}.book-back-info{margin:var(--spacing-sm) 0}.book-back-info .info-website{font-family:var(--font-mono);font-size:1.2rem;color:var(--primary-color);letter-spacing:2px;margin-bottom:0.5rem}.book-back-info .info-year{font-family:'Cinzel', serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:6px;color:#c9a86c}.book-back-close{margin-top:var(--spacing-md);font-family:'Cinzel', serif;font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;color:var(--primary-color);cursor:pointer;transition:all var(--transition-fast);padding:1rem 2rem;border:2px solid rgba(183, 75, 75, 0.5);border-radius:5px;background:rgba(183, 75, 75, 0.15)}.book-back-close:hover{color:#c9a86c;background:rgba(201, 168, 108, 0.2);border-color:#c9a86c;box-shadow:0 0 25px rgba(201, 168, 108, 0.4)}/* ======================================== RESPONSIVE BREAKPOINTS ======================================== */ /* Large Desktop - Slightly smaller */ @media (max-width:1600px){:root{--book-width:80rem;--book-height:55rem;--cover-width:42rem;--cover-height:58rem}}/* Desktop */ @media (max-width:1400px){:root{--book-width:70rem;--book-height:50rem;--cover-width:38rem;--cover-height:55rem}}/* Small Desktop / Large Tablet */ @media (max-width:1200px){:root{--book-width:60rem;--book-height:45rem;--cover-width:35rem;--cover-height:48rem}}/* Tablet */ @media (max-width:992px){:root{--book-width:90vw;--book-height:60vh;--cover-width:80vw;--cover-height:70vh}.book{max-width:50rem}.book-cover{max-width:32rem;max-height:45rem}.cover-title{font-size:3rem}.cover-author{font-size:2.5rem}.page-content{padding:1.5rem}.nav-button.side-nav{width:4rem;height:8rem;font-size:2.5rem}.nav-button.side-nav.prev-btn{left:1rem}.nav-button.side-nav.next-btn{right:1rem}.floating-email{top:var(--spacing-lg);left:var(--spacing-lg);bottom:auto;right:auto;transform:none}.floating-email.visible{transform:none}.two-page-spread{flex-direction:column;gap:1rem}.spread-left{border-right:none;border-bottom:1px solid rgba(183, 75, 75, 0.2);padding-right:1rem;padding-bottom:1rem}.spread-right{padding-left:1rem}}/* ======================================== MOBILE - SMOOTH SCROLL LAYOUT Convert book to scrollable sections ======================================== */ @media (max-width:768px){/* Enable smooth scroll on html */ html{scroll-behavior:smooth;scroll-snap-type:y mandatory;overflow-y:scroll}body{overflow-x:hidden;overflow-y:scroll;scroll-snap-type:y mandatory}/* Hide book elements */ .book-wrapper, .book-cover, .book, .book::before, .nav-button.side-nav, .page-indicator, .toc-toggle, .toc-panel{display:none !important}/* Show mobile scroll container */ .container{display:block !important;width:100%;max-width:100vw;padding:0;margin:0;perspective:none}/* Mobile scroll sections */ .mobile-scroll-container{display:flex;flex-direction:column;width:100%}.mobile-section{min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;width:100%;padding:2rem;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg, rgba(10, 5, 5, 0.98) 0%, rgba(20, 8, 8, 0.95) 50%, rgba(10, 5, 5, 0.98) 100%);border-bottom:1px solid rgba(183, 75, 75, 0.3);position:relative;overflow:hidden}.mobile-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(183, 75, 75, 0.02) 2px, rgba(183, 75, 75, 0.02) 4px);pointer-events:none}/* Mobile Section Number */ .mobile-section-num{position:absolute;top:1.5rem;right:1.5rem;font-family:'Cinzel', serif;font-size:1.2rem;color:rgba(183, 75, 75, 0.5);letter-spacing:2px}/* Mobile Cover Section */ .mobile-cover{text-align:center;padding:3rem 2rem}.mobile-cover .cover-photo{width:10rem;height:10rem;margin:0 auto 2rem}.mobile-cover .profile-img{width:100%;height:100%}.mobile-cover .cover-title{font-size:2.5rem;margin-bottom:0.5rem}.mobile-cover .cover-author{font-size:2rem;letter-spacing:4px}.mobile-cover .cover-tagline{font-size:1.2rem;margin-top:1rem}/* Mobile Content Sections */ .mobile-section h2{font-size:2rem;margin-bottom:1.5rem;color:var(--primary-color)}.mobile-section p{font-size:1.4rem;line-height:1.8;color:var(--text-secondary)}/* Scroll indicator */ .scroll-indicator{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:1.2rem;color:var(--primary-color);animation:scrollBounce 2s ease-in-out infinite;z-index:100}@keyframes scrollBounce{0%, 100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}/* Floating email mobile */ .floating-email{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);font-size:1.2rem;padding:0.8rem 1.5rem;border-radius:2rem;z-index:100}.floating-email .email-address{display:none}/* Two column to single column */ .two-page-spread, .two-column, .fairy-tale-page.two-column, .book-back-page.two-column{display:flex !important;flex-direction:column !important;grid-template-columns:1fr !important}.spread-left, .spread-right, .fairy-left-side, .fairy-right-side, .back-left-side, .back-right-side{width:100% !important;border:none !important;padding:1rem !important}/* Mobile-specific page styles */ .page-content{padding:1.5rem}/* Section titles mobile */ .section-title{font-size:1.8rem}/* Terminal mobile */ .terminal-window{font-size:1.2rem}.terminal-content{padding:1rem}/* Skills mobile */ .skill-categories{grid-template-columns:1fr}/* Projects mobile */ .project-grid{grid-template-columns:1fr}/* Contact mobile */ .contact-grid{grid-template-columns:1fr}}/* Small Mobile */ @media (max-width:480px){.mobile-section{padding:1.5rem 1rem}.mobile-cover .cover-photo{width:8rem;height:8rem}.mobile-cover .cover-title{font-size:2rem}.mobile-cover .cover-author{font-size:1.6rem;letter-spacing:3px}.section-title{font-size:1.6rem}.mobile-section h2{font-size:1.8rem}.mobile-section p{font-size:1.3rem}}/* ======================================== MOBILE VIEW BODY CLASS Applied when JS detects mobile ======================================== */ body.mobile-view{overflow-y:scroll !important;overflow-x:hidden !important;scroll-snap-type:y mandatory}body.mobile-view html{scroll-snap-type:y mandatory}body.mobile-view .book-wrapper, body.mobile-view .book-cover, body.mobile-view .book, body.mobile-view .nav-button.side-nav, body.mobile-view .page-indicator, body.mobile-view .toc-toggle, body.mobile-view .toc-panel{display:none !important}body.mobile-view .container{display:block !important;width:100% !important;max-width:100vw !important;padding:0 !important;height:auto !important;min-height:auto !important;perspective:none !important}body.mobile-view .mobile-scroll-container{display:flex;flex-direction:column}/* Mobile section base styles */ body.mobile-view .mobile-section{min-height:100vh;min-height:100dvh;/* Dynamic viewport height for mobile */ height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;width:100%;padding:3rem 2rem;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;background:linear-gradient(180deg, rgba(10, 5, 5, 0.98) 0%, rgba(15, 8, 8, 0.95) 50%, rgba(10, 5, 5, 0.98) 100%);border-bottom:2px solid rgba(183, 75, 75, 0.2);position:relative;overflow-y:auto}/* Mobile section texture overlay */ body.mobile-view .mobile-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(183, 75, 75, 0.015) 2px, rgba(183, 75, 75, 0.015) 4px);pointer-events:none;z-index:0}/* Mobile section content wrapper */ body.mobile-view .mobile-section > *{position:relative;z-index:1}/* Mobile cover section */ body.mobile-view .mobile-cover{justify-content:center;align-items:center;text-align:center;padding-top:4rem}/* Mobile section number indicator */ body.mobile-view .mobile-section-num{position:absolute;top:1rem;right:1.5rem;font-family:'Cinzel', serif;font-size:1rem;letter-spacing:3px;color:rgba(183, 75, 75, 0.4);z-index:2}/* Mobile single page content styling */ body.mobile-view .mobile-single-page{padding:4rem 1.5rem 2rem}body.mobile-view .mobile-page-content{width:100%;height:100%;display:flex;flex-direction:column;gap:1.5rem}body.mobile-view .mobile-page-content .page-header{text-align:center;margin-bottom:1rem}body.mobile-view .mobile-page-content .section-title{font-size:1.8rem;text-align:center}/* Terminal on mobile */ body.mobile-view .terminal-window{max-height:50vh;overflow-y:auto}/* Hide two-page spread layout on mobile */ body.mobile-view .two-page-spread, body.mobile-view .spread-left, body.mobile-view .spread-right{display:block !important;width:100% !important;border:none !important;padding:0 !important}/* Skills grid mobile */ body.mobile-view .skill-categories, body.mobile-view .skill-list{grid-template-columns:1fr !important}/* Project grid mobile */ body.mobile-view .project-grid{grid-template-columns:1fr !important;gap:1.5rem}/* Contact grid mobile */ body.mobile-view .contact-grid{grid-template-columns:1fr !important}/* Scroll indicator styling */ body.mobile-view .scroll-indicator{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:1.2rem;color:var(--primary-color);padding:0.5rem 1.5rem;background:rgba(10, 5, 5, 0.8);border:1px solid rgba(183, 75, 75, 0.4);border-radius:2rem;animation:scrollBounce 2s ease-in-out infinite;z-index:1000;transition:opacity 0.5s ease}/* Mobile Back to Top Button */ .mobile-back-to-top{position:fixed;bottom:2rem;right:2rem;width:5rem;height:5rem;border-radius:50%;background:rgba(183, 75, 75, 0.95);color:#fff;border:2px solid rgba(183, 75, 75, 1);font-size:2.2rem;font-weight:bold;cursor:pointer;z-index:9999;opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease;box-shadow:0 4px 15px rgba(183, 75, 75, 0.5);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mobile-back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.mobile-back-to-top:active{background:rgba(183, 75, 75, 1);transform:scale(0.95);box-shadow:0 2px 10px rgba(183, 75, 75, 0.6)}/* Mobile Close Button (X) - Top Right */ .mobile-close-btn{position:fixed;top:1rem;right:1rem;width:4rem;height:4rem;border-radius:50%;background:rgba(10, 5, 5, 0.9);color:var(--primary-color);border:2px solid rgba(183, 75, 75, 0.8);font-size:2.5rem;font-weight:300;line-height:1;cursor:pointer;z-index:9999;opacity:0;visibility:hidden;transform:scale(0.8);transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 2px 10px rgba(0, 0, 0, 0.5)}.mobile-close-btn.visible{opacity:1;visibility:visible;transform:scale(1)}.mobile-close-btn:active{background:rgba(183, 75, 75, 0.3);transform:scale(0.9)}/* Mobile Terminal Styles */ .mobile-terminal{background:rgba(10, 5, 5, 0.95);border:1px solid rgba(183, 75, 75, 0.5);border-radius:0.8rem;overflow:hidden;margin:1rem 0;font-family:'Roboto Mono', monospace}.mobile-terminal .terminal-header{background:rgba(30, 15, 15, 0.9);padding:0.8rem 1rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(183, 75, 75, 0.3)}.mobile-terminal .terminal-buttons{display:flex;gap:0.5rem}.mobile-terminal .term-btn{width:1rem;height:1rem;border-radius:50%}.mobile-terminal .term-btn.red{background:#ff5f56}.mobile-terminal .term-btn.yellow{background:#ffbd2e}.mobile-terminal .term-btn.green{background:#27ca40}.mobile-terminal .terminal-title{font-size:1.1rem;color:rgba(183, 75, 75, 0.7)}.mobile-terminal .terminal-content{padding:1.2rem;min-height:15rem;max-height:25rem;overflow-y:auto}.mobile-terminal .term-line{margin-bottom:0.5rem;color:var(--primary-color)}.mobile-terminal .term-prompt{color:#27ca40;margin-right:0.5rem}.mobile-terminal .term-output{color:rgba(255, 255, 255, 0.8);margin-bottom:0.3rem;padding-left:1rem;transition:opacity 0.2s ease}.mobile-terminal .term-cursor{display:inline-block;width:0.8rem;height:1.4rem;background:var(--primary-color);animation:termBlink 1s infinite;vertical-align:middle;margin-left:0.3rem}@keyframes termBlink{0%, 50%{opacity:1}51%, 100%{opacity:0}}/* Floating email on mobile */ body.mobile-view .floating-email{display:flex !important;opacity:1 !important;pointer-events:auto !important;position:fixed;top:1rem;left:1rem;right:auto;bottom:auto;transform:none !important;flex-direction:row;align-items:center;gap:0.5rem;padding:0.6rem 1rem;font-size:1rem;background:rgba(10, 5, 5, 0.95);border:1px solid rgba(183, 75, 75, 0.5);border-radius:0.5rem;z-index:999}body.mobile-view .floating-email:hover{transform:none !important}body.mobile-view .floating-email .email-label{font-size:0.9rem}body.mobile-view .floating-email .email-address{display:none}/* ======================================== MAIN CSS - Import All Modules This file imports all CSS in the correct order ======================================== */ /* === BASE STYLES === */ @import url('./base/variables.css');@import url('./base/reset.css');@import url('./base/typography.css');/* === LAYOUT === */ @import url('./layout/container.css');@import url('./layout/background.css');@import url('./layout/spread.css');@import url('./layout/responsive.css');/* === COMPONENTS === */ @import url('./components/loader.css');@import url('./components/cover.css');@import url('./components/book.css');@import url('./components/navigation.css');@import url('./components/toc.css');@import url('./components/terminal.css');/* === PAGE-SPECIFIC STYLES === */ @import url('./pages/intro.css');@import url('./pages/about.css');@import url('./pages/skills.css');@import url('./pages/projects.css');@import url('./pages/contact.css');@import url('./pages/end.css');@import url('./pages/backcover.css');