body {
    font-family: Arial, sans-serif;
    line-height: 1.2;
    background: #1d6e9c;
    color: #d6d6d6;
    overflow-x: hidden;
    padding-top: 60px;

    background-image: url('images/agi_doodle.svg');
    background-repeat: repeat;
    background-size: auto; /* or specify like 100px if you want to control tile size */
    background-position: top left;
}

.topnav {
    position: fixed; /* Keeps the navbar fixed at the top */
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    background-color: #ffffff;
    color: rgb(36, 36, 36);
    overflow: hidden;
    height: 60px; /* Set a fixed height */
    z-index: 1000; /* Keeps it above everything */
    display: flex; /* Allows for easy alignment */
    align-items: center; /* Vertically centers items */
    padding: 0 20px; /* Adds space on the sides */
    overflow-x: hidden;
}

.topnav img {
    height: 80%; /* Makes image match topnav height */
    width: auto; /* Maintains aspect ratio */
}

/* Navigation links container */
.nav-links {
    margin-right: 30px;
    margin-left: auto; /* Pushes links to the right */
    display: flex; /* Keeps links aligned horizontally */
}

.nav-links a
{
    color: #000000;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    font-size: 17px;
    line-height: 60px; /* Centers text vertically */
}

/* Hover effect */
.nav-links a:hover {
    color: rgb(90, 0, 63);
}

h1 {
    text-align: center; /* Centers the title */
    font-size: 2em;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
}


#title-block-header{
    display: block;

    font-family: Arial, Helvetica, sans-serif; /* Similar to Pandoc's default font */
    line-height: 1.2;
    width: 80%;
    border-radius: 10px;
    margin: 10px auto;
    padding: 20px;
    background-color: #080808;
    color: #ffffff;
    background-image: url('images/sitehead.png');
}

.math.display {
  display: block;
  overflow-x: auto; /* allow horizontal scroll if needed */
  white-space: nowrap; /* prevent inline wrapping that breaks math */
  max-width: 100%; /* keep within container */
}

.article {
    display: flex;
    flex-direction: column;
    align-content: center;
    font-family: Arial, Helvetica, sans-serif; /* Similar to Pandoc's default font */
    line-height: 1.2;
    width: 80%;
    border-radius: 10px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    color: #333;
  }
  
@media (max-width: 768px) {
  .article{
    width: auto;
    margin: 0;
  }
}
.article img
{


}

  /* Headers */
  .article h1,
  .article h2,
  .article h3 {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .article h1 {
    font-size: 2em;
    border-bottom: 2px solid #ccc;
  }
  
  .article h2 {
    font-size: 1.75em;
  }
  
  .article h3 {
    font-size: 1.5em;
  }
  
  /* Paragraphs */
  .article p {
    margin: 10px 0;
    text-align: justify;
  }
  
  /* Lists */
  .article ul,
  .article ol {
    margin: 10px 0;
    padding-left: 20px;
  }
  
  .article li {
    margin-bottom: 5px;
  }
  
  /* Links */
  .article a {
    color: #0077cc;
    text-decoration: none;
  }
  
  .article a:hover {
    text-decoration: underline;
  }
  
  /* Code */
  .article pre {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
  }
  
  .article code {
    font-family: "Courier New", monospace;
    font-size: 1em;
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
  }
  
  /* Blockquotes */
  .article blockquote {
    background-color: #e9e9e9;
    padding: 10px;
    margin: 20px 0;
    border-left: 4px solid #ccc;
    font-style: italic;
  }
  
  /* Images */
  .article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
  }
  
  /* Horizontal Rule */
  .article hr {
    border: 1px solid #ccc;
    margin: 20px 0;
  }