body {
  background-image: linear-gradient(to right, rgb(238, 248, 196), rgb(198, 252, 234));
  font-family: Calibri, sans-serif;
  margin: 0;
  padding-top: 2rem; /* space for fixed navbar */
}

/* JSON syntax highlight */
.json-key    { color: brown; }
.json-string { color: olive; }
.json-number { color: teal; }
.json-boolean{ color: blue; }
.json-null   { color: red; }

/* Table styling */
.json-table {
  width: 100%;
  border-collapse: collapse;
}

.json-table th, .json-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.json-table th {
  background-image: linear-gradient(to right, #cdccf2, #c3f2c5);
  color: #19191d;
}

.json-table tr:nth-child(even) {
  background-image: linear-gradient(to right, rgb(228, 238, 187), rgb(183, 235, 217));
}

.json-table tr:hover {
    background-image: none;      /* Removes gradient */
    background-color: #ddd;    /* Shows hover color */
}

/* General table styles */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #9c9c9c;
  padding: 5px 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: normal;
}

/* Navbar styles */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #f2efef;
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
}

table.navbar {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

table.navbar td {
  border-left: 1px solid #cfcfcf;
  border-right: 1px solid #cfcfcf;
  padding: 0.1rem 0.6rem;
  font-size: 1rem;
  white-space: nowrap;
  text-align: left;
}

table.navbar td:last-child {
  text-align: right;
  width: 100%;
}

table.navbar a {
  text-decoration: none;
  color: #2e6930;
  font-size: 1rem;
  display: block;
  padding: 0.3rem 0;
}

table.navbar a:hover {
  background-color: #c3c3c3;
  padding: 0.3rem 0;
}



footer {
  background-color: #434343;
  padding: 1rem 2rem;
  font-family: Arial, sans-serif;
  color: #ffffff;
  margin-top: 2rem;
  border-top: 1px solid #ccc;
}

.footer-sections {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: left;
  gap: 1rem;
}

.footer-left, .footer-right {
  flex: 1;
  min-width: 200px;
}

.footer-left h4, .footer-right h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #ffffff;
}

.footer-left p, .footer-right p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

.footer-divider {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid #8d8989;
}

.footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  color: #ffffff;
}