@import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One|Roboto+Mono:400,700&display=swap");
/* CSS Document */
/*body{
	margin: 0;
	padding: 0;
}*/

/* unvisited link 
a:link {
color: white;
}*/
/* visited link 
a:visited {
color: white;
}*/
/* mouse over link 
a:hover {
color: orange;
} */
/* selected link
a:active {
color: black;
}*/

:root{
	
	
}

html, body{
	
	height: 100%;
	overflow-x: hidden;
}

body {
	
	display:flex;
	flex-direction: column;
}

content{
	/*
	Flex: 1;
	min-height: 0;	*/
	display:block;
}

.iwp-container {
	
 /* display: flex;
  flex-direction: column;*/
	
}

.schedule{
	
	height: 100vh;
}

footer{
	
	display: block;
	transition: opacity 0.3s ease;	
	
	width: 100%;
	z-index: 999;
}

.footer-hidden{

	opacity: 0;
	pointer-events: none;
}

#content{
	
	

}

#audio-player button {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 998;
}

#playPauseIcon{
	width: 40px;
	height: 40px;
}

.footer {
      
	margin-top: auto;
    }

/* Style for each iframe */
.iframe-item {		
	height: 120px; /* Set the height of each iframe */
	margin-bottom: 0px; /* Add spacing between iframes */
	border: none; /* Remove iframe borders */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional shadow for better visuals */
}

.wny-image {
  max-width: 100%;
  max-height: 283px;
}

header .top_div {
	height:auto;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0%;
	border: none;
}

header .top_div img{	
	flex-shrink: 0;
	display: block;	
}

.iwp-image {
    width: 100%;
    max-height: 120px;
    height: auto;
}
.player {
	border: 2px solid white;
	padding: 10px;
	background-color: #ffffff;
	width: 600px;
	height: auto;
}	

.form_a{
	margin:auto;	
	padding:40px;	
}

.bigLabel{
	font-family: "Rubik Mono One", sans-serif;
	font-size: 24px; 
	color: #Cf1F1F;
}

.field-label{
	color: #000000;

}

.advert_top{
	width: 100%;
	height: 100%;
	text-align: center;
	text-justify: auto;
}

.advert_bottom{
	width: 100%;
	height: 100%;
	text-align: center;
	text-justify: auto;
}

.MixcloudSpacing{	
	
	/*flex: 0 0 auto;*/  /* Prevent shrinking or growing */
    max-width: 720px; /* Set a fixed width */
	width: 100%;
	margin: 0 auto;	
    height: auto; /* Set a fixed height */	
	padding: 10px;	
	background-color: #EBEBEB;
	color: #EBEBEB;
	border-color: #ffffff;
	border-width: 3px;
	border-style: solid;
}

.main_bold_font_red_large{	
	font-family: "Rubik Mono One", sans-serif;
	font-size: 15px; 	
	color: #000000 !important;
}

.main_bold_font_red{
	font-family: "Rubik Mono One", sans-serif;
	font-size: 12px; 	
	color: #000000 !important;
}

.main_bold_font_red a{
	
	text-align: center;
	color: #000000;
	text-decoration: none;
}

.main_bold_font_red a:link {
	
	color: #000000;
}

/* visited link */
.main_bold_font_red a:visited {

	color: #CF1F1F;
}

/* mouse over link */
.main_bold_font_red a:hover {

	color: #000000;
}

/* selected link */
.main_bold_font_red a:active {

	color: #CF1F1F;
}

.dj_play{

	position: absolute;
	top: 0;
	left: 0;
}

.h2_heading {
	font-weight: 900;
	font-size: xx-large;
	color:#000000;
	padding-top: 20px;
	padding-bottom: 20px;
}

#dj_form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dj_row {
    display: flex;
    flex-direction: column;
}

.dj_two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dj_label {
	color:#CF1F1F !important;
    font-weight: 600;
    margin-bottom: 6px;
}

input[type="password"],
input[type="text"],
input[type="email"],
input[type="url"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.contactTextArea{
	flex: 1;
	width: 100%;
    padding: 10px;
	box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
	resize: none;
}

.dj_genres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
}

.dj_genre_item{
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

button {
    padding: 1px 1px;
    font-size: 18px;
    border: none;
    background: #333;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.nowplaying-box {
    display: grid;
    grid-template-columns: 120px 1fr; /* left = image, right = text */
    grid-gap: 10px;
    color: #000; /* black text */
	max-width: 720px;
	width: 100%;
}

.nowplaying-art {
    grid-row: span 5; 
	/* image spans 4 rows */ 
	width: 120px;
}

.nowplaying-art img {
    width: 120px;
    height: auto;
	object-fit: cover;
    border-radius: 6px;
	display: block;
}

.nowplaying-details {
    display: grid;
    grid-template-rows: repeat(5, auto);
    row-gap: 4px;
}

.nowplaying-row {
    font-size: 14px;
    font-weight: 500;
	color:#000000;
}

.andBreathe{
	margin-bottom: 14px;
}

@media screen and (max-width: 767px) {	
	
	.iwp-image {	  
	    width: 800px;
		max-width: none;
	}
	
	.player {
		width: 720px;
		max-width: none;
	}
	
	.MixcloudSpacing{	
		padding: 10px;	
		max-width: 720px; 		
	}
	
	.form_a{
		margin:auto;	
		padding:40px;	
	}
		
	.bigLabel{
		font-family: "Rubik Mono One", sans-serif;
		font-size: 24px; 	
	}
	#dj-form {
    
			max-width: 720px;
	}
}

@media screen and (max-width: 480px) {
	
	.iwp_image {	
		
		
		width: 480px;
		max-width: none;
		height: 100px;		
	}	
	
	.player {
		width: 400px;
		max-width: none;		
		border: 2px solid white;
		padding: 0px;
	}
	
	.MixcloudSpacing{	
	
		
		padding: 10px;
    	max-width: 400px; /* Set a fixed width */
	}

	#dj-form {
    
			max-width: 480px;
	}

	#playPauseIcon{
		width: 40px;
		height: 40px;
	}
}