@import url("reset.css");
@import url("utility.css");

/* https://whitep4nth3r.com/blog/quick-light-dark-mode-css/ */
:root {
  --bg-color: #f1f1f1;
  --fg-color: #1f1f1f;

  --main-background-color: pink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #252525;
    --fg-color: #f1f1f1;

    --main-background-color: #223a2c;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--fg-color);
}

header {
  padding: 10px;
  text-align: center;
}

main {
  background-color: var(--main-background-color);
}

img {
  width: 50%;
}

#skye {
  color: pink;
  background-color: black;
}

#chase {
  color: blue;
  background-color: rgb(155, 155, 155);
}

#marshall {
  color: red;
  background-color: green;
}

#zuma {
  color: orange;
  background-color: blue;
}

#rocky {
  color: green;
  background-color: yellow;
}

#rubble {
  color: yellow;
  background-color: orange;
}

#ryder {
  color: white;
  background-color: black;
}

#everest {
  color: purple;
  background-color: white;
}

#tracker {
  color: green;
  background-color: brown;
}

#liberty {
  color: yellow;
  background-color: orange;
}

footer {
  padding: 10px;
  text-align: center;
}