/* dark.css */
:root {
  --bg-color: #0c0c0c;
  --container: #a0a0a0;
  --text-color: #000000;
  --big-red: #990000;
  --big-blue: #0056b3;
  --baby-blue: #0d6efd;
  --dark: #666;
  --darker: #222;
  --darkest: #111;
  --black: #000;
  --grey: #999;
  --white: #fff;
}

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

header {
    background-image: linear-gradient(to bottom, var(--black) 45%, var(--big-red) 60%, var(--black) 100%);
}

footer {
    background: var(--darkest);
    color: var(--dark);
}

h1, h2 {
    color: var(--big-red);
}

li {
    color: var(--dark);
}

hr {
    background-image: linear-gradient(to right, var(--darker), var(--darker), var(--big-red), var(--darker), var(--darker));
}

label,
code {
    color: var(--big-blue);
}

.form-control {
    background-color: var(--darkest);
    color: var(--big-red);
}

.form-control::placeholder {
    color:  var(--big-red);
}

.form-control:focus {
    background-color: var(--darker);
    border-color: var(--dark);
    color: var(--big-red);
    box-shadow: 0px 0px 4px var(--big-red);
}

.AppTitle {
    color: var(--grey);
}

.AppTitle:hover {
    background-image: linear-gradient(to right, var(--darker), var(--darker), var(--big-red), var(--darker), var(--darker));
}

.AppTagline {
    color: var(--dark);
}

.container {
    background: var(--darkest);
    color: var(--container);
    border: 2px solid var(--black);
}

.big-nav {
    background: var(--darkest);
    border: 2px solid var(--darker);
}

.software-list li {
    color: var(--white);
}
.software-list li:hover {
    color: var(--dark);
    cursor: pointer;
}

.infoBlock {
    background: var(--black);
}

.code-block {
    background-color: var(--darker);
    border: 3px solid var(--dark);
    color: var(--container);
    box-shadow: 0px 0px 4px var(--black) inset;
}

.widget {
    background-image: linear-gradient(to right, var(--black), var(--darker));
    border: 2px solid var(--dark);
    background-color: var(--black);
    color: var(--dark);
    box-shadow: 0px 0px 4px var(--black) inset;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: var(--darker);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dark);
}
::-webkit-scrollbar-thumb:active {
  background: var(--big-red);
}