html{scroll-behavior:smooth}:root{--shrink-factor: 1;--header-padding-y: 1.5rem;--header-padding-x: 3rem;--logo-font-size: 1.8rem;--nav-font-size: .95rem;--nav-padding-y: 12px;--nav-padding-x: 24px;--headphoto-size: 60px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:600;margin-bottom:1rem;color:#2c3e50}h1{font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin:2rem 0}h2{font-size:2.5rem;color:#34495e;border-bottom:3px solid #3498db;padding-bottom:.5rem;margin:2rem 0 1.5rem}h3{font-size:2rem;color:#2c3e50}.title{font-size:3rem}.myStyle h1{font-size:4.5rem}.myStyle h2{font-size:3.5rem}.myStyle h3{font-size:3rem}.myStyle h4{font-size:2.5rem}.myStyle h5{font-size:2rem}.myStyle h6{font-size:1.5rem}.mySpan{margin:5px 10px;padding:calc(var(--nav-padding-y) * var(--shrink-factor)) calc(var(--nav-padding-x) * var(--shrink-factor));color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:25px;cursor:pointer;font-weight:500;font-size:calc(var(--nav-font-size) * var(--shrink-factor));transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #667eea4d;border:none;text-decoration:none;display:inline-block;text-align:center;-webkit-user-select:none;user-select:none}.mySpan:hover{background:linear-gradient(135deg,#764ba2,#667eea);box-shadow:0 8px 25px #667eea66;transform:translateY(-2px)}.mySpan:active{transform:translateY(0);box-shadow:0 2px 10px #667eea4d}header{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--header-padding-y) * var(--shrink-factor)) calc(var(--header-padding-x) * var(--shrink-factor));background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 20px #0000001a;position:sticky;top:0;z-index:1000;transition:all .3s ease}.logo{transition:font-size .3s ease;font-size:calc(var(--logo-font-size) * var(--shrink-factor));font-weight:700;color:#2c3e50;text-decoration:none;letter-spacing:1px}nav{display:flex;gap:.5rem;align-items:center}header a{text-decoration:none;transition:color .3s ease}header img.headphoto{transition:width .3s ease,height .3s ease;margin:0;padding:0;width:calc(var(--headphoto-size) * var(--shrink-factor));height:calc(var(--headphoto-size) * var(--shrink-factor));border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 15px #0000001a;transition:transform .3s ease}header img.headphoto:hover{transform:scale(1.1)}section.mySection{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:3rem 2rem;min-height:100vh;position:relative}.mySection p{max-width:900px;text-align:justify;line-height:1.8;font-size:1.1rem;color:#555;margin-bottom:2rem;padding:0 1rem;background:#fffc;border-radius:12px;box-shadow:0 2px 15px #0000000d;padding:2rem;transition:all .3s ease}.mySection p:hover{box-shadow:0 4px 25px #0000001a;transform:translateY(-2px)}article{max-width:1200px;width:100%;margin:0 auto;padding:2rem}.toTop a{text-decoration:none}.toTop span{position:fixed;right:2rem;bottom:2rem;width:60px;height:60px;display:grid;place-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;color:#fff;box-shadow:0 4px 20px #667eea66;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;font-size:.9rem;font-weight:600;border:2px solid rgba(255,255,255,.2)}.toTop span:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 30px #667eea80;background:linear-gradient(135deg,#764ba2,#667eea)}.toTop span:active{transform:scale(.95)}.html::selection{background-color:purple;color:#fff}.css::selection{background-color:red;color:#00f}.javascript::selection{background-color:#000;color:gold}::selection{background-color:#667eea;color:#fff}video{margin:3rem 0;max-width:900px;width:100%;height:auto;border-radius:20px;box-shadow:0 10px 40px #0003;transition:all .3s ease;border:1px solid rgba(255,255,255,.2)}video:hover{transform:scale(1.02);box-shadow:0 15px 50px #0000004d}audio{max-width:900px;width:100%;margin:2rem 0;height:60px;border-radius:30px;box-shadow:0 8px 25px #00000026;background:#ffffffe6;transition:all .3s ease;border:1px solid rgba(255,255,255,.3)}audio:hover{box-shadow:0 12px 35px #0003;transform:translateY(-2px)}.background{position:fixed;z-index:-1;inset:0;width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(118,75,162,.1) 0%,transparent 50%),linear-gradient(135deg,#1310c8e6,#bab730cc,#17ba30b3,#47280ecc,#0b6cbbe6);background-attachment:fixed}.video-container{position:relative;display:inline-block}.pip-button{position:absolute;top:10px;right:10px;z-index:1;padding:8px 12px;background-color:#0009;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;opacity:0;transition:opacity .3s ease}.video-container:hover .pip-button{opacity:1}@media (max-width: 1024px){header{padding:1rem 2rem}.logo{font-size:1.5rem}.mySpan{padding:10px 20px;font-size:.9rem;margin:3px 8px}h1{font-size:2.8rem}h2{font-size:2.2rem}}@media (max-width: 768px){header{flex-direction:column;padding:1rem;gap:1rem}nav{flex-wrap:wrap;justify-content:center;gap:.3rem}.mySpan{padding:8px 16px;font-size:.85rem;margin:2px 4px}h1{font-size:2.2rem}h2{font-size:1.8rem}.mySection p{font-size:1rem;padding:1.5rem;margin-bottom:1.5rem}section.mySection{padding:2rem 1rem}article{padding:1rem}.toTop span{width:50px;height:50px;right:1rem;bottom:1rem;font-size:.8rem}}@media (max-width: 480px){h1{font-size:1.8rem}h2{font-size:1.5rem}.logo{font-size:1.3rem}header img.headphoto{width:50px;height:50px}}