/* Apply font to body and force text elements to inherit it */
body, p, li, h1, a {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333333;
}

body {
  background: linear-gradient(135deg, #ffe6fa, #ffb3d9);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

/* External CSS test */
h1 {
  color: blue;
}

img {
  max-width: 100%;
  height: auto;
}

/* Media query using rem instead of px */
@media (min-width: 48rem) {
}

/* Mobile-first */
.group-list {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 10px;                  
  list-style: none;           
  padding: 0;
}

.group-list li a {
  display: block;
  padding: 8px 12px;
  background-color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
}

/* Desktop: Media Query */
@media (min-width: 30rem) {
  .group-list {
    grid-template-columns: repeat(4, 1fr); /* 4 horizontal columns on desktop */
  }
}