body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the body takes up the full viewport height */
  margin: 0; /* Remove default margin */
}

main {
  flex: 1; /* Allow the main content to grow and push the footer down */
}

footer {
  background-color: var(--primary); /* Use Pico's primary color */
  color: var(--contrast); /* Use Pico's contrast color for text */
  padding: 1rem; /* Add some padding for spacing */
}

#color-test-box {
    padding: 2em;
    border-radius: 8px;
}

#color-test-controls li {
    cursor: pointer;
}


/* Emerald Palette 
#19e697
Some outlines and flairs
#1abc68
Some outlines and flairs
#158425
Some buttons
#0f540d
Cards
#13260d
Page Background
*/

/* Pink Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #0f540d;
  --primary-hover: #158425;
  --primary-focus: #1abc68;
  --primary-inverse: #19e697;
  --another-color #13260d
  --color-another #0f540d
}