* {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background-color: black;
}

#bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #161616;

  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  border-radius: 2px;
  box-shadow: -6px 6px 15px 5px rgba(0, 0, 0, 0.25);

  visibility: hidden;
  filter: brightness(0);

  -webkit-transition: filter 2s ease-out;
  -moz-transition: filter 2s ease-out;
  -o-transition: filter 2s ease-out;
  transition: filter 2s ease-out;
}

canvas:hover {
  cursor: pointer;
}

.disable-select {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

/* SCROLLBAR */
body::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  background-color: black;
}

body::-webkit-scrollbar-corner {
  background-color: black;
}

body::-webkit-scrollbar-thumb {
  background-color: #eeeeee;
}

/* LOADER */
#loader {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

#loadingBar {
  width: 0px;
  height: 5px;
  margin-top: 30px;
  background: #ffffff;
}
#loadingBarBg {
  width: 240px;
  height: 2px;

  background: #a8a8a8;
}

.bar {
  width: 30px;
  height: 30px;
  background: transparent;
  display: inline-block;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: lighter;
  font-size: 20px;

  line-height: 30px;
  text-align: center;

  transform-origin: center center;
  animation: loader 2s ease-in-out infinite;
}
.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}
.bar5 {
  animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}
.bar7 {
  animation-delay: 0.7s;
}
.bar8 {
  animation-delay: 0.8s;
}

@keyframes loader {
  0% {
    transform: translateY(20px);
    background: transparent;
  }
  50% {
    transform: translateY(0px);
    background: #fff;
  }
  100% {
    transform: translateY(-20px);
    background: transparent;
  }
}