/*globals*/

* { padding: 0; margin: 0; outline: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden; cursor: default; user-select: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 20px; line-height: 23px; color: #f8f8f2;
  background: #000;
}

a { color: #f8f8f2; text-decoration: none; }
i { font-style: normal; }


/*containers*/

#webgl {
  z-index: 1;
  opacity: 0; transition: 3s ease opacity;
}

#main {
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute; top: 0; left: 0; z-index: 2;
  overflow: auto;
}

#content {
  width: 820px; margin: 0 auto;
  opacity: 0; transition: 5s ease opacity;
}

#header {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 100%;
  text-align: right;
}
#header .icon-soundcloud {
  opacity: 0; transition: .2s ease opacity;
  margin-right: 20px;
}

#soundcloud {
  position: absolute; top: 0; left: 0; z-index: 4;
  opacity: 0; visibility: hidden; transition: .2s ease opacity;
}


/*syntaxhighlighter*/

#content .syntaxhighlighter {
  background: none !important; overflow-y: visible !important;
}
#content .syntaxhighlighter a {
  color: #66d9ef !important; transition: .2s ease all;
}
#content .syntaxhighlighter a:hover { color: #ae81ff !important; }


/*tooltip*/

.tooltip {
  position: absolute; top: -55px; left: 0; z-index: 1;
  opacity: 0; visibility: hidden; transition: .2s ease opacity;
  font-size: 16px; color: #a6e22e; white-space: nowrap;
  border: 1px solid #a6e22e; border-radius: 5px;
  background: #000; padding: 10px;
}


/*custom scrollbars in WebKit*/

::-webkit-scrollbar {
  width: 13px;
}
::-webkit-scrollbar-track-piece {
  background: #333;
  -webkit-border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background: #bbb;
  -webkit-border-radius: 8px;
  outline: 2px solid #333;
  outline-offset: -2px;
  border: 2px solid #333;
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #ddd;
  -webkit-border-radius: 8px;
}


/*icons*/

@font-face {
  font-family: 'fontello';
  src: url("/?originalUrl=https%3A%2F%2Fsimov.github.io%2Ffonts%2Ffontello.eot");
  src: url("/?originalUrl=https%3A%2F%2Fsimov.github.io%2Ffonts%2Ffontello.eot%3F%23iefix") format('embedded-opentype'),
     url("/?originalUrl=https%3A%2F%2Fsimov.github.io%2Ffonts%2Ffontello.woff") format('woff'),
     url("/?originalUrl=https%3A%2F%2Fsimov.github.io%2Ffonts%2Ffontello.ttf") format('truetype'),
     url("/?originalUrl=https%3A%2F%2Fsimov.github.io%2Ffonts%2Ffontello.svg%23fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-comment,
.icon-star,
.icon-fork,
.icon-soundcloud,
.icon-user { font-family: 'fontello'; }

.icon-comment:before { content: '\e800'; }
.icon-star:before { content: '\e801'; }
.icon-fork:before { content: '\e802'; }
.icon-soundcloud:before { content: '\e803'; }
.icon-user:before { content: '\e804'; }

.icon-comment,
.icon-soundcloud { color: #969696; transition: .5s ease all; }
.icon-soundcloud:hover,
.icon-comment:hover { color: #f8f8f2; }

.icon-star { color: #E6DB74; }
.icon-fork { color: #66d9ef; }
.icon-user { color: #E6DB74; font-size: 16px; position: relative; top: -1px; }


/*mobile*/

@media only screen and (max-width: 830px) {
  #main { width: auto; }
  #content { width: auto; margin: 0; }
  .syntaxhighlighter, .code, .container {
    width: auto !important; overflow: hidden;
  }
}