@import url("styles/reset.css");
@import url("styles/fonts.css");
@import url("styles/variables.css");
@import url("styles/overscroll.css");
@import url("styles/app-bar.css");
@import url("styles/app-layout.css");
@import url("styles/sidebar.css");
@import url("styles/active-channel.css");
@import url("styles/messages.css");
@import url("styles/textarea.css");
@import url("styles/forms.css");
@import url("styles/invites.css");

body {
  background-color: var(--colour-active-channel-bg);
  color: var(--dark-text);
  font-family: "Alegreya";
}

hr {
  width: 90%;
}

.no-active-channel {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.vertical-aligner {
  display: table-cell;
  vertical-align: middle;
  font-style: italic;
}

/* TODO:
 * put this somewhere appropriate,
 * use a correct variable,
 * be sensitive to background colour context.
 */
a,
a:hover,
a:visited,
a:active {
  color: var(--light-text);
}

/* Debugging */
/* * /
div {
  outline: 1px dashed grey;
  background-color: var(--colour-background);
  box-shadow: 5px 5px 5px var(--colour-border);
}
/* */