@charset "UTF-8";

	@font-face {
		font-family: 'Orbitron';
		src: url(../Fonts/Orbitron/Orbitron-Regular.ttf) format('truetype');
		font-weight: 400;
		font-style: normal;
	}

	@font-face {
		font-family: 'Orbitron';
		src: url(../Fonts/Orbitron/Orbitron-Medium.ttf) format('truetype');
		font-weight: 500;
		font-style: normal;
	}

	@font-face {
		font-family: 'Orbitron';
		src: url(../Fonts/Orbitron/Orbitron-Bold.ttf) format('truetype');
		font-weight: 700;
		font-style: normal;
	}

	@font-face {
		font-family: 'Orbitron';
		src: url(../Fonts/Orbitron/Orbitron-Black.ttf) format('truetype');
		font-weight: 800;
		font-style: normal;
	}


	/**********************************************************************/
	/***************************** Page Top *******************************/
	/**********************************************************************/

	.subtitle {
		letter-spacing: 1px !important;
	}
	
	.subtitle2 {
		color: #555;
		max-width: 90%;
		font-size: 80% !important;
		font-style: italic;
		margin-top: 1rem;
	}

	.titleDivider {
		max-width: 90%;
		border: none;
		height: 1px;
		background: #222;
		box-shadow: 0 0 8px rgba(0, 210, 255, 0.9);
		margin: 0 auto;
		margin-top: 1.5rem;

	}

	.hero-image {
		border-radius: 20px;
		/*border: 1px solid #444;*/
	}



	/**********************************************************************/
	/**************************** AMP SECTION *****************************/
	/**********************************************************************/

	.amp-brand {
		font-size: 2rem;
		margin: 1rem 0rem .5rem 0rem;
		color: #FFF;
		letter-spacing: 8px;
	}

	.amp-model {
		font-size: 1rem;
		font-style: italic;
		color: #999;
		margin-bottom: 2rem;
	}

/*	.ampSettings {
		width: 100%;
		max-width: 900px;
		width: auto;
		height:;
		background-color: #111;
		margin-bottom: 4rem;
		box-sizing: border-box;
		padding: 3rem;
		border: 1px solid #222;
		border-radius: 20px;
		box-sizing: border-box;
	}*/

	.ampSettings {
		background-color: #12121290;
		border: 1px solid #222222;
		border-radius: 20px;
		padding: 2rem; /* was 4rem */
		margin-bottom: 8rem;
		display: block;
	}

	.ampSettings p {
		text-align: justify;
	}

	.ampSettings img {
		display: block;
		width: 875px;
		height: 200px
		border: 5px solid #444;
		margin: 2rem 0px 0px 0px;
		margin-left: auto;
		margin-right: auto;
		border: 1px solid #777;
		border-radius: 20px;
		text-align: center;
	}

	.ampSettings h1 {
		margin: 0rem 0rem 1rem 0rem;
		color: #FFF;
	}


	.amp-settings-title h3 {
		color: #lightskyblue;
		text-transform: uppercase;
		letter-spacing: 4px;
		margin: 2rem 0rem .5rem 0rem;
		text-shadow: 
		0 0 4px rgba(255, 255, 255, 0.8),
		0 0 12px #0052cc,
		0 0 30px #00d2ff;
	}

	.amp-settings-title {
		line-height: 2rem;
	}

	.amplifier-settings {	
		margin-top: 2rem;
		display: grid;
		/* Column 1 auto-sizes to the longest text; Column 2 takes up remaining space */
		grid-template-columns: max-content 1fr;

		/* Adds space between columns (20px) and rows (10px) */
		gap: 10px 40px; 

		/* Vertically centers items if text sizes or line-heights differ */
		align-items: center; 

		max-width: 200px; /* Optional: limits the width of your control panel */
		}

	/* Header Styling */
	.column-header {
		font-size: 0.85rem;
		font-weight: 800;
		color: #666;
		letter-spacing: 0.05em;
		padding-bottom: 4px;
		/* Creates a separation line under the headers */
		border-bottom: 1px solid rgba(225, 225, 225, .2); 
		}

	/* Optional styling to make values stand out */
	.parameter {
		font-weight: bold;
		color: #999;
	}

	.value {
		/*font-family: monospace;
		font-size: 1.1rem;*/
		color: #0076ff;
		font-weight: 600;
	}



	/**********************************************************************/
	/************************** BOTTOM SECTION ****************************/
	/**********************************************************************/

	.bottom-buttons {
		margin: 6rem 0rem;
		background-color: #12121290;
		border: 1px solid #222222;
		border-radius: 20px;
		padding: 2rem; /* was 4rem */
		margin-top: 4rem !important;
		margin-bottom: 8rem;
		display: block;
	}

	.bottom-buttons p {
		font-size: 1.5rem;
		max-width: 100%;
		color: #555;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 2rem;
	}



	/**********************************************************************/
	/**************************** AUDIO PLAYER ****************************/
	/**********************************************************************/

	#myAudio {
		display: none;
	}

	#playButton {
		cursor: pointer;
		border: 2px solid #444;
		border-radius: 50px;
		opacity: .3;
		transition: opacity 2s;
		display: ;
	}

	#playButton:hover {
		border: 2px solid #555;
		opacity: 1;
	}

	.page-play-button {
		cursor: pointer;
		border: 2px solid #444;
		border-radius: 50px;
		opacity: .3;
		transition: opacity 2s;
		width: 30px;
		height: auto;
	}

	#timeDisplay {
		color: #222;
		display: none;
	}

	/*  Play Button Undulates After Page Loads */

	@keyframes singleFade {
	  0% { opacity: .3; border-color: #444;}
	  50% { opacity: .7; border-color: #777;} 
	  100% { opacity: .3; border-color: #444} 
	}

	.fade-button {
	  /* Takes 2 seconds per cycle, repeats 2 times */
	  animation: singleFade 2s ease-in-out 1; 
	  /* Waits 1 second after page load before starting */
	  animation-delay: 2s; 
	  /* Ensures the button keeps its default styling during the delay */
	  animation-fill-mode: backwards; 
	}


	
/************************************************************************/
/***************************** MEDIA QUERIES ****************************/
/************************************************************************/

@media (min-width: 480px) {  

}

@media (min-width: 576px) {  

}

@media (min-width: 768px) {
	.subtitle {
		letter-spacing: 8px !important;
	}

	.subtitle2 {
		color: #555;
		max-width: 90%;
		font-size: 95% !important;
		font-style: italic;
		margin-top: 1rem;
	}

	.titleDivider {
		max-width: 90%;
		border: none;
		height: 2px;
		background: #222;
		box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
		margin: 0 auto;
		margin-top: 1.5rem;
	}

	.ampSettings {
		background-color: #12121290;
		border: 1px solid #222222;
		border-radius: 20px;
		padding: 4rem; /* was 4rem */
		margin-bottom: 8rem;
		display: block;
	}

	.bottom-buttons {
		margin: 6rem 0rem;
		background-color: #12121290;
		border: 1px solid #222222;
		border-radius: 20px;
		padding: 4rem;
		margin-top: 4rem !important;
		margin-bottom: 8rem;
		display: block;
	}
}

@media (min-width: 992px) { 

}

@media (min-width: 1200px) {  

}