/* Landing overrides using site variables in style.css */
    body { background: var(--bg); color: #fff; }

    /* center header to match landing-main width */
    .landing-header {
      margin: 0px auto;
      display: grid;
      grid-template-columns: auto;
      align-items: center;
      gap: 12px;
      padding: 20px 0 16px;
      box-sizing: border-box;
      background-color: var(--topper);
      image-rendering:pixelated;
    }
    
    .credits { color: var(--pop-tertiary); }
    .projects2 { color: var(--pop-primary); }
    
:root{
			--fan-accent: #7cff27;
			--pop-primary: #29ff4a;
			--pop-secondary: #39d5f6;
			--pop-tertiary: #f7f72a;
			--pop-quarternary-lmao: #ffb529;
			--topper: #121212;
		}
		@font-face{font-family:Homestuck;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/Regular.woff2)format("woff2")}
		@font-face{font-family:Sylladex;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/sylladex-font.otf.woff2)format("woff2")}
		.above {font-family: Homestuck;
    font-weight: normal;
    text-shadow: 0 0 black, 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black;
    font-size: 72px;     text-align: center;}
		
    .landing-logo { display:flex; align-items:center; gap:12px; justify-self:center; justify-content: center;}
    .landing-logo img { height:90px; width:auto; display:block; max-width: 99%; max-height: max-content;}
  .landing-tag { font-family: 'Akshar', sans-serif; font-size:20px; color: #fff; }

  nav.header-nav { justify-self:end; }
  
  .primary a{color: var(--pop-primary); }
  .secondary a{color: var(--pop-secondary); }
  .tertiary a{color: var(--pop-tertiary); }
  .quarternary a{color: var(--pop-quarternary-lmao); }

  /* Centered navbar for landing page */
  .centered-navbar { max-width:100% margin: 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; background-color: var(--topper); padding-bottom:8px;}
  .centered-navbar .navgroup { display:flex; gap:0px; align-items:center; }
  .centered-navbar .navgroup a { text-decoration:none; font-weight:600;         font-size: .625rem; line-height: .75rem;     text-decoration-line: underline;     text-transform: uppercase;  font-family: Arial, Helvetica, sans-serif;}
  .centered-navbar .navgroup a:hover { text-decoration:underline; }
  .centered-navbar .navgroup .pipe { color: #fff; margin:0 6px; }
  .centered-navbar .nav-sep { width:24px; height:24px;}
  @media (max-width:720px){ .above { font-size: 48px; margin-top: 10px;} .centered-navbar { flex-direction:column; gap:0px; } .centered-navbar .nav-sep { display:none; } .centered-navbar .navgroup { justify-content:center; } }

  /* Landing wrapper and layout blocks after the green divider */
  .landing-wrap { max-width:950px; margin: 0 auto; padding:0 0; box-sizing:border-box; }
  /* shared panel style so a series of blocks look consistent */
  .panel { padding:14px; background: var(--text-area); color: #000; box-sizing:border-box; }
  .landing-legal, .landing-news { width:100%; padding:12px 0; box-sizing:border-box; color:#000; font-weight: normal; text-align: center;     border-top: 7px solid #000;}

  /* landing-main now contains exactly two children: .projects and .chatbox */
  .landing-main { width:100%; margin: 0 auto; display:flex; gap:16px; align-items:stretch; box-sizing:border-box; }
  .landing-main .projects { flex:1 1 auto; }
  .landing-main .chatbox { flex:0 0 320px; min-height:480px; }
  @media (max-width:880px){ .landing-main { flex-direction:column; } .landing-main .chatbox { width:100%; flex:0 0 auto; min-height:360px; } }
  /* project banner list */
  .project-list { display:flex; flex-direction:column; gap:12px; }
  .project-banner { display:block; position:relative; height:120px; border-radius:6px; overflow:hidden; text-decoration:none; background:transparent; }
  .project-banner .project-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); filter: blur(6px); }
  .project-banner .project-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:64px; width:auto; z-index:3; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); }
  .project-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.18) 100%); z-index:2; }
  @media (max-width:720px){ .project-banner { height:100px; } .project-banner .project-logo { height:56px; } }
  /* Resize reused project tiles to be compact (100px wide) */
  .projects .flex {
    display: flex
;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background-color: #ff067c;
}
#project-desc {
    padding-left: 5px;
    padding-right: 5px;
}
#project-content {
    padding: 14px;
  font-weight: normal;
  background-color: var(--text-area);
  color: #000;
  width: 100%;
  border-bottom: 7px solid #C6C6C6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 163px;
}
/* Project link styling: align left and prepend a black "> " */
#project-link {
  align-self: flex-start;
  text-decoration: underline;
  color: var(--accent);
  font-weight: 600;
}
#project-link::before { content: "> "; color: #000; font-weight: 700; }
  .projects .flex > a { width:100px !important; height:auto !important; padding:6px !important; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; position:relative; transition: transform .18s ease; will-change: transform; background: transparent !important; }
  .projects .flex > a svg { width:80px !important; height:auto !important; max-height:100px; }
  .projects .flex > a img { max-width:100% !important; height:auto !important; margin-top:-12%; display:block; }
  .sylladex-top {
    font-family: Sylladex;
    background-color: #9a2446;
    border-top: 5px solid black;
    color: #24d6ff;
    padding-top: 5px;
    padding-left: 8px;
    padding-bottom: 3px;
    font-size: 18px;
}
  @media (max-width:480px){ .projects .flex > a { width:86px !important; } .projects .flex > a svg { width:70px !important; } .projects .flex > a img { max-width:76px !important; } }
    .projects { }
    .projects h2 { margin-top:0; color: #000; }
    .projects ul { padding-left: 18px; }
a { color: var(--accent); text-decoration:underline;     font-family: Verdana;font-weight:normal;}
    .projects a:hover { text-decoration: underline; }

    .chatbox { padding:0;; background: var(--text-area); display:flex; flex-direction:column; height:auto; color: #000; border-bottom: 7px solid #C6C6C6;}
    .chat-header { padding:8px 12px; border-bottom:1px solid rgba(0,0,0,0.06); color: #000; font-weight: bold;}
    .chat-stage { flex:1 1 auto; }
    .chat-placeholder { width:100%; height:100%; border:0; background:#f5f5f5; color:#333; display:flex; align-items:center; justify-content:center; font-family:monospace; }

  @media (max-width:880px){ .chatbox { height:auto; } }
    .bg-hs {
        background-color: #7cff27;
    }
        .mar-y-rg {
        margin-top: 1rem;
        margin-bottom: 1rem;
    
        }
        .landing-legal {border-bottom: 7px solid #C6C6C6;     padding: 14px; font-weight: normal;}
        .landing-news {border-bottom: 7px solid #C6C6C6;     padding: 14px; font-weight: normal;}
    
        /* project-card layout and preview sizing */
    .project-card {
  display: flex
;
  gap: 90px;
  align-items: center;
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 20px;
    padding-bottom: 20px;
}
        .project-preview { width:240px; flex:0 0 240px; display:flex; align-items:center; justify-content:center; background:transparent; }
        .project-preview svg, .project-preview img { max-width:100%; height:auto; display:block; }
  .project-info { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
  .project-logo { max-width:160px; height:auto; display:block; margin-bottom:18px; }
  .selected-tile { transform: translateY(-20px); z-index:30; background: transparent !important; }
  /* Hover lift for tiles (no shadow) */
  .projects .flex > a:hover { transform: translateY(-20px); z-index:20; background: transparent !important; }
        @media (max-width:880px){ .project-logo { max-width:245px;} #project-content  {border-bottom: none !important;     padding: 10px 0px 10px 0px;border-bottom: none !important;} #project-link { margin-left: 10px; } #project-logo {
        margin-top: -120px;
        margin-bottom: -15px;
        z-index: 99;
    }  .project-card { flex-direction:column; gap: 0px;
        margin-bottom: -20px;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;} .project-preview{ width:100%; flex:0 0 auto; } .project-preview svg, .project-preview img{ max-width:100%; } }

  /* Auth modal styles */
  .auth-modal { display:none; position:fixed; inset:0; z-index:2147484000; align-items:center; justify-content:center; }
  .auth-modal[aria-hidden="false"] { display:flex; }
  .auth-overlay { position: absolute; inset:0; background: rgba(0,0,0,0.6); }
  .auth-dialog { position: relative; background: var(--text-area); color: #000; width: 100%; max-width: 520px; box-shadow: 0 12px 36px rgba(0,0,0,0.5); padding: 18px; z-index: 2; border: 7px solid #C6C6C6; }
    .auth-close:hover { background: var(--wrapper); color:#777779;}
    .auth-close { padding:8px 10px; border-style: solid;
    border-radius: 0;
    border-color: #dddddd #898989 #898989 #dddddd; cursor:pointer; font-weight:normal; text-align:center; font-family: 'Sylladex'; color: #AAAAAA; cursor: pointer; font-weight:normal; }
  .auth-tabs { display:flex; gap:8px; margin-bottom:12px; }
    .auth-tabs { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
  .auth-tab { flex:1 1 auto; padding:8px 10px; border-style: solid;
    border-radius: 0;
    border-color: #dddddd #898989 #898989 #dddddd; cursor:pointer; font-weight:700; text-align:center; font-family: 'Sylladex'; color: #AAAAAA; text-shadow: 0 1px #777777;}
  .auth-tab.active { background: var(--wrapper); color:#777779;}
  .auth-tab:hover { background: var(--wrapper); color:#777779;}
  .auth-form { display:flex; flex-direction:column; gap:8px; }
  /* Row layout: label on left, input fills remaining space */
  .auth-form { display:flex; flex-direction:column; gap:8px; }
  .auth-form .auth-row { display:flex; align-items:center; gap:12px; }
  .auth-form .auth-row label { width:140px; margin:0; font-size:13px; color:#000; font-weight: normal;}
  .auth-form .auth-row input { flex:1 1 auto; padding:8px 10px; border:1px solid var(--topper); font-size:14px; font-family: Verdana;}
  @media (max-width:480px){ .auth-form .auth-row { flex-direction:column; align-items:stretch; } .auth-form .auth-row label { width:100%; } }
  .auth-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
  .auth-btn { flex:1 1 auto; padding:8px 10px; border-style: solid;
    border-radius: 0;
    border-color: #dddddd #898989 #898989 #dddddd; cursor:pointer; font-weight:normal; text-align:center; font-family: 'Sylladex'; color: #AAAAAA; text-shadow: 0 1px #777777;}
    .auth-btn:hover { background: var(--wrapper); color:#777779;}
  .auth-btn.secondary { background: transparent; }

/* Credits table styles */
.credits-panel { padding: 18px; background: var(--text-area); color: #000; border-radius: 6px; }
.credits-table { display: grid; gap: 12px;     margin-top: 20px;
}
#about-content {background-color: var(--text-area);
    padding: 20px;}
.info { margin-top: 20px; font-weight:normal; text-align:center; background-color: #C3C3C3;}

.info b { font-family: 'Homestuck'; font-weight: normal;  font-size:1.9rem;}
/* Visual order: avatar column first, content second. DOM order stays the same for accessibility. */
.credits-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: stretch; padding: 14px 0; }
/* Place the left-content in the second column visually and avatars in the first column */
.credits-left { grid-column: 2; text-align: left;
    background-color: var(--text-area);
    border-bottom: 7px solid #c6c6c6;}
.credits-wrap { padding:20px;}
.credits-left .credit-title { font-size: 0.9rem; font-family: 'Homestuck'; color: #000;}
.credits-left .credit-role { font-size: 0.95rem; color: #333; margin-top: 4px; font-family:verdana;}
.credits-left .person-name { font-family:'Homestuck'; font-size: 1.05rem; color: #111; margin-bottom: 6px; }
.credits-left .credit-links { margin-top: 8px; font-size: 0.9rem; }
.credits-left .credit-links a { color: #00e; text-decoration: underline; margin-right: 8px; font-family: verdana; }
.credits-left .credit-links a:before {
    content: "> ";
    color: #000;
    display: inline-block;
    margin-right: 6px;
}
.credits-right { grid-column: 1; display:flex; gap:8px; justify-content:flex-start; align-items:stretch; flex-wrap:nowrap; }
/* Avatar sizing: fill the row height and remain square. If multiple avatars are stacked, they share the available height. */
.credits-right img.avatar { display:block; height:auto; aspect-ratio:1/1; width:100%; object-fit:cover; background-color: var(--text-area); border-bottom: 7px solid #C6C6C6; }
.credits-right .avatar-stack { display:flex; flex-direction:column; gap:8px; align-items:flex-start; height:100%; }

@media (max-width:720px){
  /* Keep two-column layout on small screens but reduce avatar column width so content has room */
  .credits-row { grid-template-columns: 60px 1fr; }
  .credits-wrap { padding: 10px;}
  .credits-left { grid-column: 2; }
  .credits-right { grid-column: 1; justify-content:flex-start; }
  .credits-right .avatar-stack { flex-direction:column; gap:6px; align-items:flex-start; height:100%; }
  /* On mobile make avatars half the height of the credits-row */
  .credits-right img.avatar { height:60px; aspect-ratio:1/1; width:auto; }
}