html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  /* trans cursor :) */
  cursor:
    url("data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAu6v0AP///wD7y1sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIQAAAAAAAAAAAAAAAAAAACEAAAAAAAAAAAAAAAAAAAIgAAAAAAAAAAAAAAAAAwACIAAAAAAAAAAAAAAAAAMwEgAAAAAAAAAAAAAAAAADMRIAAAAAAAAAAAAAAAAAAzESIRMwAAAAAAAAAAAAAAMxEiETAAAAAAAAAAAAAAADMRIhEAAAAAAAAAAAAAAAAzESIQAAAAAAAAAAAAAAAAMxEiAAAAAAAAAAAAAAAAADMRIAAAAAAAAAAAAAAAAAAzEQAAAAAAAAAAAAAAAAAAMxAAAAAAAAAAAAAAAAAAADMAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////////+f////D////w///+Yf///iH///4D///+AB///gAf//4AP//+AH///gD///4B///+A////gf///4P///+H////j////5////+//////////w=="),
    default;
}
html {
  background: linear-gradient(180deg, #ffb6c1, #ffffff, #87cefa);
}
/* a:hover,
a:active,
.click-invert:hover,
.click-invert:active {
	TODO: find a pointer cursor
} */
nav {
  display: flex;
  justify-content: center;
}
/* add some padding for home icon */
nav ul a:first-child {
  margin-right: 1rem;
}
footer {
  display: flex;
  justify-content: center;
  align-items: start;
}
.click-invert:hover {
  filter: hue-rotate(90deg);
}
.click-invert:active {
  filter: invert(100%);
}

.groove-box {
  background-color: rgba(255, 255, 255, 0.5);
  border: 5px groove black;
  padding: 1rem;
  margin: 1rem;
  width: 80vw;
  flex: 0 0 auto;
}

ul ul > li {
  /* nested lists should have different icon */
  list-style-type: circle;
}