/*
Chris.Shier@gmail.com
http://csh.bz
2017
High Ticket Attractions
The New Pornographers
*/
@font-face {
  font-family: 'Ultra';
  src: url('../font/Ultra.woff') format('woff');
}

body, canvas, .titlecard {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Ultra', sans-serif;
}

body {
  background-color: black;
  animation: fadein;
  animation-duration: 2s;
  position: relative;
  text-align: center;
}
#headerlinks {
  font-family: sans-serif;
  font-size:x-small;
  z-index:1000;
  position:fixed;
  top:0;
  left:0;
  color: hsla(0,0%,100%,0.6);
  text-shadow: 0 0 10px white, 0 0 5px white;
  text-align:left;
}
#headerlinks > a {
  text-decoration:none;
  color:white;
}
#watercanvas {
  position: fixed;
  z-index: 0;
  top: -256px;
  left: -256px;
}

.titlecard {
  font: 7vw 'Ultra', sans-serif;
  z-index: 100;
  display: inline-block;
  position: fixed;
  color: white;
  left: 1em;
  right: 1em;
  pointer-events: none;
}

.glow {
  text-shadow: 0px 0px 10px white ,0px 0px 20px white,0px 0px 30px white;
}

#bandname {
  top: 3vh;
}

#trackname {
  bottom: 7vh;
}

#playpause {
  font-size: 5vh;
  right: 2vw;
  top: 1vw;
  z-index: 1000;
  color: hsla(180, 50%, 80%, 0.7);
  position: fixed;
  text-decoration: none;
  opacity: 0;
  display: none;
}

#playbutton {
  position: fixed;
  height: 1.15em;
  padding: -0.5em 0.1em 0.25em 0.1em ;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  font: 12vh 'Ultra', sans-serif;
  color: white;
  text-align: right;
  cursor: pointer;
}

#playbutton:hover {
  color: hsla(228, 100%, 80%, 0.8);
}

#playbutton:active {
  color: black;
}

@media (max-width: 45em) {
  .titlecard {
    font: 7vw 'Ultra', sans-serif;
  }
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  cursor: crosshair;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

canvas {
  background-color: hsl(221,81%,10%);
  background-image: url('../img/circuitbg.jpg');
  background-repeat: repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  background-position: 50% 50%;
}

audio {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
}

audio::-webkit-media-controls-panel {
  color: black;
  background: black;
}