body {
    background-image: url('main_bgs/sky_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

h1 {
  font-family: 'Nunito', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;        /* bold */
  color: #4b0082;          /* deep indigo, easy on eyes */
  text-align: left;
  margin: 20px 0;
  letter-spacing: 1px;

  /* Rounded background effect */
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
    font-family: 'Poppins', 'Arial', sans-serif; /* Rounded, modern font */
    color: #4B0082; /* Deep indigo */
    font-weight: 700;
    text-align: left; /* aligns all h2 left */
    letter-spacing: 1px; /* optional spacing */
    margin-bottom: 10px; /* some spacing below */
}

.grid-item button {
    background: transparent;
    border: 2px solid rgba(75, 0, 130, 0.1);
    color: rgba(75, 0, 130, 0.6);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}


.grid-item button:hover {
    background: rgba(0,0,0,0.1);  /* subtle hover effect */
    border-color: #4b0082;            /* optional border color change */
}

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* semi-transparent background */
}

  /* Modal content box */
.modal-content {
    /* background-color: #e6e6ff; */
    margin: 10% auto; /* center vertically & horizontally */
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

  /* Close button */
.close {
    color: #ff9999;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #ff0000;
}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 20px;
  margin: 20px;
}

.grid-item {
  background: linear-gradient(135deg, #e6e6ff, #ffe6ff);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.category-content {
    font-family: monospace;
    white-space: pre-wrap;
    text-align: left;
}