@font-face {
  font-family: 'Shapiro-65LightHeavyWide';
  src: url('../fonts/Shapiro-65LightHeavyWide/font.woff2') format('woff2'), url('../fonts/Shapiro-65LightHeavyWide/font.woff') format('woff');
}

html 
{
 overflow: hidden;
}
html, body {
 width: 100%;
 height: 100%;
}
html {
 display: table;
 margin: auto;
}
body {
 display: table-cell;
 text-align:center;
 vertical-align: middle;
}

body {
  background: rgb(25,25,25);
  font-family: 'Shapiro-65LightHeavyWide';
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none;
 }
	
 .header {
      display: block;
      width: 100%;
      text-align:center;
      text-transform: uppercase;
      color: #000022;
      position:absolute; 
      top: 0%; 
      margin-top: 3vh; 
  }
  
  .title {
      display: inline-block;
      background: #ffe900;
      padding:0.25em;
      padding-left: 0.6em;
      padding-right: 0.6em;
    }
	
  .footer {
      display: block;
      width: 100%;
      text-align:center;
      color: #000022;
      position:absolute; 
      bottom: 0%; 
      margin-bottom: 3vh; 
  }
  .subtitle {
      color: rgba(237, 237, 255, 0.9);
      padding:0.25em;
      text-transform: uppercase;
      margin-top:0.2em;
    }
  .infotext {
      color: rgba(237, 237, 255, 0.9);
      padding:0.25em;
      text-transform: uppercase;
    }
  #about {
      color: rgba(237, 237, 255, 0.9);
      padding:0.25em;
      margin-top:2em;
    }
  a:link, a:hover, a:visited, a:active {
      color: rgba(237, 237, 255, 0.9);
      padding:0.25em;
    }

 .version {
      position:absolute; 
      top: 3vh;
	  left: 1.5vw;
	  z-index: 99999;
 }

 .connect-menu {
      position:absolute; 
      top: 3vh;
	  right: 1.5vw;
	  z-index: 99999;
 }
 
 .app-logo {
	 width: 4vh;
	 opacity: 0.9;
	 margin-bottom: 1.5vh;
 }
 
 a.app-logo:hover {
	 opacity: 0.6;
 }
  
.connect-btn {
    position: absolute;
	display:block;
	width:100%;
    top: 45%;
    transform: translateY(calc(-50%));
    left: 50%;
    transform: translateX(calc(-50%)); 
}

.current-rhythm {
    position: absolute;
	display:block;
	width:100%;
    top: 66%;
    transform: translateY(calc(-50%));
    left: 50%;
    transform: translateX(calc(-50%));
    margin-top: 3vw;
}

.vertext {
 color: rgba(237, 237, 255, 0.9);
}

a.atlink:link, a.atlink:hover, a.atlink:visited, a.atlink:active {
 white-space: nowrap;
 padding-bottom:0;
 margin-bottom:0;
 line-height: 1.0;
 color: rgba(255, 109, 89, 0.9);
}

.atsub {
 display: block;
 color: rgba(255, 109, 89, 0.9);
 margin-top: 0.1em;
 padding-top:0;
 line-height: 0;
}

a.sm2_link {
 /* default state: "a playable link" */
 color: rgba(237, 237, 255, 0.9);
 text-decoration: none;
 padding: 0.5em;
 border: 2px solid rgba(255, 255, 255, 0.9); 
}

a.sm2_link:hover {
 /* default (inactive) hover state */
 color: rgba(237, 237, 255, 0.6);
}

a.sm2_playing {
 /* "now playing" */
 background-color:transparent;
 color: rgba(0, 255, 0, 0.9);
 text-decoration:none;
 border: 1vh solid rgba(255, 255, 255, 0.6); 
}

a.sm2_playing:hover {
 /* "clicking will now pause" */
 color: rgba(0, 255, 0, 0.9);
}

a.sm2_playing:before {
 /* "now playing" */
 content:'DIS';
 background-color:transparent;
 color: rgba(0, 255, 0, 0.9);
 text-decoration:none;
}

a.sm2_paused {
 /* "paused state" */
 color: rgba(237, 237, 255, 0.9);
 text-decoration: none;
}

a.sm2_paused:hover {
 /* "clicking will resume" */
 color: rgba(237, 237, 255, 0.6);
}

@media ( min-width: 320px ) {
	.title { font-size: 3.5vh; }
	.infotext, .subtitle, .vertext { font-size: 2.33vh; line-height: 3.03vh; }
	.atsub, .pasub { font-size: 2.33vh; line-height: 2.33vh; }
	.btn-text { font-size: 8.63vw; }
	.atlink, .palink { font-size: 3.5vh; line-height: 3.5vh; }
}

@media screen and ( min-width: 720px )  {
	.title { font-size: 2vw; }
	.infotext, .subtitle, .vertext { font-size: 1.3vw; line-height: 1.73vw; }
	.atsub, .pasub { font-size: 1.3vw; line-height: 1.3vw; }
	.btn-text { font-size: 4.9vw; }
	.atlink, .palink { font-size: 2vw; line-height: 2vw; }
}

@media screen and ( min-width: 1400px )  {
	.title { font-size: 1.5vw; }
	.infotext, .subtitle, .vertext { font-size: 1vw; line-height: 1.3vw; }
	.atsub, .pasub { font-size: 1vw; line-height: 1vw; }
	.btn-text { font-size: 3.7vw; }
	.atlink, .palink { font-size: 1.5vw; line-height: 1.5vw; }
}