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

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
  .center-text {
  text-align: center;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.grid-container {
  display: grid; /* Enables CSS Grid layout */
  grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
  grid-template-rows: repeat(3, 1fr); /* Creates 3 rows of equal height */
  gap: 10px; /* Adds spacing between grid items */
  width: 90%; /* Example: Sets a width for the container */
  margin: auto; /* Centers the container */
}

.grid-item {
  background-color: lightblue; /* Example background color */
  border: 1px solid blue; /* Example border */
  display: flex; /* Used to center content within each item */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  font-size: 1.5em; /* Example font size */
}