/* IWANGO site styles */

/* IWANGO retro site styles */
:root{
  --bg:#000;
  --text:#b8ffb8;
  --accent:#39ff14; /* bright green */
  --muted:#66bb66;
  --panel:#051005;
}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family: 'Courier New', Courier, monospace;}
#site{display:flex;flex-direction:column;height:100vh;}
header{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:2px solid var(--muted);}
#logo{height:96px}
header h1{margin:0;color:var(--accent);font-size:1.6rem;letter-spacing:2px}
/* allow main to shrink properly inside flex layout to avoid scrollbars */
main{flex:1;display:flex;min-height:0;}
/* Left menu iframe */
#menuFrame{width:220px;border-right:3px solid var(--muted);background:var(--panel);overflow:hidden}
/* hide any scrollbar visuals */
#menuFrame::-webkit-scrollbar{display:none}
#menuFrame{ -ms-overflow-style: none; scrollbar-width: none; }
/* ensure iframes fill the available height and don't force overflow */
#menuFrame, #contentFrame {height:100%;min-height:0}
#contentFrame{flex:1;border:0;background:#070707}
footer{padding:6px 12px;border-top:2px solid var(--muted);text-align:center;color:var(--muted)}

/* Content pages loaded into the right iframe should have padding so content isn't flush to the edge */
.content{padding:12px 16px;box-sizing:border-box;overflow:auto}

/* Styles that apply inside the menu.html and other pages as we keep a single css */
body.menu{background:transparent;margin:0;padding:10px;color:var(--accent);overflow:hidden}
nav ul{list-style:none;margin:0;padding:0}
nav li{margin:8px 0}
/* Retro digital font appearance using monospace, green and glow */
nav a{display:block;padding:8px 12px;color:var(--accent);text-decoration:none;font-family: 'Courier New', Courier, monospace;font-weight:bold;border:1px solid rgba(57,255,20,0.06);box-shadow:0 0 8px rgba(57,255,20,0.06);}
nav a:hover{background:rgba(57,255,20,0.06);color:#aaffaa}

/* Content pages */
h2{color:var(--accent);}
a{color:var(--accent)}
section{padding:8px 12px}
.retro-table{border-collapse:collapse;width:100%;font-family:monospace}
.retro-table th,.retro-table td{border:1px solid #193; padding:6px;}
.retro-table thead th{background:#062006;color:var(--accent)}

/* Forms */
label{display:block;margin-top:8px;color:var(--muted)}
input,textarea,button{background:#071007;border:1px solid #184; color:var(--text);padding:6px;margin-top:4px}
button{cursor:pointer}

/* small screens */
@media(max-width:700px){#menuFrame{width:140px}header h1{font-size:1.1rem}#logo{height:72px}}