* {
  cursor: default;
  margin: 0;
  padding: 0;
}

::selection {
    background: transparent;
}

.badge {
  float: left;
  margin: 0px 7px;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  border: 2px #fff solid;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: transparent;
  color: white;
  text-align: center;
  font-size: 2em;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-backface-visibility: hidden;
  display: inline-block;
  vertical-align: middle;
}

.badge:hover {
  height: 70px;
  width: 70px;
  line-height: 70px;
  border: 3px #fff solid;
  font-size: 2.2em;
  margin: -5px 5px 0px 5px;
}

.badgeSteam:hover {
  background-color: #121212;
}

.badgeDiscord:hover {
  background-color: #7289DA;
}

.badgeTwitter:hover {
  background-color: #00aced;
}

.badgeTeamspeak:hover {
  background-color: #1c2537;
}

.badgeBrowserCrash:hover {
  background-color: #5e0000;
}

.badgeYoutube:hover {
  background-color: #bb0000;
}

.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
  top: 0;
  color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

h1 {
  color: white;
text-align: center;
margin: -14px 0px 15px;
font-family: 'Nunito', sans-serif;
font-size: 15pt;
}

.pageWidth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: fadein 5s;
  -moz-animation: fadein 5s;
  -ms-animation: fadein 5s;
  -o-animation: fadein 5s;
  animation: fadein 5s;
  width: 750px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
  font-family: 'Nunito', sans-serif;
  color: #fff;
  -webkit-animation: fadein 5s;
  -moz-animation: fadein 5s;
  -ms-animation: fadein 5s;
  -o-animation: fadein 5s;
  animation: fadein 5s;
}

a:link {
    color: #fff;
    text-decoration: none;
}

a:visited {
    color: #fff;
}

a:hover {
    color: #fff;
}

a:active {
    color: #fff;
}