/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* ===== BODY + BACKGROUND ===== */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  background: #1b1b1b url("https://sadhost.neocities.org/images/tiles/stars3.gif");
  color: #ddd;
}

body {
  margin: 0;
  padding: 0;
}

.forum-category {
  border: 1px solid #444;
  padding: 12px;
  margin-bottom: 10px;
  background: #1b1b1b;
}

/* ===== TWO-COLUMN LAYOUT ===== */
.layout {
  display: flex;
  flex-wrap: nowrap;
}

/* LEFT SIDEBAR */
.sidebar {
  width: 250px;
  padding: 15px;
  background: #111;
  border-right: 2px solid #333;
  box-sizing: border-box;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  padding: 20px;
  background: #181818;
  box-sizing: border-box;
}

/* Sidebar Boxes */
.sidebar .music-player,
.sidebar .status-box,
.sidebar .affiliates {
  border: 1px solid #444;
  padding: 10px;
  margin-bottom: 15px;
  background: #1b1b1b;
}

.sidebar a {
  color: #00e5ff;
  text-decoration: none;
}

.sidebar a:hover {
  text-shadow: 0 0 5px #00e5ff;
}

/* ===== BODY + CONTAINER ===== */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  background: #1b1b1b;
  color: #ddd;
}

.container {
  width: 900px;
  margin: auto;
  border: 3px solid #3a3a3a;
  background: #111;
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(to bottom, #222, #000);
  text-align: center;
  padding: 20px;
  border-bottom: 2px solid #444;
}

.header h1 {
  font-size: 32px;
  text-shadow: 0px 0px 6px #0ff;
}

.nav {
  background: #111;
  padding: 12px;
  text-align: center;
}

.nav a {
  color: #9fd7ff;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

.nav a:hover {
  color: #fff;
  text-shadow: 0 0 4px #9fd7ff;
}

.admin-name {
  color: #00e5ff;
  font-weight: bold;
  text-shadow: 0 0 6px #00e5ff;
}

/* ===== TWO-COLUMN LAYOUT ===== */
.layout {
  display: flex;
  flex-wrap: nowrap;
}

/* LEFT SIDEBAR */
.sidebar {
  width: 250px;
  padding: 15px;
  background: #111;
  border-right: 2px solid #333;
  box-sizing: border-box;
}

.sidebar .music-player,
.sidebar .status-box,
.sidebar .affiliates {
  border: 1px solid #444;
  padding: 10px;
  margin-bottom: 15px;
  background: #1b1b1b;
  box-shadow: 0 0 10px #00e5ff;
}

.sidebar a {
  color: #00e5ff;
  text-decoration: none;
}

.sidebar a:hover {
  text-shadow: 0 0 5px #00e5ff;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.admin-box {
  border: 1px solid #555;
  padding: 15px;
  background: #181818;
}

.admin-box a {
  color: #00e5ff;
  text-decoration: none;
}

.admin-box a:hover {
  text-shadow: 0 0 5px #00e5ff;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: #777;
  background: #111;
}
/* ===== GENERAL ===== */
body {
  margin: 0;
  font-family: Verdana, sans-serif;
  background-image: url("https://sadhost.neocities.org/images/tiles/stars3.gif");
  background-attachment: fixed;
  background-position: center;
  color: #ccc;
}


.container {
  width: 1000px;
  margin: auto;
  background: #111;
  border: 2px solid #222;
}

/* ===== HEADER ===== */
.header {
  background: #111;
  text-align: center;
  padding: 20px;
  border-bottom: 2px solid #222;
}

.header h1 {
  color: #00e5ff;
  font-size: 32px;
  text-shadow: 0 0 6px #00e5ff;
}

.admin-name {
  color: #00e5ff;
  font-weight: bold;
}

/* ===== NAVIGATION ===== */
.nav {
  text-align: center;
  background: #111;
  padding: 10px;
}

.nav a {
  color: #00e5ff;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

.nav a:hover {
  text-shadow: 0 0 6px #00e5ff;
}

/* ===== FORUM CATEGORY ===== */
.forum-category {
  margin: 20px;
}

.forum-category h3 {
  background: #111;
  color: #00e5ff;
  padding: 10px 15px;
  font-size: 18px;
  margin: 0 0 5px 0;
  border-bottom: 2px solid #222;
}

/* ===== FORUM CARD ===== */
.forum-card {
  display: flex;
  justify-content: space-between;
  background: #111;
  border: 1px solid #222;
  padding: 15px;
  margin-bottom: 2px;
  box-shadow: 0 0 5px #000;
}

.forum-card:hover {
  border-color: #00e5ff;
  box-shadow: 0 0 10px #00e5ff;
}

.forum-info {
  flex: 1;
}

.forum-title {
  font-size: 16px;
  font-weight: bold;
  color: #00e5ff;
  display: flex;
  align-items: center;
}

.forum-title img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.forum-desc {
  color: #ccc;
  font-size: 13px;
  margin-top: 4px;
}

.forum-meta {
  text-align: right;
  min-width: 150px;
  font-size: 13px;
  color: #00e5ff;
}

.last-post {
  margin-top: 5px;
  font-size: 12px;
  color: #9fd7ff;
}

/* ===== FOOTER ===== */
.footer {
  text-align: center;
  padding: 10px;
  background: #111;
  color: #00e5ff;
}

/* ===== PROFILE BANNER ===== */
.profile-banner {
  background: linear-gradient(to bottom, #111, #000);
  padding: 25px;
  text-align: center;
  border-bottom: 2px solid #00e5ff;
}

.profile-banner h1 {
  color: #00e5ff;
  font-size: 30px;
  text-shadow: 0 0 10px #00e5ff;
}

.online-status {
  color: #00ff99;
  font-size: 14px;
}

/* ===== PROFILE LAYOUT ===== */
.profile-main {
  display: flex;
  padding: 20px;
}

.profile-left {
  width: 250px;
}

.profile-right {
  flex: 1;
  margin-left: 20px;
}

/* ===== PROFILE PIC ===== */
.profile-pic {
  width: 200px;
  border: 3px solid #00e5ff;
  box-shadow: 0 0 15px #00e5ff;
  margin-bottom: 15px;
}

/* ===== PROFILE BOX ===== */
.profile-box {
  background: #111;
  border: 1px solid #222;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 0 8px #000;
}

.profile-box h3 {
  color: #00e5ff;
  border-bottom: 1px solid #222;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* ===== TOP FRIENDS ===== */
.top-friends {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.friend {
  text-align: center;
  width: 90px;
}

.friend img {
  width: 80px;
  height: 80px;
  border: 2px solid #00e5ff;
}

.friend p {
  font-size: 12px;
  color: #9fd7ff;
}
.admin-name {
  color: #00ffff;
  text-shadow: 0 0 8px #00ccff, 0 0 15px #0099ff;
  font-weight: bold;
}

.admin-badge {
  background: linear-gradient(45deg, #00aaff, #0044ff);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  margin-left: 6px;
  box-shadow: 0 0 6px #00ccff;
}

.admin-reply {
  background: linear-gradient(
    to right,
    rgba(0, 30, 80, 0.8),
    rgba(0, 60, 120, 0.8)
  );
  border-left: 3px solid #00ffff;
}

.profile-comments {
  background: rgba(0, 0, 30, 0.9);
  border: 2px solid #00aaff;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 0 25px #0088ff;
}

/* Main comment */
.comment {
  display: flex;
  gap: 15px;
  padding: 18px;
  margin-bottom: 30px;
  background: rgba(0, 40, 80, 0.6);
  border-radius: 14px;
  border: 1px solid #0099ff;
}

.comment-icon {
  width: 65px;
  height: 65px;
  border-radius: 12px;
  border: 2px solid #00aaff;
  object-fit: cover;
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.username {
  color: #33ccff;
  font-weight: bold;
}

.date {
  color: #88ccff;
  font-size: 0.85rem;
  font-style: italic;
}

/* Replies container */
.replies {
  margin-top: 15px;
  margin-left: 40px;
  border-left: 2px solid rgba(0, 170, 255, 0.4);
  padding-left: 20px;
}

/* Individual reply */
.reply {
  margin-bottom: 12px;
  padding: 10px 15px;
  background: rgba(0, 20, 50, 0.7);
  border-radius: 10px;
  font-size: 0.9rem;
  color: #cceeff;
}

/* Admin styling */
.admin-name {
  color: #00ffff;
  text-shadow: 0 0 8px #00ccff, 0 0 15px #0099ff;
}

.admin-badge {
  background: linear-gradient(45deg, #00aaff, #0044ff);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  margin-left: 6px;
  box-shadow: 0 0 6px #00ccff;
}

.admin-reply {
  background: linear-gradient(
    to right,
    rgba(0, 40, 90, 0.8),
    rgba(0, 70, 140, 0.8)
  );
  border-left: 3px solid #00ffff;
}


}

.admin-avatar {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  border: 3px solid #00ccff;
  box-shadow: 0 0 20px #00aaff;
  object-fit: cover;
}

.glitter-name {
  font-size: 2.2rem;
  background: linear-gradient(
    90deg,
    #00ffff,
    #33ccff,
    #ffffff,
    #00ffff
  );
  background-size: 300%;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
  text-shadow: 0 0 10px #00ccff;
}

@keyframes shimmer {
  0% { background-position: 0%; }
  100% { background-position: 300%; }
}

.admin-tag {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 12px;
  background: linear-gradient(45deg, #0088ff, #00ccff);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 0 10px #00aaff;
}

.status {
  margin-top: 12px;
  font-style: italic;
  color: #cceeff;
  text-shadow: 0 0 5px #0099ff;
}

.mood-music {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.mood-box,
.music-box {
  background: linear-gradient(
    to bottom,
    rgba(0, 80, 150, 0.7),
    rgba(0, 40, 90, 0.7)
  );
  border-radius: 12px;
  padding: 10px 15px;
  border: 1px solid #00aaff;
  box-shadow: inset 0 0 10px rgba(0, 200, 255, 0.3);
  font-size: 0.85rem;
  color: #e0f8ff;
}

.label {
  font-weight: bold;
  color: #00ffff;
}

.user-sidebar {
  margin-top: 30px;
  background: rgba(0, 30, 70, 0.8);
  border-radius: 18px;
  padding: 20px;
  border: 2px solid #0099ff;
  box-shadow: 0 0 20px #0088ff;
}

.user-sidebar h3 {
  color: #00ffff;
  margin-bottom: 15px;
  text-shadow: 0 0 8px #00ccff;
}

.home-wrapper {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.home-container {
  width: 900px;
  background: rgba(0, 15, 40, 0.85);
  border-radius: 25px;
  padding: 40px;
  border: 2px solid #00aaff;
  box-shadow: 0 0 40px #0088ff;
}


/* Side-by-side row */
.fa-row {
  display: flex;
  gap: 18px;                 /* Less gap between panels */
}

/* Panels */
.fa-panel {
  background: #0f1a2b;
  border: 2px solid #00aaff;
  border-radius: 14px;
  padding: 18px 22px;        /* Reduced padding */
  box-shadow: 0 0 14px #0088ff;
}

.fa-panel.large {
  padding: 22px 26px;        /* Less bulky */
}

.fa-panel.half {
  flex: 1;
}

/* Headings */
.fa-panel h2 {
  margin-bottom: 10px;       /* Tighter */
  font-size: 1.3rem;
  color: #00ffff;
  text-shadow: 0 0 5px #0099ff;
}

/* Paragraph spacing */
.fa-panel p {
  margin: 6px 0;
  line-height: 1.4;          /* Slightly tighter */
  font-size: 0.95rem;
}

/* Image slots tighter */
.panel-image {
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #0099ff;
}

.panel-image.small img {
  height: 90px;              /* Shorter image */
  object-fit: cover;
}

/* RP cards tighter */
.rp-card {
  background: #13233a;
  border: 1px solid #0099ff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

/* Stats more compact */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}

.fa-footer {
  padding: 12px;
  font-size: 0.8rem;
}

.fa-wrapper {
  max-width: 880px;
  width: min(100%, 880px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  margin-bottom: 35px;
}

html, body {
  overflow-x: hidden;
}