:root {
  color-scheme: light dark;
  --fg: light-dark(black, white);
  --bg: light-dark(white, black);
  --gray: #555555;
  --red: #CC0000;
  --green: #6AA84F;
}

/* generic reusable classes */
.button {
  border: 1px solid var(--fg);
  width: fit-content;
  padding: 5px;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-gap: 5px;
}
.underlined { border-bottom: 1px solid black; }
.center { text-align: center; }

/* specific element styles */
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: monospace;
  padding: 0;
  margin: 0;
}
.projects-container {
  margin: 5px;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.projects-header {
  border-bottom: 4px solid var(--fg);
  padding-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.projects-count::before {
  content: "total projects: ";
}
.projects-list {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.project-container {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  padding-bottom: 5px;
  border-bottom: 4px solid var(--fg);
}
.project-name-input {
  border: 1px solid var(--fg);
  margin: 0px;
  padding: 3px;
  text-align: center;
  font-family: monospace;
  font-size: inherit;
  background-color: var(--bg);
  box-sizing: border-box;
  flex-grow: 1;
}
.toggle-button { color: white; }
.toggle-button[running="true"]::before { content: "started"; }
.toggle-button[running="false"]::before{ content: "stopped";}
.toggle-button[running="true"] {
  background-color: var(--green);
  border-color: var(--green);
}
.toggle-button[running="false"] {
  background-color: var(--red);
  border-color: var(--red);
}

.cancel-button[running="false"] { visibility: hidden; }

.reset-button { margin-left: auto; }

.time { font-size: 175%; }