@font-face {
  font-family: 'Hind-Variable';
  src: url('fonts/Hind-Variable.woff2') format('woff2'),
       url('fonts/Hind-Variable.woff') format('woff'),
       url('fonts/Hind-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

:root{
  --t0: white;
  --t1: #c8fefe;
  --t2: #10b81d;
  --t3: #2d52e5;
  --t4: #9b4ef9;
  --t5: #ecc400;
  --tableborder: lightgray;
  --text-shadow: rgb(71, 70, 70);

  --btn-dim: 36px;
  --off-w: 60vw;
  --off-dw: 420px;
  --nav-h: 50px;
  --bg:#f4f7f6;
  --surface:#fff;
  --accent:#0080ff;
  --overlay: rgba(0,0,0,0.45);
  --dur: .35s;
  --curve: cubic-bezier(.7,0,.3,1);
  font-family: "Hind-Variable";
}

*{box-sizing:border-box}
html {scroll-padding-top: var(--nav-h);}
html,body{height:100%;margin:0; overflow-x:clip;} /*overflow-x:clip prevents white space on the right for mobile with TranslateX + allows sticky to function*/
body{background:var(--bg);color:#111;}

/* Display none for toggle makes it so the page doesnt jump to the top when the checkbox is clicked*/
.offcanvas-toggle{  display: none;  position: relative;  overflow: hidden;}

/* Layout */
.page{
  min-height:100vh;
  transition: transform var(--dur) var(--curve), border-radius var(--dur);
  background:var(--bg);
  position:relative;
  z-index:0;
}

 main {
    padding:1.3rem;
    font-size:1rem;
    text-align:justify;
    line-height: 1.5;
 }

/* Navbar (off-canvas) */
.nav {
  position:fixed;
  left:0; top:0;
  width:var(--off-w); height:100%;
  background:var(--surface);
  padding:0.5rem 1rem;
  transform: translateX(-100%);             /* hidden by default on mobile */
  transition: transform var(--dur) var(--curve);
  z-index:30;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  overflow:auto;
  font-size:1.1rem;
}
.nav-mobile-header {
  display:none;
}

/* Overlay */
.overlay {
  position:fixed;
  inset:0;
  background:var(--overlay);
  opacity:0; visibility:hidden;
  transition: opacity var(--dur) var(--curve), visibility var(--dur) steps(1, end);
  z-index:20;
}

/* Header / buttons */
.header{
  height:var(--nav-h);
  display:flex;
  position:sticky;
  top:0;
  align-items:center;
  gap:1rem;
  padding:0 1rem;
  background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  z-index:2;
}

.header h1 {
font-size:1.1rem;
}

.hicons{
  display:flex;
  justify-content: space-between;
  margin-left: auto;
  gap:2rem;
}

.hicons button {
    min-width:36px;
    min-height:24px;
    background: none;
    border:none;
}

.icon-btn{
  width:var(--btn-dim); height:var(--btn-dim);
  display:inline-grid; place-items:center;
  border-radius:8px; border:0; background:transparent; cursor:pointer;
}

kb {
  color:black;
    position:relative;
    display:inline-block;
    font-family:Courier;
    font-weight:bold;
    background-color: lightgrey;
    padding:0px 10px;
    top:-3px;
    z-index:1;
}
kb::after {
    bottom:-15%;
    left:0%;
    height:5%;
    width:100%;
    position:absolute;
    content: '';
    border-bottom:5px solid grey;
    z-index: -1;
}
kb:active {
    top: 3px;
}
kb:active::after {
    display:none;
}

.chat {
    background-color:#4b4959;
    color:white;
    width:100%;
    font-family:Arial;
    font-size:1rem;
    padding:10px 10px;
}

msg {
  font-style:italic;
  font-family: Arial;
}

.settingsimg {
    float:right; padding-left:20px; max-width:50vw;
}

.rotateonclick {
  transition: 1s;
}

.rotateonclick:active {
  transform:rotate(720deg);
}

/* Links inside nav */
.nav a{
  display:block;
  color:#000000; text-decoration:none; font-weight:500;
}

.nav a:hover{ color:var(--accent) }

.nav details {
    border:#111 solid 2px;
    padding:0;
    margin:8px 0;
}
.nav summary {
    margin: 0;
    padding: 0.5rem;
}
.nav details a {
    padding:10px 15px 10px 25px;
  }

.nav details p {
    padding:10px 15px;
}

.meme {
    text-decoration:underline;
}



/* Close button inside nav */
.close-btn{ display:inline-grid; place-items:center; width:var(--btn-dim); height:var(--btn-dim); border-radius:6px; background:transparent; border:0; cursor:pointer; }

/* When checkbox is checked => open states (mobile) */
.offcanvas-toggle:checked ~ .nav {
  transform: translateX(0);
}
.offcanvas-toggle:checked ~ .overlay {
  opacity:1; visibility:visible;
}
.offcanvas-toggle:checked ~ .page {
  transform: translateX(var(--off-w));
  border-radius:12px;
  overflow:hidden;
}

main ul, main ol {
  list-style:square;
  margin-left:-15px;
}

main ul li, main ol li {
  padding-left:0;
  
}
 .z {
   color:black;
   padding:4px 8px;
   text-transform:uppercase;
 }

 r {
    color:red;
    font-weight: bold;
 }

 img {
    max-width: 90vw;
 }

 dialog {
    padding:20px;
 }

 dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
 }

 div.scroll-container {
  max-width:100%;
  overflow: auto;
  white-space: nowrap;
  margin: 0 auto;
  padding-top:10px;
 }

 div.scroll-container img {
  padding: 0 2px;
  max-height:250px;
  max-width: 85vw;
  vertical-align: middle;
}

.gallery-header {
 margin:0;
 padding:0;
 display: flex;
 justify-content: center;
}
.gallery-header button, .gallery-header p {
  margin:0;
  padding:0;
}

/* .gallery-header button {
    width:var(--btn-dim);
    height:var(--btn-dim);
    margin-right:auto;
    display:inline-grid; place-items:center;
    border-radius:8px; border:0; background:transparent; cursor:pointer;
} */

 .gallery-header button {
    display:none;
} 
.gallery-header p {
    margin-right:auto;
    margin-left:auto;
    padding-right:0;
}

main a {
    text-decoration: underline double;
}

main h1 {
    text-align:center;
    text-transform: uppercase;
    border-bottom: 3px dashed black;
}
main h2 {
    text-transform: uppercase;
    text-decoration: underline dotted 3px;
}

table {
  border-collapse: collapse; 
  margin:0 auto;
  width:100%;
  font-size:0.9rem;
   
}

table tr {
  border-bottom:solid var(--tableborder) 1px;
}

table td:nth-child(2) {
  font-weight:bold;
 }

table td:nth-child(3) {
  font-style:italic;
 }

table td:nth-child(n+2) {
padding-left:10px;
}

 .tier {
  text-shadow:
    -0.5px -0.5px 0 var(--text-shadow),
    0.5px -0.5px 0 var(--text-shadow),
    -0.5px 0.5px 0 var(--text-shadow),
    0.5px 0.5px 0 var(--text-shadow);
    /* -webkit-text-stroke: 0.6px var(--text-shadow); */
    font-size:1rem;
    font-weight:600;
}
table td img {
  max-width:3vw;
}

/* Desktop behavior: always open at 33vw, no overlay, no toggle button */
@media (min-width:1000px){
  :root{ --off-w: var(--off-dw); }           /* make off-canvas width 33% viewport */
  .nav {
    transform: translateX(0);      /* visible */
    box-shadow: none;
    font-size:0.9rem;
  }
  .nav details a {
    margin: 0;
    padding: 5px 0 5px 20px;
    border:0;
  }
  .overlay { display:none; }        /* no overlay on desktop */
  .page{
    transform: translateX(var(--off-w)); /* main content pushed */
    border-radius:0;
  }
  main {margin-right:var(--off-dw);font-size: 1.15rem; line-height: 1.5;  }

  .settingsimg {max-width:33vw; max-height:50vh}
  /* Hide mobile-specific controls on desktop */
  .offcanvas-toggle { display:none; } /* optional: hide input */
  .close-btn { display:none; }        /* close button visible only on mobile */
  .icon-btn[for="offcanvas-toggle"] { display:none; } /* open button hidden on desktop */
  
  .hicons {margin-right: var(--off-dw);}
}

@media (orientation: portrait) {
    div.scroll-container {
     max-width:100%;
     overflow: auto;
    white-space: nowrap;
     margin: 0 auto;
    padding-top: 30px;
 }

 div.scroll-container img {
  padding: 0 2px;
  min-height:250px;
  min-width:fit-content;
  vertical-align: middle;
}
.gallery-header button {
    width:var(--btn-dim);
    height:var(--btn-dim);
    margin-right:auto;
    display:inline-grid; place-items:center;
    border-radius:8px; border:0; background:transparent; cursor:pointer;
}
.gallery-header p {
    margin-right:auto;
    margin-left:0;
    padding-right:calc(var(--btn-dim) + 8px); /* +the border radius of the button */
}


  table td {
    font-size:3vw;
  }

.tableflip {
  width:100%;

table {
  height:95vw;
transform:rotate(90deg) scale(1, -1);

}
table tr {
  border:none;
  padding-left:0;
}

table td{
  writing-mode:sideways-lr;
  text-align:center;
  letter-spacing:0.25px;
  transform: scale(1, -1);
  padding-top:4px;
  border-right: 1px solid var(--tableborder);
  }

  table td img {
    transform: rotate(90deg) scale(1, -1);
  }
}


}

/* Small responsive tweak: on narrow screens reduce panel width */
@media (max-width:520px){
  :root{ --off-w: 85vw; }
  .header h1 {display:none;}
  .nav-mobile-header {
    display:block;
  font-weight:bold;
  text-align:center;
  margin:8px auto 0 auto;
  padding-left: calc(var(--btn-dim) + 8px);
}
table .tier {
   font-size:3vw;
}
}
@media (max-width:650px) {
  
}



@media (max-width:750px){
    .settingsimg {
    min-width:90vw;    
    float:none;
    display:block;
    margin:auto;
    padding-left:0;
}
}

/* Accessibility focus */
.icon-btn:focus, .close-btn:focus, .nav a:focus, .gallery-header button:focus{
  outline: 3px solid rgba(0,102,204,0.18);
  outline-offset: 2px;
}

/* make the dialog closing button appear only on Safari */
_::-webkit-full-page-media, _:future, :root .gallery-header button {
    width:var(--btn-dim);
    height:var(--btn-dim);
    margin-right:auto;
    display:inline-grid; place-items:center;
    border-radius:8px; border:0; background:transparent; cursor:pointer;
}

_::-webkit-full-page-media, _:future, :root .gallery-header p {
    margin-right:auto;
    margin-left:0;
    padding-right:calc(var(--btn-dim) + 8px); /* +the border radius of the button */
}