html {
  background: var(--color-septary);
}

body {
  color: var(--color-white);
}

hr.faded {
  background-color: var(--color-primary);
  background-image: linear-gradient(left, var(--color-quadternary) 2%, var(--color-var(--color-primary)) 50%, var(--color-quadternary) 98%);
  background-image: -o-linear-gradient(left, var(--color-quadternary) 2%, var(--color-var(--color-primary)) 50%, var(--color-quadternary) 98%);
  background-image: -moz-linear-gradient(left, var(--color-quadternary) 2%, var(--color-var(--color-primary)) 50%, var(--color-quadternary) 98%);
  background-image: -webkit-linear-gradient(left, var(--color-quadternary) 2%, var(--color-var(--color-primary)) 50%, var(--color-quadternary) 98%);
  background-image: -ms-linear-gradient(left, var(--color-quadternary) 2%, #E6E6E6 50%, var(--color-quadternary) 98%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.02, var(--color-quadternary)), color-stop(0.5, var(--color-primary)), color-stop(0.98, var(--color-quadternary)));
}

textarea {
  background: var(--color-secondary);
  border-color: var(--color-black);
  color: var(--color-white);
}

a:link,
a:visited {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-white);
}

input[type='text'],
input[type='number'],
input[type='password'] {
  background: var(--color-secondary);
  border-color: var(--color-black);
  color: var(--color-white);
}

input[type='button'] {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

input[type='button'].Normal {
  background: #aa9;
}

input[type='button'].Fire {
  background: #f42;
}

input[type='button'].Water {
  background: #39f;
}

input[type='button'].Electric {
  background: #fc3;
}

input[type='button'].Grass {
  background: #7c5;
}

input[type='button'].Ice {
  background: #6cf;
}

input[type='button'].Fighting {
  background: #b54;
}

input[type='button'].Poison {
  background: #a59;
}

input[type='button'].Ground {
  background: #db5;
}

input[type='button'].Flying {
  background: #89f;
}

input[type='button'].Psychic {
  background: #f59;
}

input[type='button'].Bug {
  background: #ab2;
}

input[type='button'].Rock {
  background: #ba6;
}

input[type='button'].Ghost {
  background: #66b;
}

input[type='button'].Dragon {
  background: #76e;
}

input[type='button'].Dark {
  background: #754;
}

input[type='button'].Steel {
  background: #aab;
}

input[type='button'].Fairy {
  background: #e9e;
}

input[type='button'],
input[type='submit'],
button {
  background: linear-gradient(180deg, var(--color-gradient-one) 0, var(--color-gradient-two));
  border-color: var(--border-color-secondary);
  color: var(--color-white);
}

input[type='button'].disabled,
input[type='button']:disabled,
input[type='submit'].disabled,
input[type='submit']:disabled,
button.disabled,
button:disabled {
  background: linear-gradient(180deg, var(--color-light-grey) 0, var(--color-dark-grey));
}

input[type='button']:not(.disabled):hover,
input[type='button']:disabled:hover,
input[type='submit']:not(.disabled):hover,
input[type='submit']:disabled:hover,
button:not(.disabled):hover,
button:disabled:hover {
  background: linear-gradient(180deg, var(--color-primary) 0, var(--color-quinary));
}

select {
  background: var(--color-secondary);
  border-color: var(--color-black);
  color: var(--color-white);
}

/**
 * Styling for warning, description, success, etc divs.
 */
div.BODY-CONTAINER {
  border-color: var(--border-color);
  background: var(--color-sexary);
}

div.description {
  background: var(--bg-description);
  border-color: var(--border-color-description);
  color: var(--color-description);
}

div.error {
  background: var(--bg-error);
  border-color: var(--border-color-error);
  color: var(--color-error);
}

div.success {
  background: var(--bg-success);
  border-color: var(--border-color-success);
  color: var(--color-success);
}

div.warning {
  background: var(--bg-warning);
  border-color: var(--border-color-warning);
  color: var(--color-warning);
}

div .progress-container {
  background: var(--color-sexary);
  border: 1px solid var(--color-black);
}

div .progress-container .progress-bar.hp {
  background: var(--border-color-success);
}

div .progress-container .progress-bar.exp {
  background: var(--color-primary);
}

div .loading-element {
  border: 3px solid var(--color-primary);
  border-top-color: var(--color-tertiary);
}

/**
 * Apply drop shadow to an element.
 */
.drop-shadow {
  box-shadow: var(--box-shadow);
}

/**
 * Elements that have a gradient border.
 * All border-gradient elements utilize a drop shadow.
 */
.border-gradient {
  background: linear-gradient(180deg, var(--color-gradient-one) 0, var(--color-gradient-two));
  box-shadow: var(--box-shadow);
}

.border-gradient.hover>div:hover {
  background: var(--color-secondary);
}

.border-gradient>div {
  align-items: center;
  background: var(--color-quadternary);
  display: flex;
  justify-content: center;
}

/**
 * Banner
 */
header {
  border-color: var(--border-color);
}

/**
 * Navigation Bar
 */
nav {
  background: var(--color-sexary);
}

nav>.button:hover {
  background: var(--color-tertiary);
}

nav>.nav-container>.nav-item>a:hover {
  background: var(--color-tertiary);
}

nav>.nav-container>.nav-item>.dropdown {
  background-color: var(--color-quadternary);
  border-color: var(--color-primary);
  box-shadow: var(--box-shadow-nav);
}

nav>.nav-container>.nav-item.has-dropdown:focus-within>.dropdown>.dropdown-item>a {
  background: var(--color-quadternary);
}

nav>.nav-container>.nav-item.has-dropdown>.dropdown>.dropdown-item>a:hover {
  background: var(--color-tertiary);
}

/**
 * Panel
 */
.panel {
  background: linear-gradient(180deg, var(--color-gradient-one) 0, var(--color-gradient-two));
  box-shadow: var(--box-shadow-nav);
}

.panel>div:not(:last-child) {
  border-color: var(--color-secondary);
}

.panel>div:not(.head):not(:last-child) {
  border-color: var(--color-secondary);
}

.panel>.head {
  background: none;
}

.panel>.body {
  background: var(--color-quadternary);
  border-color: var(--color-secondary);
}

.panel>.body>.description {
  background: var(--color-tertiary);
  border-color: var(--color-primary);
}

.panel>.body>.nav>div {
  border-color: var(--color-primary);
  background: var(--color-tertiary);
}

.panel>.body>.nav>div:hover {
  background: var(--color-quinary);
}

.panel>.body>.pagi {
  border-color: var(--color-primary);
}

.panel>.body>.pagi>div {
  border-color: var(--color-primary);
}

.panel>.body>.pagi>div:not(:last-child) {
  border-color: var(--color-primary);
}

.panel>.foot {
  background: var(--color-quadternary);
  border-color: var(--color-secondary);
}

.panel>.foot>form>input {
  background: var(--color-quadternary);
  color: var(--color-white);
}

/**
 * Sidebar
 */
aside>.panel>.head {
  background: none;
}

aside>.panel.chat .message>.avatar {
  background: linear-gradient(180deg, var(--color-tertiary) 0, var(--color-gradient-one));
}

aside>.panel.chat .message>.avatar>a {
  background: var(--color-quinary);
}

aside>.panel.chat .message>.text {
  background: linear-gradient(180deg, var(--color-gradient-one) 0, var(--color-tertiary));
  box-shadow: var(--box-shadow);
}

aside>.panel.chat .message>.text>div {
  background: var(--color-quinary);
}

aside>.panel.chat .message.private>.text>div {
  background: var(--color-chat-pmsg);
  box-shadow: var(--box-shadow);
}

/**
 * Table
 */
table>tbody {
  background: var(--color-quadternary);
}

/**
 * Footer
 */
footer {
  background: var(--color-quadternary);
  border-color: var(--color-primary);
}

footer .social-links .icon {
  clip-rule: 'evenodd';
  fill: var(--color-primary);
  fill-rule: 'evenodd';
}

footer .social-links .icon:hover {
  fill: var(--color-white);
}

/**
 * Specific coloring for each member rank category.
 */
.member {
  border-color: var(--rank-member);
  color: var(--rank-member);
}

.chat_mod {
  border-color: var(--rank-chat_mod);
  color: var(--rank-chat_mod);
}

.moderator {
  border-color: var(--rank-moderator);
  color: var(--rank-moderator);
}

.super_mod {
  border-color: var(--rank-super_mod);
  color: var(--rank-super_mod);
}

.developer {
  border-color: var(--rank-developer);
  color: var(--rank-developer);
}

.bot {
  border-color: var(--rank-bot);
  color: var(--rank-bot);
}

.administrator {
  border-color: var(--rank-administrator);
  color: var(--rank-administrator);
  text-shadow: 0 0 15px var(--rank-administrator);
  animation-name: rainbow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

/**
 * Keyframe animations.
 */
@keyframes rainbow {
  from {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }

  to {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}

@keyframes loadspinner {
  to {
    transform: rotate(360deg);
  }
}