/* Base Styles */
body {
    width: 1000px; /* Set width to 900 pixels */
    font-family: Verdana, sans-serif;
    background-color: #000000; /* Set background to black */
    color: #ffffff; /* Set font color to white */
    margin: 0;
    padding: 5px; /* Adds padding on all sides */
    padding-left: 5px; /* Additional padding on the left side */
}


/* Navigation Bar Styles */
.navbar {
    overflow: hidden; /* Ensure elements inside are contained */
    background-color: #222222; /* Dark background for the navbar */
}

.navbar a {
    float: left;           /* Align links to the left */
    font-size: 16px;       /* Set font size for links */
    color: red;            /* Text color for links */
    font-weight: 500;      /* Bold text for emphasis */
    text-align: center;    /* Center text inside the links */
    padding: 14px 16px;    /* Padding inside links */
    text-decoration: none; /* Remove underline from links */
}

.navbar a:hover {
    background-color: #444444; /* Hover effect */
}

.navbar a.active {
    background-color: #444444; /* Highlighted background for the active page */
}


/* General Link Styles */
a {
    display: block; /* Ensure links take up the full width of the containing element */
    color: #ffffff; /* Set font color to white */
    padding: 8px 10px; /* Padding inside links */
    text-decoration: none; /* Remove underline from links */
    border-radius: 4px; /* Rounded corners for links */
}

a:hover {
    background-color: #444444; /* Darken background on hover */
    color: #ffcc00; /* Bright yellow text on hover */
}

.green-text { color: green; }

/* Styling the comparison table as a separate class */
.table {
    width: 1000;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #222; /* Darker background to stand out against black body */
}
.table,
.table th,
.table td {
    border: 1px solid #ddd;
    padding: 8px;
}
.table th {
    background-color: #444; /* Slightly lighter than table body */
    color: #fff;
}
.table td {
    background-color: #333; /* Make the table rows darker to contrast with body */
    color: #fff;
}
.table tr:hover {
    background-color: #555; /* Lighter background on hover for better visibility */
}


/* Styling the comparison table as a separate class */
.comparison-table {
    width: 950px;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #222; /* Darker background to stand out against black body */
}
.comparison-table,
.comparison-table th,
.comparison-table td {
    border: 1px solid #ddd;
    padding: 8px;
}
.comparison-table th {
    background-color: #444; /* Slightly lighter than table body */
    color: #fff;
}
.comparison-table td {
    background-color: #333; /* Make the table rows darker to contrast with body */
    color: #fff;
}
.comparison-table tr:hover {
    background-color: #555; /* Lighter background on hover for better visibility */
}

/* Style for search box and submit button */
.search-box {
    margin-bottom: 20px;
}

input[type="text"] {
    width: 750;             /* Make the search box wider */
    height: 40px;           /* Increase the height of the search box */
    padding: 10px;          /* Add padding inside the search box */
    font-size: 24px;        /* Increase font size */
    border: none;           /* Remove borders */
    border-radius: 4px;     /* Add rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* Add a subtle shadow for depth */
    padding-left: 15px;
}

input[type="submit"] {
    height: 40px;           /* Match the height of the text input */
    font-size: 24px;        /* Increase font size */
    padding: 10px 30px;     /* Add padding for the button */
    background-color: #28a745;  /* Green background */
    color: white;           /* White text */
    border: none;           /* Remove borders */
    border-radius: 4px;     /* Add rounded corners */
    cursor: pointer;        /* Show a pointer when hovering over the button */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* Add a subtle shadow for depth */
    padding-left: 15px;

}

input[type="submit"]:hover {
    background-color: #218838;  /* Darker green on hover */
}

/* Styles for the footer */
.footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  background-color: black;
  color: white;
  font-size: 12px; /* Adjusts the text to be smaller */
  font-weight: normal; /* Ensures the text is not bold */
}

.footer p {
  margin: 5px 0;
}

.footer {
  text-align: center;
}

.counter-container {
  display: flex;
  background-color: black;
  color: white;
  justify-content: center;
  align-items: center;
  height: 300px; /* Adjust as needed */
  margin-top: 0px;
}

.question { font-weight: bold; color: #ffcc00; }
.answer { margin-bottom: 20px; color: white; }

/* .datatype { color: white; } */

/*----------------------------------------------------------------
 * Use style.css for documentation and code highlighting 
 * --------------------------------------------------------------- */
strong { color: yellow !important; font-weight: 500; }
h1 { color: #00ccff; font-size: 22px; font-weight: 500; } /* Azure  */
h2 { color: #ff7f50; font-size: 20px; font-weight: 500; } /* Coral  */
h3 { color: #9b59b6; font-size: 18px; font-weight: 500; } /* Purple */
h4 { color: #90ee90; font-size: 20px; font-weight: 500; } /* Green  */

ul, ol { margin: 0 0 20px 20px; padding-left: 10px; color: #ffffff; } 
li     { margin-bottom: 15px; color: #ffffff; }
p      { color: #ffffff; }

code {
    background-color: #262626;
    padding: 0px 0px;
    border-radius: 0px;
    color: #f8f8f2;
    font-family: Consolas, "Courier New", monospace;
}

pre {
    background-color: #262626;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    color: #f8f8f2;
    font-family: Consolas, "Courier New", monospace; 
    line-height: 1.5;
}

.keyword  { color: #e6db74;  }
.string   { color: #ff00ff;  }
.function { color: #66d9ef;  }
.comment  { color: #6A8A87; font-style: italic; }
/* --------------------------------------------------------------- */