html,
body {

    background-color: #000000;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    }
        
h1 {
    
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 110%;
    color: #aca8a8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -800%);
    padding-top: 10px;
 
}

.logo {
    
    height: 10%;
    width: auto;
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
} 

/* ------------------- Font styles -----------------*/

span.trash {
    font-family: Logo1;
    font-size: 70px;
    /*color: rgba(252, 184, 212, 0.94);*/
    margin-right: -12px;
}


span.junk {
    font-family: Logo2;
    font-size: 60px;
    /*color: rgba(252, 184, 212, 0.94);*/
}


span.spam {
    font-family: Logo3;
    font-size: 70px;
    /*color: rgba(252, 184, 212, 0.94);*/
}


span.bits {
    font-family: Logo4;
    font-size: 58px;
    /*color: rgba(252, 184, 212, 0.94);*/
}

/* -----------------------horizontal list code ---------------------*/

#logo_comp {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%) 
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

ul#horizontal-list {
	min-width: 696px;
	list-style: none;
	padding-top: 30px;
	}

ul#compiled li {
		display: inline;
	}


a {
      text-decoration:none;
    color: aliceblue;
}

   
/*-------------- TEXT EFFECTS ----------------------*/

/* ------TRASH ---------*/


#compiled:nth-child(1) {
  color: #ffad11;
  -webkit-animation: neon1 .5s ease-in-out infinite alternate;
  -moz-animation: neon1 .5s ease-in-out infinite alternate;
  animation: neon1 .5s ease-in-out infinite alternate;
}

#compiled:nth-child(1) a:hover {
    color: rgba(237, 16, 151, 0.38);
    transition: 400ms;
    -webkit-animation: 1.5s ease-in-out infinite alternate;
    -moz-animation: 1.5s ease-in-out infinite alternate;
    animation: 1.5s ease-in-out infinite alternate;
}

p a:hover {
  color: rgba(255, 255, 255, 0.58);
}


/*glow for webkit*/

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px ##ffad11, 0 0 60px #ffad11, 0 0 70px #ffad11, 0 0 80px #ffad11, 0 0 90px #ffad11;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fa8c1e, 0 0 35px #fa8c1e, 0 0 40px #fa8c1e, 0 0 50px #fa8c1e, 0 0 75px #fa8c1e;
  }
}


/*glow*/

@keyframes neon1 {
  from {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px ##ffad11, 0 0 10px #ffad11, 0 0 12px #ffad11, 0 0 14px #ffad11, 0 0 20px #ffad11;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fa8c1e, 0 0 35px #fa8c1e, 0 0 40px #fa8c1e, 0 0 50px #fa8c1e, 0 0 75px #fa8c1e;
  }
}




/* ------JUNK ---------*/


#compiled:nth-child(2) {
    color: #d482ff;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
}

#compiled:nth-child(2) a:hover {
    color: rgba(237, 146, 253, 0.81);
    transition: 200ms;
    -webkit-animation: 1.5s ease-in-out infinite alternate;
    -moz-animation: 1.5s ease-in-out infinite alternate;
    animation: 1.5s ease-in-out infinite alternate;
}




/*glow for webkit*/

@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #bf11ff, 0 0 40px #c811ff, 0 0 50px #bf11ff, 0 0 75px #b611ff;
  }
}


/*glow*/

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #f4c52a, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}


/* ------SPAM ---------*/

#compiled:nth-child(3) {
  color: #ffd6d6;
  -webkit-animation: neon1 .5s ease-in-out infinite alternate;
  -moz-animation: neon1 .5s ease-in-out infinite alternate;
  animation: neon1 .5s ease-in-out infinite alternate;
}

#compiled:nth-child(3) a:hover {
    color: rgba(253, 146, 192, 0.81);
    transition: 200ms;
    -webkit-animation: 1.5s ease-in-out infinite alternate;
    -moz-animation: 1.5s ease-in-out infinite alternate;
    animation: 1.5s ease-in-out infinite alternate;
}

p a:hover {
  color: rgba(255, 255, 255, 0.69);
}


/*glow for webkit*/

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}


/*glow*/

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}



/* ------BITS ---------*/

#compiled:nth-child(4) {
  color: #2700ff;
  -webkit-animation: neon1 .5s ease-in-out infinite alternate;
  -moz-animation: neon1 .5s ease-in-out infinite alternate;
  animation: neon1 .5s ease-in-out infinite alternate;
}

#compiled:nth-child(4) a:hover {
    color: rgba(58, 23, 255, 0.99);
    transition: 200ms;
    -webkit-animation: 1.5s ease-in-out infinite alternate;
    -moz-animation: 1.5s ease-in-out infinite alternate;
    animation: 1.5s ease-in-out infinite alternate;
}

p a:hover {
  color: rgba(255, 255, 255, 0.98);
}


/*glow for webkit*/

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}


/*glow*/

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}




/*----------------------------------------------------------------
--VOLUME SLIDER----------------*/

/*

body {
    height: 300px;
    background: rgb(17, 17, 17);
    background: -webkit-gradient(radial, center center, 0, center center, 40%,
    	from(rgba(100, 100, 100,0.5)), to(rgba(17, 17, 17,0))) no-repeat
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -webkit-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -moz-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat, 
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -ms-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -o-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    rgb(17, 17, 17);
}

#player {
    width: 350px;
    height: 50px;    
    position: relative;
    margin: 0 auto;
    top: 150px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
}

#volume {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:15px;
    width: 300px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-range-min {
    height:15px;
    width: 300px;
    position: absolute;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-handle {
    width: 38px;
    height:39px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
    position: absolute;
    margin-left: -15px;
    cursor: pointer;
    outline: none;
    border: none;
}



/*--------------------------------------------------------------------------------------------*/

/*.slider .input {
     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}

/*ul {
    list-style: none;
    text-align: center;
    display: inline;
    float: left;
}

.logo_comp {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) 
        
    }


/*h1 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow:
        /*0 0 60px 30px #fff,  /* inner white */
        /*0 0 100px 60px #f0f, /* middle magenta */
        /*0 0 140px 90px #0ff; /* outer cyan */
}