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

/*CSS adjustments for phones*/
@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

/*CSS adjustments for tablets*/
@media screen and (min-width: 480px) {
  body {
    font-size: 16px;
  }
}

/*CSS adjustments for laptops and above*/
@media screen and (min-width: 992px) {
  body {
    font-size: 22px;
  }
}

/* General body styling for layout and typography */
body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
}

h1 {
  margin-bottom: 12px;
}

/* Style the wiki header with flexbox for layout */
.wiki-header {
    /*justify-content: space-between;*/
    /*align-items: center;*/
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Style the xAI logo in the header */
.wiki-logo {
    width: 95px; /* Adjust size as needed */
    height: auto;
    margin-right: 20px; /* Space between logo and title */
    /* Round the corners of the logo image */
    border-radius: 15px; /* Adjust the value to control the roundness */
    overflow: hidden; /* Ensures the image corners are clipped to the rounded border */
}

/* Style the rendered wiki content area */
.wiki-content {
    margin-bottom: 20px;
}

/* Style the textarea for Markdown input */
textarea {
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
}

/* Style buttons for consistent appearance */
button {
    padding: 8px 16px;
    cursor: pointer;
}

/* Style input fields and select dropdowns */
input, select {
    padding: 8px;
    margin: 5px 0;
}

/* Style the page list container */
.page-list {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* Style page links in the page list */
.page-list a {
    display: inline-block;
    margin: 5px 0;
    text-decoration: none;
    color: #007bff;
}

/* Add hover effect for page links */
.page-list a:hover {
    text-decoration: underline;
}

/* Style the page list as a clean, unstyled list */
.page-list ul {
    list-style: none;
    padding: 0;
}

/* Style error messages in red */
.error {
    color: red;
}