.shadow {
    filter: drop-shadow(3px 3px 5px #333);
}
/* Light mode styles (default) */
body {
  background-color: #ffffff;
  color: #333333;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222222;
    color: #ffffff;
  }
  /* Define other dark mode styles for elements like headers, text, links, etc. */

    .shadow {
        filter: drop-shadow(5px 5px 8px #000);
    }
}

a {
    color: #a7a1e9;
}
a.visited {
    color: #9b77ad;
}
a:hover {
    color: #d61a3c;
}
a:active {
    color: #ff0000;
}

.container {
  display: grid;
  /* Creates two columns, each taking an equal fraction (1fr) of the available space */
  grid-template-columns: 1fr 1fr; 
  /* Adds a gap between columns for spacing */
  gap: 20px; 
}

.column {
  padding: 1rem;
  min-width: 320px;
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    /* Optionally remove the gap for a tighter stack */
    gap: 0;
  }
}