:root {
  --primary: #ffa101;
  --secondary: #fae6b1;
  --accent: #b3dee5;
  --active: #cc0000;
  --dark: #31525b;

  --link: #003566;
  --link-visited: #7266b0;
  --link-hover: #66ffcc;
  --link-active: #ff6666;

}
main {
  background-color: #ececec;
}
h1, h2, h3 {
  background-color: var(--dark);
  padding: .33em;
}
h1 {
  color: var(--primary);
  border-radius: 9px;
}
h2, h3 {
  color: var(--secondary);
}

/* Button Styling */
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button {
  margin: 1rem;
}

/* Classes Styling */
.nr {
    color: var(--accent);
}
.active {
    background-color: var(--active);
    font-weight: bold;
}
.zapper {
  color: white;
  background-color: crimson;
}
.accented {
  background-color: var(--accent);
}
.accented-text {
  color: var(--active);
}
.symbol {
  font-size: 24pt;
  color: black;
}
#r1c1d1 > h3.accented > span.nr {
  color: var(--dark);
}
.item > p {
  margin-top: .25em;
  padding: .33em;
}
.with-border {
  border:1px solid #333;
  padding:3px;
}
.help-block {
  color: red;
}
.alert-success {
  color: green;
}
/* Link Styling */
a:link {
    color: var(--link);
}

/* styles the unvisited link */
a:visited {
    color: var(--link-visited);
}

/* styles the link on being hovered */
a:hover {
    color: var(--link-hover);
}

/* styles the link while clicked */
a:active {
    color: var(--link-active);
}