/* A part of Me - apartofme.ca */
/* Feuille partagee par index.html, about.html et privacy.html */

:root{--bg:#000;--fg:#fff;--accent:#ffcc00;--panel:#2a2a2a;--panel-border:#444;--header:#1a1a1a;--bg-image:url("image/background.webp");--box-bg:rgba(0,0,0,.65);--box-border:#fff}
html.light{--bg:#f5f5f5;--fg:#111;--accent:#d70000;--panel:#f0f0f0;--panel-border:#ccc;--header:#e6e6e6;--box-bg:rgba(255,255,255,.75);--box-border:#111}
html,body,#top-bar,#drawer,#caption-box,#explain-box,#drawer h2,svg{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Bahnschrift',sans-serif;background:var(--bg) var(--bg-image) center/cover no-repeat fixed;color:var(--fg);font-size:17px}
#caption,#drawer h2{font-family:'Renogare',sans-serif}
a{color:var(--fg);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
button{background:transparent;border:1px solid var(--fg);color:var(--fg);cursor:pointer;transition:color .2s,border-color .2s;font-family:inherit}
button:hover{color:var(--accent);border-color:var(--accent)}
img{max-width:100%;display:block}
#top-bar{position:sticky;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.2rem;padding-right:min(28rem,90vw);z-index:10;background:var(--header)}
#lang-switch{display:flex;align-items:center;gap:.4rem;font-size:.85rem}
#lang-switch button{border:none;padding:0 .2rem;background:transparent;color:var(--fg)}
#lang-switch button.active{color:var(--accent)}
.center-cluster{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.85rem;line-height:1.2;grid-column:2;justify-self:center}
.second-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
#discord-tag{display:inline-flex;align-items:center;gap:6px;opacity:.75;transition:opacity .25s}
#discord-tag:hover{opacity:1}
#discord-tag svg{width:16px;height:16px;fill:#5865F2;flex-shrink:0}
#form-header{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;opacity:.75;transition:opacity .25s,color .2s}
#form-header svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
#right-cluster{display:flex;align-items:center;gap:.5rem;grid-column:3;justify-self:end;margin-right:1rem}
.mini-link{font-size:.85rem;opacity:.75;transition:opacity .25s,color .2s}
.mini-link:hover{opacity:1;color:var(--accent)}
.divider{font-size:.85rem;opacity:.75;user-select:none}
#theme-toggle,#toggle,#toggle-open{width:2.2rem;height:2.2rem;font-size:1.3rem;background:transparent;color:var(--fg)}
#toggle,#toggle-open{display:none}
#main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;text-align:center;padding:4rem 1rem 2rem;padding-right:min(28rem,90vw);gap:1.5rem}
#caption-box,#explain-box{padding:1.5rem 2rem;max-width:42rem;background:var(--box-bg);border-radius:8px;border:1px solid var(--box-border);box-shadow:0 0 0 1px var(--box-border)}
#caption{margin:0;font-size:clamp(2rem,4.5vw,3rem);letter-spacing:.03em;color:var(--fg)}
#explain{margin:0;font-size:clamp(.9rem,1.5vw,.95rem);line-height:1.55;color:var(--fg)}
#drawer{position:fixed;inset:0 0 0 auto;width:min(28rem,90vw);background:var(--panel);border-left:1px solid var(--panel-border);overflow-y:auto;transform:translateX(100%);transition:transform .35s ease;padding:3.5rem 2rem 2rem;z-index:20}
#drawer.open{transform:translateX(0)}
#drawer h2{margin:1.5rem 0 .5rem;font-size:1.1rem;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
#drawer ul{list-style:none}
#drawer li+li{margin-top:.35rem}
#drawer-credits{margin:2rem 0 0 0;padding-top:1rem;border-top:3px solid var(--panel-border);font-size:0.85rem;font-style:italic;text-align:center}
.drawer-section h2{cursor:pointer;user-select:none;padding:.25rem .4rem;margin:0 -.4rem;border-radius:.35rem;transition:background-color .2s ease}
.drawer-section h2:hover,.drawer-section h2:active{background-color:rgba(255,255,255,.08)}
.drawer-section h2::before{content:"▶ ";font-size:.8em;transition:transform .25s;display:inline-block}
.drawer-section:not(.folded) h2::before{transform:rotate(90deg)}
.drawer-section ul{max-height:none;overflow:hidden;transition:max-height .35s ease,margin .35s ease}
.drawer-section.folded ul{max-height:0;margin:0}
#mountain{width:300px;height:auto;display:block}
@media (max-width:600px) {
  html,body{background-attachment:scroll}
  body{overflow-x:hidden}
  #top-bar{display:flex;flex-direction:column;align-items:center;padding:.75rem}
  .center-cluster{margin-top:.5rem;font-size:.65rem;align-items:center;text-align:center;gap:.2rem}
  #discord-tag svg,#form-header svg{width:12px;height:12px}
  #right-cluster{font-size:.65rem;gap:.35rem;margin-right:0;flex-wrap:wrap;justify-content:center}
  #lang-switch{font-size:.65rem}
  #theme-toggle,#toggle,#toggle-open{width:1.7rem;height:1.7rem;font-size:1rem}
  #theme-toggle{position:absolute;top:.6rem;right:.6rem}
  #toggle-open{position:absolute;top:2.6rem;right:.6rem;display:inline-flex}
  #toggle{position:absolute;top:1rem;right:1rem;display:inline-flex;z-index:21}
  body.drawer-open #toggle-open{display:none}
  #drawer{width:100vw;padding:2rem 1rem}
  #main{padding-right:1rem}
  button,a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  #theme-toggle,#toggle,#toggle-open{min-width:1.7rem;min-height:1.7rem}
  .mini-link,#lang-switch button{min-width:auto;min-height:auto}
}