body{
	background-image: url("rockinhomer.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#symbol{
	margin-left: 3%;
}

#jbox{
	margin: 0 auto;
	width: 21%;
	height: 41px;
	border: solid 5px black;
	margin-right: 11%;
    margin-top: 10%;
    text-align: center;
}

#jbox-bot{
	margin: 0 auto;
	width: 21%;
	height: 250px;
	border: solid 5px black;
	margin-right: 11%;
    text-align: center;
}

#playSong, #pauseSong, #stopSong{
	border-radius: 45%;
	width: 32%;
	height: inherit;
	font-size: 122%;
	background-color: #D3D3D3;
	text-align: center;
}

#prevSong, #nextSong, #volumeUp, #volumeDown{
	width: 44%;
	height: 15%;
	font-size: 118%;
	border-radius: 40%;
	background-color: #D3D3D3;
	text-align: center;
}

@media (max-width: 1050px){
	#jbox, #jbox-bot{
		margin-right: 7%
	}

	#playSong, #pauseSong, #stopSong{
		font-size: 98%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 12px;	
	}

	#nextSong, #prevSong, #volumeUp, #volumeDown{
		background-color: #D3D3D3;
		text-align: center;
	}
}

@media (max-width: 785px){
	#jbox{
		margin: 0 auto;
		margin-top: 88%;
		margin-left: 4%;
		width: 28%;
		height: inherit;
		text-align: center;
	}

	#jbox-bot{
		margin: 0 auto;
		margin-left: 4%;
		width: 28%;
		height: inherit;
	}

	#playSong, #pauseSong, #stopSong, #nextSong, #prevSong, #volumeUp, #volumeDown{
		width: 44%;
		font-size: 112%;
		border-radius: 50%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 15px;	
	}

	#symbol{
		margin: 0 auto;
		width: 56%;
		height: 36%;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}

@media (max-width: 750px){
	#jbox{
		margin: 0 auto;
		margin-top: 6%;
		margin-left: 64%;
		width: 24%;
		height: inherit;
		text-align: center;
	}

	#jbox-bot{
		margin: 0 auto;
		margin-left: 64%;
		width: 24%;
		height: inherit;
	}

	#playSong, #pauseSong, #stopSong, #nextSong, #prevSong, #volumeUp, #volumeDown{
		width: 44%;
		font-size: 90%;
		border-radius: 50%;
		background-color: #D3D3D3;
		text-align: center;
	}
	
	#pauseSong{
		padding-left: 12px;	
	}

	#symbol{
		margin: 0 auto;
		width: 56%;
		height: inherit;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}

@media (max-width: 675px){
	body{
		background-image: url("rockinhomer.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	#jbox, #jbox-bot{
		width: 24%;
		margin-left: 62%;
	}

	#jbox{
		margin-top: 10%;
	}

	#jbox-bot{
		height: 25%;
	}

	#playSong, #pauseSong, #stopSong{
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 7px;
	}

	#nextSong, #prevSong, #volumeUp, #volumeDown{
		font-size: 78%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#symbol{
		margin: 0 auto;
		width: 56%;
		height: inherit;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}

@media (max-width: 575px){
	body{
		background-image: url("rockinhomer.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	#jbox{
		margin: 0 auto;
		width: 28%;
		margin-top: 10%;
		margin-left: 58%;
	}

	#jbox-bot{
		margin: 0 auto;
		width: 28%;
		margin-left: 58%;
	}

	#playSong, #pauseSong, #stopSong{
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 12px;
	}

	#nextSong, #prevSong, #volumeUp, #volumeDown{
		font-size: 78%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#symbol{
		margin: 0 auto;
		width: 40%;
		height: inherit;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}

@media (max-width: 475px){
	body{
		background-image: url("rockinhomermobile.jpg");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#jbox{
	    margin: 0 auto;
	    width: 38%;
	    border: solid 2px black;
	    margin-left: 2%;
	    margin-top: 106%;
	    text-align: center;
	}

	#jbox-bot{
		margin: 0 auto;
	    width: 38%;
	    border: solid 2px black;
	    margin-left: 2%;
	    text-align: center;
	}

	#playSong, #pauseSong, #stopSong, #volumeDown, #volumeUp, #nextSong, #prevSong{
		width: 44%;
		border-radius: 50%;
		font-size: 78%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 7px;
	}

	#symbol{
		margin: 0 auto;
		width: 40%;
		height: inherit;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}

@media (max-width: 400px){
	body{
		background-image: url("rockinhomermobile.jpg");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#jbox{
	    margin: 0 auto;
	    width: 38%;
	    border: solid 2px black;
	    margin-left: 2%;
	    margin-top: 103%;
	    text-align: center;
	}

	#jbox-bot{
		margin: 0 auto;
	    width: 38%;
	    border: solid 2px black;
	    margin-left: 2%;
	    text-align: center;
	}

	#playSong, #pauseSong, #stopSong, #volumeDown, #volumeUp, #nextSong, #prevSong{
		width: 44%;
		border-radius: 50%;
		font-size: 78%;
		background-color: #D3D3D3;
		text-align: center;
	}

	#pauseSong{
		padding-left: 7px;
	}

	#symbol{
		margin: 0 auto;
		width: 40%;
		height: inherit;
	    margin-right: 14%;
    	margin-left: 12%;
	}
}