/* ─────────────────────────────────────────────
   Global Styles
──────────────────────────────────────────── */
body{margin:0;font-family:'Segoe UI',sans-serif;background-color:#0a0f1c;color:white;overflow-x:hidden;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background-color:#0a0f1c;}

/* ─────────────────────────────────────────────
   Layout: Container & Graphic
──────────────────────────────────────────── */
.container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:3rem;max-width:1100px;margin:auto;position:relative;z-index:1;}
.graphic img{top:10vh;right:0;width:10vw;max-width:150px;min-width:60px;opacity:1;z-index:1;}

/* ─────────────────────────────────────────────
   Text Content & Call to Action
──────────────────────────────────────────── */
.text-content h1{font-size:3rem;margin-bottom:0.5rem;}
.text-content h2{font-size:1.5rem;color:#ffa500;margin-bottom:1.5rem;}
.button{background-color:#ffa500;color:black;padding:0.75rem 1.5rem;border-radius:5px;text-decoration:none;font-weight:bold;}
.highlight-core {color: #0FCCC6;font-weight:500 }

/* ─────────────────────────────────────────────
   Code Block Styling
──────────────────────────────────────────── */

.code-box{display:block;margin:2rem auto;width:90%;max-width:770px;box-sizing:border-box;background-color:rgba(60,60,60,0.8);padding:1.5rem;border-radius:8px;font-family:monospace;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;box-shadow:0 0 2px rgba(0,0,0,0.4);color:#f8f8f2;font-size:0.95rem;line-height:1.5;}

/* ─────────────────────────────────────────────
   Footer
──────────────────────────────────────────── */
.footer{text-align:center;padding:1rem;font-size:0.9rem;background-color:#0a0f1c;color:#888; border-top:0 solid #ddd;position:fixed;bottom:0;width:100%;z-index:2;position:relative;}
.footer a{color:#ffa500;text-decoration:none;}
.footer a:hover{text-decoration:underline;}

/* ─────────────────────────────────────────────
   Top Navigation Bar
──────────────────────────────────────────── */
.top-bar{display:flex;justify-content:space-between;align-items:center;background-color:#0a0f1c;padding:1rem 2rem;border-bottom:1px solid #333;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:1rem;}
.brand img{height:70px;}
.brand-text{display:flex;flex-direction:column;color:white;}
.brand-name{font-weight:800;font-size:1.5rem;}
.brand-subtitle{font-family:'Stint Ultra Expanded',cursive;font-size:0.9rem;color:#ffa500;}
.brand-subtitle a {color: inherit;font: inherit;text-decoration: none;}
.brand-subtitle a:hover { text-decoration: underline;}
.top-nav{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.5rem;}
.top-nav a{color:black;background-color:#ffa500;padding:0.5rem 1rem;text-decoration:none;border-radius:5px;font-weight:bold;transition:background 0.3s ease;}
.top-nav a:hover{background-color:#ff8800;}

/* ─────────────────────────────────────────────
   Responsive graphic: 1126px till 769px
──────────────────────────────────────────── */
@media (max-width:1126px) and (min-width:769px){.graphic img{margin-top:2rem;float:right;width:150px;}.text-content{margin-bottom:2rem;}}


/* ─────────────────────────────────────────────
   Responsive: ≤768px
──────────────────────────────────────────── */
@media(max-width:768px){.top-nav a{width:100%;display:block;font-size:1.1rem;padding:0.75rem 1rem;box-sizing:border-box;text-align:center;} .container{flex-direction:column;text-align:center;padding:2rem 1rem;} .text-content h1{font-size:2rem;} .text-content h2{font-size:1.2rem;} .graphic img{width:150px;margin-top:2rem;} .top-bar{flex-direction:column;align-items:flex-start;} .top-nav{flex-direction:column;gap:0.5rem;width:100%;margin-top:1rem;} pre code{font-size:0.85rem;width:100%;max-width:100%;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;}}

/* ─────────────────────────────────────────────
   Responsive: ≤480px (Optional decor hiding)
──────────────────────────────────────────── */
 @media(max-width:480px){.code-box{display:block;background-color:rgba(60,60,60,0.8);padding:1.2rem;border-radius:8px;max-width:100%;width:92%;margin:1.5rem auto;font-family:monospace;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;box-shadow:0 0 2px rgba(0,0,0,0.4);color:#f8f8f2;font-size:0.85rem;line-height:1.4;}}