/*##############################
## CSS by nous@artixlinux.org ##
################################*/

/* standard elements */
* {
  margin: 0;
  padding: 0;
//  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: #0b0a0a;
  color: #d9d9d9;
  font-family: Ubuntu, Verdana, "Dejavu Sans", sans-serif;
  margin: 0;
  line-height: 1.2em;
}

p {
  font-size: 1.2em;
  border-radius: 5px;
}

a {
  color: #53bffc !important;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-decoration: none;
}

a:hover {
  color: #ccf;
  text-decoration: underline;
}

e {
  font-size: 1em;
}

img {
  height: auto;
  vertical-align: middle;
//  vertical-align: -webkit-baseline-middle;
//  width: 100%;
//  position: absolute;
//  top: 50%;
//  margin-top: -76px;
//  max-width: 100%;
}

.bannerimg {
  height: auto;
  width: 98vw;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.middle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

h0 {
  color: #aaa;
  padding-top: 16px;
  font-size: 1.4em;
  padding-bottom: 32px;
}

h1 {
  font-size: 1.3em;
  padding-bottom: 4px;
}

h2 {
  font-size: 1.2em;
  padding-bottom: 4px;
}

h1-padless {
  padding-top: 4px;
  font-size: 2em;
}

h1,h2,h3 {
  color: #eaeaea;
  padding-top: 4px;
}

li {
//  list-style: url(img/li.gif);
  margin-left: 18px;
//  line-height: 150%;
  text-align: left;
}

ul {
//  font-size: 1.1em;
  padding-bottom: 1.2em;
  border-radius: 5px;
}

code, .bio-text {
  font-size: 0.9em;
  padding-bottom: 1.2em;
  border-radius: 5px;
  background: #0b0a0a;
  width: 99%;
  border: 1px solid #777;
  color: #dadada;
  display: block;
  font-family: "DejaVu Sans Mono", Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 4px 6px;
  white-space: pre-wrap;
  word-break: break-all;
}

table {
// table-layout: fixed;
//  width: 50%;
//  white-space: pre-wrap;
  word-wrap: break-word;
}

th {
  word-break: initial;
  white-space: normal;
}

.clearer {clear: both;}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  min-height: 100vh;
}

.flex-container > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 100%;
          flex: 1 100%;
}

#logo {
//  background: #0000;
  background-image: url(img/artix-logo.png);
  background-repeat: no-repeat;
  width: 3vw;
  height: auto;
  z-index: 8;
}

#navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
//  flex: 99%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  background: #0005;
  position: absolute;
//  width: 99%;
  left: 0.5%;
  right: 0.5%;
  text-shadow: 1px 2px 1px black;
  padding: 0px 5% 0px 4px;
  margin-bottom: 1em;
  -webkit-transition: top 1s;
  -o-transition: top 1s;
  transition: top 1s;
  z-index: 5;
}

#navbar a {
  font-weight: bold;
  font-size: 1.2em;
  padding: 0px 4px;
  text-decoration: none;
  color: #8bf !important;
}
#navbar a:hover {
//  font-size: 1.8em;
  color: #fff !important;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.topnav .icon {
  display: none;
}

.banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
//  flex: 100%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  background: transparent 0 0 no-repeat fixed;
  background-size: auto auto;
  text-align: center;
  background-size: cover;
  width: 99%;
  margin-bottom: 1em;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
//  height: 480px;
  max-width: 100vw;
}

.banner-text {
  position: absolute;
  top: 38%;
  left: 0%;
  margin-top: 0;
  width: 100%;
  text-align: center;
}

.banner h1, h2 {
  margin-bottom: 0;
  font-size: 5vw;
  color: white;
  font-weight: 500;
  text-shadow: 0 3px 3px black;
  text-transform: none;
  letter-spacing: normal;
  padding-bottom: 5vw;
}

.banner h2 {
  font-size: 4vw;
  padding-bottom: 0vw;
}

.navbar-spacer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  height: 7vw;
  visibility: hidden;
//  padding-bottom: 6vh;
}

.content, .content-bio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  -webkit-box-flex: 73%;
      -ms-flex: 73%;
          flex: 73%;
//  padding: 1% 0%;
  padding-bottom: 1em;
//  margin-bottom: auto;
//  margin-bottom: 1em;
}

.content-full-width {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  border: 1px solid #777;
  margin-bottom: 1em;
  background: #767676;
}

.box, .box-important {
  background: #2a2a2a;
  margin: 2px auto 2px;
  padding: 10px;
  border-radius: 2px;
  width: 100%;
}

.box-important {
  background: #4a2a2a;
  line-height: 1.4;
}

.content-bio {
//  flex-flow: row wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  background: #2a2a2a;
//  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0px;
}

.bio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
//  justify-content: space-around;
  max-width: 98%;
  //margin-bottom: 3%;
  margin: 1em;
  padding: 0 0 0 1em;
  border: 1px solid #777;
}

.bio-text {
  font-family: Ubuntu, Verdana, "Dejavu Sans", sans-serif;
  border: none;
  margin: 0 0 0 1em !important;
  white-space: pre-wrap;
//  word-break: normal;
  word-break: break-all;
}

.news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #4499ff;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1em !important;
}
.timestamp {
  color: #dadada;
  font-size: 0.8em;
  word-break: initial;
  width: -moz-fit-content;
}

.avatar, avatar-pad {
  display: inline-flex;
  position: relative;
  top: 1em;
  height: 100%;
  width: 10vw;
  max-height: 10vw;
  max-width: auto;
//  align-self: center;
  border-radius: 7px;
//  border: 1px solid #999;
}

.avatar-pad {
  height: 10px;
}

.sidebar {
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 5%;
      -ms-flex: 5%;
          flex: 5%;
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  padding-left: 1%;
//  padding-bottom:20%;
  margin-bottom: 1em;
}

.sidebar a {
  text-decoration: none;
}

.sidebar a:hover:not(.active) {
  color: #ccf;
  text-decoration: underline;
}

.footer-spacer {
  margin-top: auto;
  margin-bottom: auto;
  visibility: hidden;
  height: 0vh;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: end;
      align-self: flex-end;
  background: #1b1a1a;
  color: #dfdfdf;
  font-size: 1.1em;
  padding: 4px 0px 4px 0px;
  margin-top: auto;
}

.copyright {
  padding-left: 25%;
  white-space:nowrap;
}

.email {
  font-size: 0.7em;
  color: rgba(61, 61, 61, 0.7);
  padding: 0 4px 0 0;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first
one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) { display: none; }
  .topnav a {display: none;}
  .topnav a.icon { display: block; }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks
on the icon. This class makes the topnav look good on small screens (display the links
vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topnav.responsive { position: relative; }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  /* When on medium sized screens, we center it by evenly distributing empty space around items */
  .navbar { -ms-flex-pack: distribute; justify-content: space-around; }
  .sidebar { -webkit-box-flex: 25%; -ms-flex: 25%; flex: 25%; }
  .copyright { padding-left: 15%; }
}

@media screen and (max-width: 700px) {
  #navbar { width: auto; }
  .flex-container: { display: block; flex-flow: column; }
  .sidebar { flex: 100%; }
  .content, .content-bio, .box: { font-size: 0.7em; }
  .bio {
    margin-left: 2px;
    margin-right: 2px;
    flex-flow: column;
    padding: 0;
    text-align: center;
  }
  .box-important { text-align: center; }
  .content-bio { padding: 0; }
  .bio-text {
    align-self: center;
    margin: 0 !important;
    width: 95%;
  }
  .avatar {
    flex: 1;
    align-self: center;
    top: 0;
  }
//  .content, .content-bio, .content-full-width { margin: 1em 1px 1em 1px; }
}


/* On screens that are less than 480px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 480px) {
  .content, .sidebar {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    padding: 2px;
  }
  .footer {
    flex-flow: column;
  }
  .copyright { padding-left: 0; }
  /* On small screens, we are no longer using row direction but column */
//  #navbar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}

@media screen and (max-width: 320px) {
  .content {
    margin-right: 0%;
    padding: 10px 2px 10px 2px;
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
  /* On small screens, we are no longer using row direction but column */
//  #navbar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}

@media screen and (min-height: 900px) and (max-height: 1200px) {
  .footer-spacer { height: 2vw; }
}

@media screen and (min-height: 1200px) and (max-height: 2000px) {
  .footer-spacer { height: 5vw; }
}

@media screen and (min-width: 700px) and (orientation: landscape) {
  .content { -webkit-box-flex: 80%; -ms-flex: 80%; flex: 80%; }
  .sidebar { -webkit-box-flex: 18%; -ms-flex: 18%; flex: 18%; }
}

@media screen and (min-width: 700px) and (orientation: portrait) {
  .content { -webkit-box-flex: 65%; -ms-flex: 65%; flex: 65%; }
  .sidebar { -webkit-box-flex: 30%; -ms-flex: 30%; flex: 30%; }
}