*{
  box-sizing:border-box;
}

html{
  background: url(../img/radio.jpg) no-repeat center center fixed;
  background-size: cover;
  font-family:'Helvetica Neue', sans-serif;
}

body{
  max-width:50em;
  margin:auto;
}

main{
  background:rgba(100%,100%,100%,.5);
  padding:2em;
}

h1, h2, h3, h4{
  font-family:'Luckiest Guy', sans-serif;
}

h1{
  font-size: 6em;
  text-align:center;
  letter-spacing:.05em;
  color:#fff;
  text-shadow:.05em .05em 0 #000;
  -webkit-text-stroke: 1px #000;
}

h2, h3{
  font-size:3em;
  letter-spacing:.05em;
}

h4{
  font-size: 1.5em;
  letter-spacing:.05em;
  text-align: center;
}

a {
  color: inherit;
}

.cf:after{
  content:'';
  display:table;
  clear:both;
}

.song{
  position:relative;
  width:calc(50% - 1em);
  float:left;
  overflow:hidden;
  margin:.5em;
}

.song img{
  width:100%;
  display:block;
}

.song p {
  position:absolute;
  font-family:'Helvetica Neue';
  bottom:0;
  cursor:pointer;
  font-size:2em;
  color:#fff;
  margin:0;
  width:100%;
  font-weight:100;
  padding:.5em .5em .25em .5em;
  background-image: -webkit-gradient(
    linear, left top, left bottom, from(rgba(80,80,80,0)),
    to(rgba(50,50,50,0.8)), color-stop(.5,#333333)
  );
}

.song button{
  position:absolute;
  top:0;
  margin:1em;
  transform:translateY(-200%);
  transition:all .2s ease;
  right:0;
}

.song:hover button{
  transform:translateY(0%);
}

.song form{
  background: #000;
  padding:.5em;
  padding-top:2.5em;
  height:350px;
}

.song input{
  width:100%;
  font:inherit;
  margin-bottom:.5em;
}

.song form button {
  top:auto;
  right:auto;
  margin-left:0;
  transform: none;
  position:relative;
}

.songPlayer{
  position:fixed;
  padding:1em;
  bottom:0;
  background:#000;
  color:#fff;
  z-index:3;
  left:0;
  width:100%;
}
.songPlayer h2{
  margin-top:.5em;
  margin-bottom:.5em;
}

.user form{
  background: #000;
  padding:.5em;
  padding-top:2.5em;
  height:350px;
}

.user input{
  width:100%;
  font:inherit;
  margin-bottom:.5em;
}

.user form button {
  top:auto;
  right:auto;
  margin-left:0;
  transform: none;
  position:relative;
}

.user label{
  color: white;
}

.user-nav a{
  color: white;
}

.user-nav {
  padding:1em;
  bottom:0;
  background:#000;
  color:#fff;
  z-index:3;
  left:0;
  width:100%;
}

.logout {
  padding:1em;
  bottom:0;
  background:#000;
  color:#fff;
  z-index:3;
  left:0;
  width:100%;
}

.welcome {
  padding:1em;
  bottom:0;
  background:#000;
  color:#fff;
  z-index:3;
  left:0;
  width:100%;
  text-align: center;
}