@font-face {
    font-family: 'CustomFont';
    src: url('/assets/font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* body */

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes footer to bottom */
  font-family: 'CustomFont', sans-serif;
  background-color: #f0f2f5;
  color: #1a1b26;
}
/* main content container */

.container {
  position: relative;       /* for page-slug inside */
  padding: 25px 20px;       /* vertical + horizontal spacing */
  border-radius: 15px;      /* rounded corners */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* subtle shadow */
  width: 300px;             /* fixed width, can adjust */
  max-width: 90%;           /* responsive */
  text-align: left;         /* content alignment */
  background-color: #ffffff; /* light mode background */

  /* Centering */
  margin: auto;             /* horizontal + vertical centering if parent has height */
}

/* paragraphs inside container for spacing */
.container article p {
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

/* top-right page slug inside container */
.container .page-slug {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 0.75rem;
  color: #7f8cba;
}

/* top-right page slug inside container */
.page-slug {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 0.75rem;
  color: #7f8cba;
}

/* header */
header {
  margin-bottom: 1rem;
  text-align: center;
}

/* left sidebar */
.sidebar-left {
  width: 350px;
  height: 500px;
  position: absolute;
  left: 20px;
  bottom: -12px;
  outline: 3px solid #5018dd;
  border-radius: 8px;
  background-color: #fefefe;
}

/* center widget */
.widget-center {
  width: 150px;
  height: 200px;
  padding: 20px;
  overflow: auto;
  position: absolute;
  right: 157px;
  bottom: -12px;
  outline: 3px solid #5018dd;
  border-radius: 8px;
  background-color: #fefefe;
}

/* right widget */
.widget-right {
  width: 88px;
  height: 200px;
  padding: 20px;
  overflow: auto;
  position: absolute;
  right: 20px;
  bottom: -12px;
  outline: 3px solid #5018dd;
  border-radius: 8px;
  background-color: #fefefe;
}

/* footer */
footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #9aa5ce;
}

/* paragraphs inside container */
.container article p {
  margin: 0 0 1rem 0;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #18171d;
    color: #f0f0f0;
  }

  .container,
  .sidebar-left,
  .widget-center,
  .widget-right {
    background-color: #18171d;
    color: #f0f0f0;
  }

  .page-slug {
    color: #7aa2f7;
  }

  footer {
    
    color: #9aa5ce;
  }
}

/* responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .container {
    width: 90%;
    padding: 15px;
  }

  .sidebar-left,
  .widget-center,
  .widget-right {
    display: none; /* hide side widgets on small screens */
  }

  .page-slug {
    font-size: 0.65rem;
    top: 5px;
    right: 10px;
  }
}


/* links */
a {
  color: #7aa2f7;          /* subtle modern blue */
  text-decoration: none;
}

a:visited {
  color: #9a7af7;          /* muted purple for visited links */
}

a:hover,
a:focus {
  text-decoration: underline;
  color: #4f84ff;          /* slightly brighter on hover */
  outline: none;
}

/* dark mode link colors */
@media (prefers-color-scheme: dark) {
  a {
    color: #7992f5;
  }

  a:visited {
    color: #303470;
  }

  a:hover,
  a:focus {
    color: #d2dcff;
  }
}