/* Gradients aligned to objPlayerDoll theme (dark charcoal + fuchsia + soft pink)
   Palette reference:
     Panel bg:     rgb(45, 45, 50)    — dark charcoal
     Slot fill:    rgb(55, 55, 60)    — lighter charcoal
     Fuchsia:      rgb(255, 0, 255)   — strong accent (hover etc.)
     Light pink:   #ff96c8 / rgb(255, 150, 200) — borders + text
     Deep purple:  rgb(31, 24, 34)    — darkest end-stop
     Accent dark:  rgb(80, 35, 65)    — fuchsia-tinted charcoal
     Warm dark:    rgb(70, 40, 60)    — banner/footer center
   Originally made with https://cssgradient.io/ */

@font-face {
	font-family: 'ferrite';
	font-style: normal;
	font-weight: normal;
	src: local('../fonts/ferrite'), url('../fonts/ferrite.woff') format('woff');
}
@font-face {
	font-family: 'mingliu';
	font-style: normal;
	font-weight: normal;
	src: local('../fonts/mingliu'), url('../fonts/mingliu.woff') format('woff');
}
html{
	Width: 100%;
	height:99%;	
}
body{
	Width: auto;
	height:99%;
	padding: 10px;
	margin:auto;
	background: rgb(45,45,50);
	background: linear-gradient(53deg, rgba(55,55,60,1) 0%, rgba(31,24,34,1) 100%);
}
iframe{
 border: 2px solid #ff96c8;	
}

h1{
	color: #ff96c8;
	text-shadow: -1px -1px 0 rgba(31,24,34,0.8), 1px -1px 0 rgba(31,24,34,0.8), -1px 1px 0 rgba(31,24,34,0.8), 1px 1px 0 rgba(31,24,34,0.8);
	font-family: ferrite;	
	
}
h2{
	color: #ff96c8;
	text-shadow: -1px -1px 0 rgba(31,24,34,0.8), 1px -1px 0 rgba(31,24,34,0.8), -1px 1px 0 rgba(31,24,34,0.8), 1px 1px 0 rgba(31,24,34,0.8);
	font-family: ferrite;	
	
}
h3{
	color: #ff96c8;
	text-shadow: -1px -1px 0 rgba(31,24,34,0.8), 1px -1px 0 rgba(31,24,34,0.8), -1px 1px 0 rgba(31,24,34,0.8), 1px 1px 0 rgba(31,24,34,0.8);
	font-family: ferrite;	
	
}
h4{
	font-family: ferrite;	
	color:#ff96c8;
}
p{
	font-family: mingliu;
	color: #ffc8e0;	
}

.outliner1{

}
a:link {
	color:#ff96c8;
	font-family: VCR OSD Mono;
}

a:visited{
	color:deeppink;
	font-family: VCR OSD Mono;
}

a:hover {
	color: hotpink;
	font-family: VCR OSD Mono;
}

a:active {
	color: white;
	font-family: VCR OSD Mono;
}

	/* Site Container*/

#sitecontainer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	height:100%;
	/*border: 5px double #ff96c8;*/
	border-radius: 15px;

}
.gradbox{
	background: rgb(45,45,50);
	background: linear-gradient(53deg, rgba(55,55,60,1) 0%, rgba(31,24,34,1) 100%);
	border: 2px ridge; 
	text-align:center;

}
	/* Left ID's*/

#leftParent{
	flex: 20%;

	display: flex;
	flex-direction: column;
	
background: rgb(65,35,55);
background: linear-gradient(90deg, rgba(80,35,65,1) 0%, rgba(45,45,50,1) 100%);
	border:10px double #ff96c8;
	
	border-radius: 15px;
}

	#artistRoulette{
		height: 240px;
		background: rgb(90,45,70);
		background: linear-gradient(123deg, rgba(90,45,70,1) 0%, rgba(65,30,60,1) 100%); 
	}
	#chatContainer{
		flex:75%;
		border-top:10px double #ff96c8;
		border-bottom:10px double #ff96c8;
	}
	#sleepyroll{
		width: 90%; 
		text align: center; 
		margin-left:auto; 
		margin-right:auto;
	}
	#artRollName{
		background: rgb(45,45,50);
		background: linear-gradient(53deg, rgba(55,55,60,1) 0%, rgba(31,24,34,1) 100%);
		border: 2px ridge; 
		text-align:center; 
	}
	#playerTltle{
		background: rgb(45,45,50);
		background: linear-gradient(53deg, rgba(55,55,60,1) 0%, rgba(31,24,34,1) 100%);
		border: 2px ridge; 
		text-align:center;
		color:#ff96c8;
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	#playerControls{
		align-content: center;
		background: rgb(90,45,70);
		background: linear-gradient(48deg, rgba(90,45,70,1) 0%, rgba(65,30,60,1) 100%); 
	}
		.p-radio{
			text-align:left;
			padding-left:10px;
			margin-top: 0%;
			margin-bottom:0%;
			color:#ff96c8;
		}
		.p-button{
			
		}

	/* Center ID's*/

#mainParent{
	flex: 80%;
	
	display: flex;
	flex-direction: column;
	
	border:5px solid #ff96c8;
	border-radius: 3px;
	
	background: rgb(55,55,60);
	background: radial-gradient(circle, rgba(55,55,60,1) 0%, rgba(35,28,38,1) 100%);
}
	
	/* Banner */
	
	#bannerContainer{
		flex:10%;
		align-content: center;
		margin-left:auto;
		margin-right:auto;
		 background: rgb(70,40,60);
background: radial-gradient(circle, rgba(70,40,60,1) 0%, rgba(45,45,50,1) 100%); 
	}
			
		#banner{
			width:60%;
			height:auto;
			argin-left:auto;
			margin-right:auto;
		}
	
	/* Content Body */
	
	#content{
		flex:80%;
		border-top:10px double #ff96c8;
		border-bottom:10px double #ff96c8;
		padding: 0px;
		margin: 0px;

	}
		#indexContainer{
			display:flex;
			background-color: $c39ad9;
		}
	
	/* Footer */	
	
	#footer{
		flex:10%;
		 background: rgb(70,40,60);
background: radial-gradient(circle, rgba(70,40,60,1) 0%, rgba(45,45,50,1) 100%); 
	}
		#radioPlayer{
			padding-top:10px;
			width:100%;
		}

	/* Right ID's*/

#rightParent{
	flex: 15%;
	
	display: flex;
	flex-direction: column;
	
	background: rgb(65,35,55);
	background: linear-gradient(270deg, rgba(80,35,65,1) 0%, rgba(45,45,50,1) 100%);  

	border:10px double #ff96c8;
	border-radius: 15px;
}

	/* Chat Styling*/
	
	#navbar{
		border-top:10px double #ff96c8;
		border-bottom:10px double #ff96c8;
		vertical-align:center;
		flex: 90%;
	}

	/* WebringRoulette Styling */
	
	#webringRoulette{
		align-content: center;
		text-align: center;
		margin-bottom: 1%;
	 background: rgb(65,35,55);
background: linear-gradient(270deg, rgba(80,35,65,1) 0%, rgba(45,45,50,1) 100%); 
	}
		#sleepyringTitle{
			margin-top:0%;
			background-color: #3a2030;
			border-bottom: 10px double #ff96c8;			
		}
		#quotes{
			border: 2px ridge;
			width: fit-content;
			margin-left:auto;
			margin-right:auto;
			
		}
		#author{
			width:100%;
			border-top:10px double #ff96c8;
			border-bottom: 1px solid #ff96c8;
			align-content: center;
			margin-bottom:0%;
			background: rgb(65,35,55);
			background: linear-gradient(270deg, rgba(80,35,65,1) 0%, rgba(45,45,50,1) 100%); 
		}

	/* Quote Roulette Styling */

	#quoteRoulette{
		flex: 10%;	
	}		
/* Code stolen directly from sgc - Audio Player*/
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	width:70%;
	text-align:left;
	margin-top: 0%;
	margin-bottom:0%;
	margin-left:auto;
	margin-right:auto;
}
input[type="range"]:focus {
 outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
 background: #ff96c8;
 height: 5px;
}
input[type="range"]::-moz-range-track {
 background: #ff96c8;
 height: 5px;
}
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 15px;
 width: 15px;
 background: #ff96c8;
 border:2px;
 margin-top: -5px;
 border-radius: 50%;
 border-color: #ff96c8;
}
input[type="range"]::-moz-range-thumb {
 height: 15px;
 width: 15px;
 background: #ff96c8;
 border:2px;
 margin-top: -5px;
 border-radius: 50%;
 border-color: #ff96c8;
}
.webring-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.5em;
  margin: 2%;
  margin-top:2%;
}
.webring-item {
  text-align: center;
  margin:10 px;
  padding:10 px;
}
.webring-item img {
  width: 240px;
  height: 60px;
  border: 1px solid #ff96c8;
  
}

/* ------------------------------------------------------------------
   debug‑hotkeys popup – matches the rest of the SADENGINE theme
   ------------------------------------------------------------------ */

.debug-hotkeys,         /* apply to root element inside popup window */
.debug-hotkeys body {
    font-family: mingliu;
    padding: 1rem;
    color: #ffc8e0;
    background: rgb(45,45,50);
    background: linear-gradient(53deg,
        rgba(55,55,60,1) 0%,
        rgba(31,24,34,1) 100%);
}

.debug-hotkeys h1 {
    color: #ff96c8;
    text-shadow:
        -1px -1px 0 rgba(31,24,34,0.8),
         1px -1px 0 rgba(31,24,34,0.8),
        -1px  1px 0 rgba(31,24,34,0.8),
         1px  1px 0 rgba(31,24,34,0.8);
    font-family: ferrite;
    margin-top: 0;
}

.debug-hotkeys table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 0.5rem;
}

.debug-hotkeys th,
.debug-hotkeys td {
    border: 1px solid #ff96c8;
    padding: 0.3rem;
    text-align: left;
}

.debug-hotkeys th {
    background: rgb(80,35,65);   /* dark accent from palette */
    color: #ff96c8;
}

@keyframes pulse {
  0%, 100% {
    background-color: #0e000f;
  }
  50% {
    background-color: #1a001c;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 30%, rgba(0, 0, 0, 0.25) 30%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}