body { margin-top: 0;
  margin-bottom:0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  
  background-image: url("/albums/r4u/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  
  color: white;
  font-family: "Arial";
  font-size: 16px;
overflow: hidden;
}

#left {
  position: fixed;
  background-image: rgba(0,0,0,0);
  background-size:200% 100%;

  /*linear-gradient(rgba(0,0,0,0) 0%,rgba(150, 241, 255,0.4) 25%, rgba(150, 241, 255,0.4) 85%, rgba(0,0,0,0) 100%);*/
  left: 20px;
  top: 15%;
	  font-family:"Georgia";
font-size:50px;
line-height:0px;
text-shadow: rgba(255, 20, 147,0.7) 0px 0px 12px;
}

#left h1 {
	  font-family:"Georgia";
  letter-spacing: -8px;
font-size:200px;
}

@media only screen and (max-width: 1600px) {
    #left {
        transform:scale(0.8);
		transition: all 0.4s ease-in-out; 
		left:20;
		transform-origin:top left;
		top:200;



    }

    #hidden {
        transform:scale(0.8);
		margin-right:-40px;
		transition: all 0.4s ease-in-out; 

    }
}

@media only screen and (max-width: 1400px) {
    #left {
        transform:scale(0.5);
		transform-origin:top left;
		transition: all 0.4s ease-in-out; 
		left:20;

				top:200;


    }
}

@media only screen and (max-width: 1100px) {
    #left {
        transform:scale(0.4);
		transition: all 0.4s ease-in-out; 
		left:20;


		transform-origin:top left;
    }
}


#onefour {

opacity:0.8;
mix-blend-mode: plus-darker;
	display:block;
right:950px;
top:20px;
	position:fixed;
z-index:-4;

transition: all 0.4s ease-in-out; 
}
#onefour:hover {
transition: all 0.4s ease-in-out; 
mix-blend-mode:normal;
opacity:1;
}

.fourteenfour {
	opacity: 0.8;
	transition: all 0.2s ease-in-out; 
		position:absolute;
z-index:-3;
filter:drop-shadow(5px 5px 0.25rem rgba(255, 20, 147,0.9));
transform:rotate(-3deg)
}
.fourteenfour:hover {
transform:rotate(-4deg);
		transition: all 0.4s ease-in-out; 
	opacity: 1;
mix-blend-mode:normal;

}
#hidden {
opacity:0.9;

background-color:none;
color:white;
border-radius:8px;
padding:10px;
width:350px;
height:115px;
position:fixed;
font-size:24px;
line-height:0px;
bottom:10px;
text-shadow: rgba(255, 20, 147,1) 1px 1px 2px;
    right: 20px;
letter-spacing:2px;
z-index:1;
filter:saturate(1.5) hue-rotate(13deg) drop-shadow(1px 1px 0.1rem rgba(255, 20, 147,1));
transition: all 0.2s ease-in-out; 
border: none;
	}


#hidden:hover {


	filter: saturate(1.5) hue-rotate(13deg) drop-shadow(1px 1px 0.1rem rgba(255, 20, 147,1));
mix-blend-mode:normal;
transition: all 0.2s ease-in-out; 
}

#hidden:hover img {
	filter: saturate(1.7) hue-rotate(17deg) drop-shadow(1px 1px 0.1rem rgba(255, 255,255,1));

transition: all 0.2s ease-in-out; 
}


#hidden:hover {
opacity:1;

}


#hidden:hover >  .fourteenfour {
transform:rotate(-5deg);
		transition: all 0.4s ease-in-out; 
	opacity: 1;

}


.fourteenfour:hover > #hidden {
opacity:1;
mix-blend-mode:normal;
transition: all 0.4s ease-in-out; 
	}


.socialbuttons img {
filter:brightness(0) invert(1);
transition: all 0.4s ease-in-out; 
}

.socialbuttons img:hover {
filter: drop-shadow(2px 2px 0.25rem rgba(255, 20, 147,1));
transition: all 0.4s ease-in-out; 
}

#logo {
opacity:0.9;

background-color:none;
color:white;
border-radius:8px;
padding:10px;
width:300px;
height:115px;
position:fixed;
font-size:24px;
line-height:0px;
bottom:400px;
text-shadow: rgba(255, 20, 147,1) 1px 1px 2px;
    right: 0px;
letter-spacing:2px;
z-index:1;
filter:saturate(1.5) hue-rotate(13deg) drop-shadow(1px 1px 0.1rem rgba(255, 20, 147,1));
transition: all 0.2s ease-in-out; 
border: none;
	}

#logo img {
filter:brightness(0) invert(1)
}






#onefour p {
filter: saturate(4) hue-rotate(30deg);
opacity:1;
}

#onefour img {

}


#center {
position: fixed;
background-color:rgba(0,0,0,0.0);
width:600px;
height:800px;
    top:10%;
    bottom: 15%;
    left: -20%;
    right: 0;

    margin: auto;
}
#musiccontainer {
position: relative;
width:500px;
height:150px;

  background-image:none;
  background-color:rgba(225,225,225,0.0);
padding:5px;

border-radius:8px;
color:deeppink;
  font-family: "helvetica";
  font-size:16px;


letter-spacing:1px;

  box-shadow: inset 16px 16px 16px rgba(255, 255, 255, 0.25), inset -16px -16px 16px rgba(255, 255, 255, 0.25),  16px 16px 16px rgba(255, 20, 147, 0.2);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 1) 1%,rgba(255, 120, 167, 0.0) 100%);
backdrop-filter: blur(12px);

z-index:-4;
}

#musiccontainer:hover {

color:deeppink;
filter: blur(0px);
    box-shadow: inset 16px 16px 16px rgba(255, 255, 255, 0.25), inset -16px -16px 16px rgba(255, 255, 255, 0.25),  8px 8px 16px rgba(255, 20, 147, 0.6);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 1) 24%,rgba(255, 140, 197, 0.70) 100%);
backdrop-filter: blur(2px);
z-index:2;
}

#setlist {
text-indent:0;
position: absolute;
width:500px;
height:420px;
margin-top:-10px;
left:40px;
  background-image:none;
  background-color:rgba(225,225,225,0.0);
padding:5px;

text-indent:0px;
border-radius:8px;
color:deeppink;
  font-family: "helvetica";
  font-size:16px;

text-indent:10px;
letter-spacing:1px;
color:white;
  box-shadow: inset 16px 16px 32px rgba(255, 255, 255, 0.25), inset -16px -16px 32px rgba(255, 255, 255, 0.25),  8px 8px 16px rgba(255, 20, 147, 0.5);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7) 1%,rgba(255, 120, 167, 0.0) 80%);
backdrop-filter: blur(24px);


}

#setlist:hover {

color:deeppink;
filter: blur(0px);
    box-shadow: inset 16px 16px 16px rgba(255, 255, 255, 0.25), inset -16px -16px 16px rgba(255, 255, 255, 0.25),  8px 8px 16px rgba(255, 20, 147, 0.6);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.9) 20%,rgba(255, 170, 210, 0.95) 100%);
backdrop-filter: blur(2px);

}

#setlist h3 {
filter:drop-shadow(5px 2px 0.25rem rgba(255, 20, 147,0.4));
}

#setlist:hover > h1 {
letter-spacing:18;
transition: all 0.2s ease-in-out; 
}
#center h1 {
	
	font-size:55px;
	font-family:"helvetica";
	font-weight:bold;
	transform:scaleY(0.6) ;

	font-style:italic;
	letter-spacing:12;
	margin-top:0px;
	filter:drop-shadow(5px 2px 0.25rem rgba(255, 20, 147,0.4));

}

hr {
  border: 1px groove rgba(255,80,147, 0.0);
  background-color: rgba(255,80,147, 0.1);
  height:0px;

  width: 95%;
margin-top:0px;
margin-bottom:-5px;
filter:drop-shadow(2px 2px 0.1rem rgba(255,80,147,0.8));

}

#setlist:hover > hr {
transition: all 0.1s ease-in-out; 
 background-color: rgba(255,80,147,
 0.7);
}


.tracknumber {

font-family: "helvetica";
display:inline;
text-indent:0px;
transition: all 0.1s ease-in-out; 
	filter:drop-shadow(2px 2px 0.25rem rgba(255, 20, 147,0.6));
}
.tracknumber:hover {
color:deeppink;

cursor:pointer;
letter-spacing:2px;
transition: all 0.1s ease-in-out; 
	filter:drop-shadow(2px 2px 0.25rem rgba(255, 255, 255,0.9));
}

.clicked-track {

font-family: "helvetica";
display:inline;
text-indent:0px;
transition: all 0.1s ease-in-out; 

}
.clicked-track:hover {
color:deeppink;

cursor:pointer;
letter-spacing:2px;
transition: all 0.1s ease-in-out; 

}

.set-artist {
text-indent:21px;
transition: all 0.1s ease-in-out; 
}



#track_insert {
margin-top:20px;
text-indent:0px;
padding-left:20px;
padding-right:20px;
letter-spacing:1px;

}
#track_insert br {
margin-bottom:14px;
}


#track_insert a {
text-decoration:none;
color:white;
	filter:drop-shadow(2px 2px 0.15rem rgba(255, 20, 147,0.7));
}

#track_insert a:hover {
color:deeppink;

text-decoration:underline;
}
#setlist:hover > #track_insert a {
color:deeppink;

}

#notes {
margin-left:-10px;
box-sizing: border-box;
text-indent:0;
position: absolute;
padding-left:20px;
padding-top:5px;
padding-right:20px;
width:540px;
height:220px;
bottom:15px;
left:0px;
  background-image:none;
  background-color:rgba(225,225,225,0.0);



text-indent:2px;
border-radius:8px;
color:deeppink;
  font-family: "helvetica";
  font-size:16px;

text-indent:10px;
letter-spacing:0px;
color:white;
  box-shadow: inset 16px 16px 32px rgba(255, 255, 255, 0.25), inset -16px -16px 32px rgba(255, 255, 255, 0.25),  16px 16px 16px rgba(255, 20, 147, 0.2);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7) 1%,rgba(255, 150, 110, 0.0) 80%);
backdrop-filter: blur(12px);
z-index:-4;

}
#notes p {
margin-bottom:-10px;
}
#notes:hover {
z-index:2;
color:deeppink;
filter: blur(0px);
    box-shadow: inset 16px 16px 16px rgba(255, 255, 255, 0.25), inset -16px -16px 16px rgba(255, 255, 255, 0.25),  8px 8px 16px rgba(255, 20, 147, 0.6);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.8) 24%,rgba(255, 140, 197, 0.70) 100%);
backdrop-filter: blur(2px);

}

#notes:hover h1 {
transition: all 0.2s ease-in-out; 
letter-spacing:28px
}

#notes a {
color:white;
transition: all 0.2s ease-in-out;
}
#notes:hover a {
color:deeppink;
}

#notes a:hover {
font-weight:bold;
transition: all 0.2s ease-in-out;
}

#buyelsewhere {

box-sizing: border-box;
text-indent:0;
position: absolute;
padding-left:20px;

padding-right:20px;
width:260px;
height:50px;
bottom:0px;
margin-bottom:-50px;
left:0px;
vertical-align:center;
  background-image:none;
  background-color:rgba(225,225,225,0.0);

text-shadow: rgba(255, 20, 147,0.5) 1px 1px 4px;
border-radius:8px;
color:white;
  font-family: "helvetica";
  font-size:16px;

letter-spacing:0px;

  box-shadow: inset 16px 16px 32px rgba(255, 255, 255, 0.25), inset -16px -16px 32px rgba(255, 255, 255, 0.25),  16px 16px 16px rgba(255, 20, 147, 0.2);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7) 1%,rgba(255, 120, 167, 0.0) 80%);
backdrop-filter: blur(12px);
z-index:1;

}

#buyelsewhere:hover {
	color:deeppink;
	transition: all 0.2s ease-in-out; 
}


#gohome {

box-sizing: border-box;
text-indent:0;
position: absolute;
text-align:center;
bottom:0px;
margin-bottom:-52px;

width:140px;
height:50px;
bottom:2px;
left:280px;
  background-image:none;
  background-color:rgba(225,225,225,0.0);

text-shadow: rgba(255, 20, 147,0.5) 1px 1px 4px;
border-radius:8px;
color:deeppink;
  font-family: "helvetica";
  font-size:16px;
letter-spacing:0px;

  box-shadow: inset 16px 16px 32px rgba(255, 255, 255, 0.25), inset -16px -16px 32px rgba(255, 255, 255, 0.25),  16px 16px 16px rgba(255, 20, 147, 0.2);
transition: all 0.2s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7) 1%,rgba(255, 120, 167, 0.0) 80%);
backdrop-filter: blur(12px);
z-index:1;

}

#gohome:hover {
  box-shadow: inset 16px 16px 32px rgba(255, 255, 255, 0.25), inset -16px -16px 32px rgba(255, 255, 255, 0.25),  4px 4px 8px rgba(255, 20, 147, 0.5);
}  
	

#gohome a {
text-decoration: none;
transition: all 0.2s ease-in-out; 
}

#gohome a:hover {
font-weight:bold;
transition: all 0.2s ease-in-out; 
letter-spacing:2px;
}

/* normal */


a {
  color: deeppink;

}

a:hover {

}

.blink {
                animation: blinker 4s linear infinite;
                color: deeppink;
                font-family: sans-serif;
            }
			
			            @keyframes blinker {
                50% {
                    opacity: 0.5;
                }
            }
			
#togglebutton {
	width:180px;
	padding:10px;
	font-size:25px;
	background: none;
	color:deeppink;
		  font-family:"arial";
  box-shadow: inset 8px 8px 16px rgba(255, 255, 255, 0.5), inset -8px -8px 16px rgba(255, 255, 255, 0.5),  7px 7px 12px rgba(255, 20, 147, 0.2);
transition: all 0.4s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7), rgba(255, 20, 147, 0.2) 70%);
backdrop-filter: blur(12px);
border:0;
border-radius:8px;
transition: all 0.4s ease-in-out; 
transform:scaleY(0.8);
}
#togglebutton:hover {
	cursor: pointer;
	padding:10px;
	font-size:25px;
	background: none;

	text-decoration:underline;
	color:deeppink;
		  font-family:"arial";
  box-shadow: inset 8px 8px 16px rgba(255, 255, 255, 0.5), inset -8px -8px 16px rgba(255, 255, 255, 0.5),  7px 7px 12px rgba(255, 20, 147, 0.6);
transition: all 0.4s ease-in-out; 
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0.7), rgba(255, 20, 147, 0.2) 70%);
backdrop-filter: blur(12px);
border:0;
border-radius:8px;
text-shadow: rgba(255, 20, 147,0.3) 1px 1px 8px;
transform:scaleY(0.8);
}


#disc {
filter:drop-shadow(1px 1px 0.5rem rgba(255,80,147,1));


}

#disc:hover {
filter:drop-shadow(1px 1px 0.5rem rgba(245, 20, 100,1));


}

#discbox {
	position: absolute;
z-index:-7;
margin-top:170px;
right:0;
margin-right:-140px;
top:0;
cursor:pointer;
    right: 0px;

}

.rotate {
	animation: rotation 5s infinite linear;
}

.rotateoff {
	animation-play-state: paused;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}




/* music player stuff */

@font-face {
  font-family: 'FerriteCoreDXMedium';
  src: url("../fonts/FerriteCoreDX-Medium.ttf");
}


#musicplayer{	
                font-family:'Helvetica'; /* default font */
                background:none; /* background color of player */
                border:none; /* border around player */
                width:95%; /* width of the player - make it 100% if you want it to fill your container */
                padding:0;
                text-align:left; 
                display:flex;
                flex-direction:column;
                gap:10px;
				margin:auto;

				color:deeppink;

            }

            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
			
			.now-playing {
				font-family:"FerriteCoreDXMedium";
				background-image: linear-gradient(to left,rgba(146, 225, 255,0.0),rgba(255, 20, 147, 0.2), rgba(146, 225, 255,0.0));
				font-size:16px;
				letter-spacing:2px;
				display:inline-block;
				font-style:italic;
				border-radius:10px;
				filter:drop-shadow(2px 2px 0.15rem rgba(255, 20, 147,0.3));

			}
			.track-info {
				font-family:"Helvetica";
				display:inline-block;
								margin-top:-10px;
				filter:drop-shadow(2px 2px 0.15rem rgba(255, 20, 147,0.3));
			}
			.track-name {
				font-family:"Helvetica";
				font-size:32;
				transform: scaleY(0.8);
				letter-spacing:-1px;
				margin-bottom:-5px;

			}
			.track-artist {
				font-family:"Helvetica";
				font-size:20;
				text-align:left;
				transform: scaleX(0.8);
				transform-origin:left;
				letter-spacing:0px;
				width:100%;
				margin-bottom:-15px;
			}

            .controls{
                display:flex; 
                flex-direction:column; 
                gap:2px;
				width:90%;
				margin:auto;
				background-color:none;
								filter:drop-shadow(2px 2px 0.15rem rgba(255, 20, 147,0.3));
            }

            .buttons{
                display:flex;
                justify-content:center;
                font-size:16px !important; /* size of controls */
                width:100%;
				background-color:none;
            }
			.buttons:hover {
				filter:drop-shadow(1px 1px 0.10rem rgba(255, 20, 147,0.2));		
transition: all 0.2s ease-in-out; 				
			}
            .buttons div {
                width:33.3%;
				text-align:center;
            }

            .playpause-track, .prev-track, .next-track{
                color:deeppink; /* color of buttons */
                font-size:16px!important; /* size of buttons */
				cursor: pointer;
            }

            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }

            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:4px;

            }



            .now-playing{
                font-weight:bold;
            }

            input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background-color:none; /* background color of seeking bar - make the color same as .seeking background color */
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px; /* thickness of seeking track */
        cursor: pointer;
background-image: linear-gradient(to right, rgba(255, 255,255, 0.6) 45%,rgba(255, 20, 147, 0.9)); /* color of seeking track */
border-radius:4px;
box-shadow: 1px 1px 6px rgba(255, 20, 147, 0.7);; /* color of seeking track */
    }
    
    input[type=range]::-webkit-slider-thumb {
        height: 10px; /* height of seeking square */
        width: 4px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: white; /* color of seeker square */
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -4.5px; 
		  border:1px solid deeppink;
        border:none;
box-shadow: 1px 1px 4px rgba(255, 20, 147, 0.5);
    }
    
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 4px; /* thickness of seeking track */
        cursor: pointer;
background-image: linear-gradient(to right, rgba(255, 255,255, 0.6) 45%,rgba(255, 20, 147, 0.9)); /* color of seeking track */
border-radius:4px;
box-shadow: 1px 1px 6px rgba(255, 20, 147, 0.7);
    }
    
    input[type=range]::-moz-range-thumb {
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 5px; /* change to 5px if you want a circle seeker */
        background: deeppink; /* color of seeker square */
  border:1px solid deeppink;
        cursor: pointer;
        border:none;
box-shadow: 1px 1px 4px rgba(255, 20, 147, 0.5);
    }


.seek_slider, .volume_slider {
background-color:rgba(255,255,255,0);
}