@import '~nprogress/nprogress.css';
@import './mixins';

$fontPrimary: #cccccc;
$linkColor: #FFB019;
$bluePost: #00C0FF;

html {
  font-family: Arial,Helvetica,Sans-Serif;
  font-size: 10pt;
  color: $fontPrimary;
}

b {
  color: #ffffff;
}

body {
  background-color: black;
  background-image: url('../assets/forum-bg.jpg');
  background-repeat: repeat-x;
  position: relative;
  padding-bottom: 46px;
}

a {
  color: $linkColor;
  font-weight: bold;
  font-size: 9pt;
  text-decoration: underline;
  cursor: pointer;

  &:hover {
    color: white;
  }

}

hr {
  size: 1;
  background-color: #9E9E9E;
  display: block;
  unicode-bidi: isolate;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
  overflow: hidden;
  border: none;
  height: 1px;
}

.hr {
  background: rgb(71, 71, 71);
  width: 80%;
  height: 0.5px;
  border: 0;
  margin: 25px auto;
  display: block;
  clear: both;
}

h1, h2, h3, h4, h5, p {
  margin-top: 0;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;

  &--center {
    align-items: center;
  }

  &--wrap {
    flex-wrap: wrap;
  }
  
  &--column {
    flex-direction: column;
  }
}

.flex-1 {
  flex: 1;
}

span.grey {
  font-family: Arial,Helvetica,Sans-Serif;
  color: #A0A1A3;
  font-size: 9pt;
}

.text-center {
  text-align: center;
}

.clickable {
  cursor: pointer;
}

.form-group {
  & + & {
    margin-top: 10px;
  }
}

.input {
  border: 1px solid lighten(#161616, 10%);
  background-color: #161616;
  border-radius: 2px;
  color: $fontPrimary;
  width: 100%;
  padding: 5px 10px;

  &:focus {
    outline: none;
  }

  &__button {
    background: none;
    border: none;
    text-decoration: underline;
    color: $linkColor;
    font-weight: bold;
    font-size: 9pt;
    cursor: pointer;
    padding: 0;

    &:hover {
      color: white;
    }
  }
}

.blockquote {
  margin: 14px 40px 40px;
  padding: 5px;
  color: #ffffff;
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  word-break: break-word;

  small :last-child {
    margin-bottom: 0;
  }
}

div {
  box-sizing: border-box;
}

.markdown-container {
  overflow-wrap: break-word;
  word-break: break-word;

  img {
    max-width: 100%;
    height: auto;
  }
}

.blue {
  color: $bluePost !important;
}

.red {
  color: red;
}

.blue-post {
  p, li, {
    color: $bluePost;
  }
}

.page-link {
  margin: 0 5px;
}

.hide-tiny {
  @include breakpoint(mediumOrLess) {
    display: none;
  }
}

.hide-large {

  @include breakpoint(mediumOrMore) {
    display: none;
  }
}