/* 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." */

@font-face {
  font-family: "IBM";
  src: url("IBMPlexSans-Normal.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  background: url("starbgpattern.png");
  color: black;
  font-family: "IBM";
  height: 100vh;
  margin: 0;
  padding: 0;
  cursor: url("https://www.rw-designer.com/cursor-extern.php?id=171091"), auto;
  overflow: hidden;
}

.page-bg {
  position: fixed;
  inset: 0;
  /*background: url("your-background.svg") center/cover no-repeat;*/
  z-index: -1;
}

.site-wrapper {
  position: relative;
  height: 100vh;
  overflow: auto; /* only this scrolls */
  padding: 40px;
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* centers vertically */
}

.grid-container {
  display: grid;
  grid-template-columns: 350px 800px 350px;
  gap: 30px;
}

.col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 30px;
}

.box {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #00355b;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 7px 7px 1px rgb(0 0 0 / 22%);
}

/* AO3 Stats Card */
.ao3-stats {
  max-width: none;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #00355b;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 7px 7px 1px rgba(0, 0, 0, 0.22);
  position: relative;
}

.ao3-stats::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 14px;
  background: radial-gradient(circle at center, rgba(56,185,232,0.35), transparent 60%);
  filter: blur(10px);
  z-index: -1;
}

.ao3-stats h2 {
  font-size: 20px;
  margin: 0 0 12px 0;
  color: #00355b;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  background: rgba(0, 53, 91, 0.05);
  border: 1px solid rgba(0, 53, 91, 0.25);
  border-radius: 10px;
  padding: 10px;
}

.stat-label {
  font-size: 12px;
  color: #00355b;
  opacity: 0.75;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #00355b;
}

.latest-fic h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  color: #00355b;
}

.latest-fic a {
  text-decoration: none;
  color: #38B9E8;
  font-weight: 600;
}

.latest-fic a:hover {
  text-decoration: underline;
}

.stats-footer {
  margin-top: 12px;
  font-size: 12px;
  color: #00355b;
  opacity: 0.75;
}

#ficRec {
  margin-bottom: 12px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 53, 91, 0.25);
}

#ficLink {
  display: block;
  font-weight: 700;
  color: #38B9E8;
  text-decoration: none;
}

#ficLink:hover {
  text-decoration: underline;
}

#ficSummary {
  margin-top: 8px;
  font-size: 14px;
  color: #00355b;
  opacity: 0.85;
}

.chanlix-img {
  width: 100%;
  border-radius: 10px;
}

.chanlix-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: none;
}



/*#wrapper {*/
/*    position: relative;*/
/*    display: grid;*/
/*    max-width: 1050px;*/
/*    margin: auto;*/
/*    grid-template-areas:*/
/*        "header header header"*/
/*        "navi intro music"*/
/*        "navi intro music"*/
/*        "navi notepad updates"*/
/*        "footer footer pic";*/
/*    grid-template-columns: 200px 500px 300px;*/
/*    grid-template-rows: 60px 300px 250px 360px;*/
/*    grid-gap: 20px;*/
/*}*/

@media screen and (max-width: 768px) {
  /* mobile styles go here */
  .grid-container {
    grid-template-columns: 1fr;
  }
}