html, body {
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
  overflow: auto;
  align-items: center;
}

.grid-item {
  height: 100%;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  text-align: center; /* added this line */
  background-color: var(--item-bg-color);

}

.grid-item a {

 display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  text-align: center; /* added this line */
}

.grid-item h2 {
  margin-top: 0;
  margin-bottom: 10px;
  justify-content: center; 
}

.grid-item p {
  margin-top: 0;
  justify-content: center; 
}

.grid-item:hover {
  background-color: var(--item-hover-color);
}

.grid-item a:hover {

}

:root {
  --text-color: #333;
  --item-bg-color: #C8C8B0;
  --item-hover-color: #f5f5dc;
}