/* Elements */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(
    50deg,
    rgb(30, 34, 39) 5%,
    rgb(89, 40, 93) 60%,
    rgb(38, 66, 147) 100%
  );
}
shine {
  /*   positioning */
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  /*   gradient   */
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 71%,
    rgba(255, 255, 255, 0) 100%
  );
  /* FF3.6+ */
  background: gradient(
    linear,
    left top,
    right top,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(1%, rgba(255, 255, 255, 0.03)),
    color-stop(30%, rgba(255, 255, 255, 0.85)),
    color-stop(50%, rgba(255, 255, 255, 0.85)),
    color-stop(70%, rgba(255, 255, 255, 0.85)),
    color-stop(71%, rgba(255, 255, 255, 0.85)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 71%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 71%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Opera 11.10+ */
  background: -ms-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 71%,
    rgba(255, 255, 255, 0) 100%
  );
  /* IE10+ */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.781) 30%,
    rgb(255, 255, 255) 50%,
    rgb(255, 255, 255) 70%,
    rgba(255, 255, 255, 0.85) 71%,
    rgba(255, 255, 255, 0) 100%
  );
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
  /*  forming the shine element
        play around with the width, skew and gradient to get different effects
      */
  width: 15%;
  height: 100%;
  transform: skew(-10deg, 0deg);
  -webkit-transform: skew(-10deg, 0deg);
  -moz-transform: skew(-10deg, 0deg);
  -ms-transform: skew(-10deg, 0deg);
  -o-transform: skew(-10deg, 0deg);
  /*  animating it  */
  animation: move 5s;
  animation-iteration-count: infinite;
  /* animation-delay: s; */
  -webkit-animation: move 5s;
  -webkit-animation-iteration-count: infinite;
  /* -webkit-animation-delay: 1s; */
  -moz-transform: skew(-10deg, 0deg);
  -moz-animation: move 5s;
  -moz-animation-iteration-count: infinite;
  /* -moz-animation-delay: 1s; */
  -ms-transform: skew(-10deg, 0deg);
  -ms-animation: move 5s;
  -ms-animation-iteration-count: infinite;
  /* -ms-animation-delay: 1s; */
  -o-transform: skew(-10deg, 0deg);
  -o-animation: move 5s;
  -o-animation-iteration-count: infinite;
  /* -o-animation-delay: 1s; */
}

ti {
  font-size: 2em;
  color: white;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
}

/* Classes */

.fluid_background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.header {
  display: flex;
  padding: 0px;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  background: linear-gradient(
    50deg,
    rgb(30, 34, 39) 5%,
    rgb(89, 40, 93) 60%,
    rgb(38, 66, 147) 100%
  );
  border-radius: 0px 0px 10px 10px;
  width: 100%;
  height: 4em;
  position: relative;
  overflow: hidden;
}

.header_content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* ID's */

#Logo {
  height: 5em;
  width: 5em;
}

/* Animations */

@keyframes move {
  0% {
    left: -20%;
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  48% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 100%;
    width: 30%;
  }
}

/* @-webkit-keyframes move {
  0% {
    left: -20%;
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  48% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 100%;
  }
}
@-moz-keyframes move {
  0% {
    left: -20%;
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  48% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 88%;
  }
}
@-ms-keyframes move {
  0% {
    left: -20%;
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  48% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 100%;
  }
}
@-o-keyframes move {
  0% {
    left: -20%;
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  48% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 100%;
  }
} */