/* This is a comment in CSS */
/* The bdy is the parent of all the page elements, those elements will inherit the body proerties */
body {
  font-family: Arial;
    background: #f0f0f0; /* A dark gray */
}


.header {
  background: #364f6b; /* A dark blue-gray */
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 24px; /* Adjust the font size */
  border-radius: 5px;
}

.SubDiv {
  background-color: white; /* Or any color you prefer */
  padding: 20px; /* Adds space inside the box */
  margin-top: 20px; /* Adds space above the box */
  border: 2px solid #ccc; /* Optional: adds a light border */
  border-radius: 10px; /* This is the property that rounds the corners */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 20px; /* Space between the columns */
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px; /* Adds space below the table */
}

td, th {
  border: 3px solid #dddddd;
  text-align: left;
  padding: 5px;
}

tr:nth-child(even) {
  background-color: #e6f2ff; /* A light blue */
}
tr:nth-child(odd) {
  background-color: #cce6ff; /* A slightly darker blue */
}

th {
  background-color: #80bfff; /* A bold blue for the header */
  color: dark blue; /* Optional: Changes text to white for better contrast */
}

/* This is the CSS rule to resize all images within .imgDiv */
.imgDiv img {
    width: 250px; /* Set a consistent width for all images */
    height: auto; /* Maintains the aspect ratio */
}