* {
  font-family: Arial, sans-serif;
  margin: 10px;
  color: black;
}

body {
  background-color: #f8f8f8;
}

.panelDark,
.panelDarker,
.panelDarkest {
  padding: 10px;
  border-radius: 5px;
}

.panelDark {
  background-color: #f0f0f0;
}

.panelDarker {
  background-color: #e0e0e0;
}

.panelDarkest {
  background-color: #d3d3d3;
}

.title {
  color: black;
  font-size: 2em;
}

.footer {
  color: black;
  font-style: italic;
  font-size: 0.9em;
}

a {
  text-decoration: none;
  color: #0096ff;
}

a:hover {
  text-decoration: underline;
}

.black {
  color: #000000;
}
.white {
  color: #ffffff;
}

.red {
  color: #dc143c;
}
.green {
  color: #228b22;
}
.blue {
  color: #0096ff;
}
.yellow {
  color: #e49b0f;
}
.orange {
  color: #e97451;
}
.purple {
  color: #bf40bf;
}
.cyan {
  color: #40e0d0;
}
.brown {
  color: #d27d2d;
}
.pink {
  color: #da70d6;
}

/* DARK MODE CHANGES */

@media (prefers-color-scheme: dark) {
  * {
    color: #e1e1e1;
  }

  body {
    background-color: #181818;
  }

  .panelDark {
    background-color: #383838;
  }

  .panelDarker {
    background-color: #303030;
  }

  .panelDarkest {
    background-color: #282828;
  }

  .title {
    color: white;
  }

  .footer {
    color: white;
  }

  .black {
    color: #000000;
  }
  .white {
    color: #ffffff;
  }

  .red {
    color: #ee4b2b;
  }
  .green {
    color: #90ee90;
  }
  .blue {
    color: #89cff0;
  }
  .yellow {
    color: #ffea00;
  }
  .orange {
    color: #ffac1c;
  }
  .purple {
    color: #da70d6;
  }
  .cyan {
    color: #00ffff;
  }
  .brown {
    color: #cd7f32;
  }
  .pink {
    color: #ff00ff;
  }
}