/* Base body styles */
body {
  background-color: white; /* Set background color to white */
  font-family: Roboto, sans-serif; /* Use Roboto font */
  margin: auto; /* Center content */
  max-width: 70%; /* Limit content width */
}

/* Section wrapper */
.section {
  padding: 2rem 0; /* Vertical spacing */
}

/* Date and time container */
.date-time-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Date text style */
.date {
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase; /* Uppercase text */
  margin: 0;
  color: #1e272e;
  text-align: left;
}

/* Time text style */
.time {
  text-align: right;
}

/* Greeting header style */
.greeting {
  font-weight: 900;
  font-size: 3rem; /* Large font */
  margin: 0.5rem 0;
  color: #000;
}

/* Section title */
.section-title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 0.5rem;
}

/* Section subtitle */
.section-subtitle {
  padding-top: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 1rem;
}

/* Grid layout for app links */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Responsive grid */
  gap: 1rem; /* Spacing between grid items */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Reset list item style */
.list-grid-li {
  list-style: none;
}

/* App link card style */
.list-grid-li-a {
  display: flex;
  flex-direction: row; /* Icon and text side-by-side */
  align-items: center; /* Vertically center content */
  justify-content: flex-start; /* Align items to left */
  padding: 1rem;
  color: #000;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1rem;
  border: 1px solid #ccc; /* Card border */
  border-radius: 0.5rem;
  transition: background 0.2s; /* Hover transition */
  word-wrap: break-word;
  overflow-wrap: break-word;
  gap: 0.75rem; /* Space between icon and text */
}

/* Hover effect for cards */
.list-grid-li-a:hover {
  background-color: #f0f0f0;
}

/* Icon container in the card */
.list-grid-li-a-iconlabeldiv {
  font-size: 1.5rem; /* Icon size */
  width: 2rem; /* Fixed width to align icons */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text label container in the card */
.list-grid-li-a-labeldiv {
  display: flex;
  flex-direction: column; /* Stack label and sublabel */
  align-items: flex-start; /* Align text left */
  line-height: 1; /* Tight line spacing */
}

/* Sublabel style */
.li-sublabel {
  text-transform: uppercase;
  margin: 0;
  font-size: 0.65rem;
  font-weight: 400;
  color: #1e272e;
}

/* Grid for bookmarks section */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive fit */
  gap: 2rem;
  margin-top: 1rem;
}

/* Category group layout */
.category {
  display: flex;
  flex-direction: column;
}

/* Category section header */
.category-title {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: #000;
}

/* Remove bullets and spacing from list */
.category ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Space between category items */
.category ul li {
  margin-bottom: 0.25rem;
}

/* Link styling in categories */
.category ul li a {
  text-decoration: none;
  color: #222;
  font-weight: 400;
}

/* Hover effect for links */
.category ul li a:hover {
  text-decoration: underline;
}