@font-face {
    font-family: 'rubikmedium';
    src: url('../fonts/rubik-medium-webfont.woff2') format('woff2'),
         url('../fonts/rubik-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rubikregular';
    src: url('../fonts/rubik-regular-webfont.woff2') format('woff2'),
         url('../fonts/rubik-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
 color: #080808;
 height:100%;
 font-size:7vh;
 font-family: 'rubikregular';
}
b {
 font-family: 'rubikmedium';
 font-weight: normal;
}
html, body {
 width: 100%;
 height: 100%;
}
html {
 display: table;
 margin: auto;
}
body {
 display: table-cell;
 text-align:center;
 vertical-align: middle;
}

a:link, a:visited {
 color: #000000;
}

a:hover, a:active {
 color: #0000ff;
}

a.sm2_link {
 /* default state: "a playable link" */
 color:#000000;
 border: 0.6vh #000 solid;
 padding: 1.1vh;
 padding-top: 0.6vh;
 padding-bottom: 0.4vh;
 border-radius: 0.7vh;
 text-decoration: none;
}

a.sm2_link:hover {
 /* default (inactive) hover state */
 color:#000000;
}

a.sm2_playing {
 /* "now playing" */
 background-color:transparent;
 color:#000000;
 text-decoration:none;
}

a.sm2_playing:hover {
 /* "clicking will now pause" */
 color:#000000;
}

a.sm2_playing:before {
 /* "now playing" */
 content:'DIS';
 background-color:transparent;
 color:#000;
 text-decoration:none;
}

a.sm2_paused {
 /* "paused state" */
 color:#00000;
 text-decoration: none;
}

a.sm2_paused:hover {
 /* "clicking will resume" */
 color:#000000;
}

.bg {
  animation:slide 7s ease-in-out infinite alternate;
  background-image: linear-gradient(-210deg, #0000ff 20%, transparent 80%);
  bottom:0;
  left:-50%;
  opacity:0.3;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}


.bg2 {
  animation:slide 12s ease-in-out infinite alternate;
  background-image: linear-gradient(-70deg, #ffffff 20%, transparent 80%);
  bottom:0;
  left:-50%;
  opacity:0.6;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-2;
}

.bg3 {
  animation:slide 12s ease-in-out infinite alternate;
  background-image: linear-gradient(-270deg, #ffff00 20%, transparent 80%);
  bottom:0;
  left:-50%;
  opacity:0.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-2;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}