:root {
  --bg-color: #42454c;
  --card-bg: #253555;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --accent-color: #bfc0ff;
  --accent-hover: #818cf8;
  --border-color: #0b1e3e;
  --font-main:'Outfit',sans-serif;
  --transition-speed:0.3s;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  font-family:var(--font-main);
  background-color:var(--bg-color);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem;
}

header {
  text-align:center;
  margin-bottom:3rem;
  width:100%;
  max-width:1200px;
}

h1 {
  font-size:3rem;
  font-weight:700;
  margin-bottom:0.5rem;
  background:linear-gradient(135deg,#fff 0%,var(--text-secondary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-0.02em;
}

p.subtitle {
  color:var(--text-secondary);
  font-size:1.1rem;
}
p.subsubtitle {
  font-size:0.7rem;
}

main {
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  flex:1;
}

a {
  text-decoration:none;
  color:var(--text-primary);
  font-style:italic;
}
a:hover {
  text-decoration:underline;
}

.category-card {
  background-color:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:2rem;
  display:flex;
  flex-direction:column;
}

.category-card:hover {
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  border-color:var(--accent-color);
}

.category-title {
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:1.5rem;
  color:var(--accent-color);
  border-bottom:2px solid rgba(99,102,241,0.1);
  padding-bottom:0.5rem;
}

.link-card {
  background-color:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:16px;
  display:flex;
  flex-direction:column;
}
.link-card a {
  padding:2rem;
}
.link-card:hover {
  border-color:#a6a6a6;
}
.link-title {
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:0px;
  color:var(--accent-color);
  border-bottom:0px;
  padding-bottom:0px;
}

.link-list {
  list-style:none;
}

.link-list li {
  margin-bottom:0.8rem;
}

.link-list a {
  text-decoration:none;
  color:var(--text-primary);
  display:block;
  font-size:1.5rem;
  font-style:normal;
}

.link-list a:hover {
  color:var(--accent-hover);
}

.link-list .msg {
  border-left:1px solid #656668;
  margin-left:8px;
  padding-left:8px;
}

body#page_main main,
body#page_kb main {
  flex:initial !important;
}
body#page_kb main {
  grid-template-columns: none !important;
}

body#page_kb .category-title {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

footer {
  margin-top:4rem;
  color:var(--text-secondary);
  font-size:0.9rem;
  text-align:center;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width:8px;
}

::-webkit-scrollbar-track {
  background:var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background:var(--border-color);
  border-radius:4px;
}

::-webkit-scrollbar-thumb:hover {
  background:var(--text-secondary);
}