:root {
	--global--color-background: #0C0C48;
	--global--color-gradientstart: #4461A3;
	--global--color-gradientend: #8B9BC0;
	--global--color-chatlight: #9fb1da;
	--global--color-hover: #7186b5;
	--global--color-chat: #2D4C92;
	--global--color-chatname: #ffffff;
}
html, body {
    height: 100%;
    width:100%;
    margin: 0px;
    font-size:16px;
    scroll-behavior: smooth;
}
body{
	font-family: 'Lato', sans-serif;
	margin:0;
	color:white;
}
.stop-scrolling {
	/* Used to diable site scroll in mobile mode when chat is open */
    height: 100%;
    overflow: hidden;
}
a:visited{
	color:white;
}
a:hover{
	color:white;
}
a{
	color:white;
	text-decoration: none;
  	font-weight: normal;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/*=== Landing Page ===*/
#landingPage{
	width:100%;
	height: 100vh;
	background-color: var(--global--color-background);
  	overflow: hidden;
  	position:relative;
  	z-index:0;
}
#sun{
	position:absolute;
	width: 60%;
	top: 5%;
	left: 25%;
}
#starOne{
	position:absolute;
	width: 1%;
	top: 30%;
	left: 10%;
}
#starTwo{
	position:absolute;
	width: 1%;
	top: 55%;
	left: 95%;
}
#wolf{
	position: absolute;
	width: 120px;
	bottom: 250px;
	left: 300px;
}
#mountainFront{
	position: absolute;
	bottom: -300px;
	left: 0;
	width: 1440px;
	min-width:100%;
	height:659px;
}
#mountainBack{
	position: absolute;
	bottom: -100px;
	right: 0;
	width: 880px;
	min-width:61%;
	height:354px;
}
#landingPageLogo{
	z-index: 2;
	font-size: 15vw;
	font-weight:100;
	position: fixed;
	top: 20%;
	right: 10%;
}
#landingPagePausePlay{
	height: .7em;
}
#nowPlayingContainer{
	display: flex;
	align-items: center;
	justify-content: left;
	height: 6vw;
	width: 60vw;
	font-size: 2vw;
	font-weight: 300;
}
#siteStatusText{
	/* font-size: 2vw; */
	padding-left: 20%;
}
.siteMessageWrapper {
	max-width: 50%;
	overflow: hidden;
}
.siteMessage {
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	animation: siteMessage 10s linear infinite;
}
.siteMessage p {
	display: inline-block;
}
@keyframes siteMessage {
	0% {
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  transform: translate3d(-50%, 0, 0);
	}
}
#bars{
	height:100%;
	display:block;
}
/* Volume styling */
#volume {
	-webkit-appearance: none;
	width: 100%;
	height: .7vw;
	margin-top: 2.65vw;
	margin-left: 1vw;
	background: #d3d3d3;
	outline: none;
	display: none;
	border-radius: 0.8vw;
	-webkit-transition: .2s;
	transition: opacity .2s;
	background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, var(--global--color-chatlight) 50%, var(--global--color-chatlight) 100%);
	outline: none;
	transition: background 450ms ease-in;
	-webkit-appearance: none;
}
#volumeContainer{
	width: 15%;
	height: 100%;
}
#volumeContainer:hover > #bars {
	display: none;
}
#volumeContainer:hover > #volume {
	display: block;
}

#volume::-webkit-slider-thumb {
	border-radius: 1.5vw;
	border: 2px solid white;
	-webkit-appearance: none;
	appearance: none;
	width: 1.5vw;
	height: 1.5vw;
	background: var(--global--color-chatlight);
	cursor: pointer;
}
#volume::-moz-range-thumb {
	border-radius: 35px;
	border: 2px solid white;
	width: 35px;
	height: 35px;
	background: var(--global--color-chatlight);
	cursor: pointer;
}

/*Mobile Version*/
@media only screen and (max-width: 768px) {
	#sun{
		width: 600px;
		min-width: 61%;
		top: -10%;
		left: 40%;
	}
	#starOne{
		width: 2%;
		top: 30%;
		left: 10%;
	}
	#starTwo{
		width: 2%;
		top: 20%;
		left: 95%;
	}
	#wolf{
		width: 150px;
		bottom: 250px;
		left: 80px;
	}
	#mountainFront{
		bottom: -320px;
		min-width:300%;
	}
	#mountainBack{
		display:none;
	}
	#landingPageLogo{
		top: 20%;
		text-align: center;
		width:100%;
		height:20%;
		right:0;
		font-size: 18vw;
	}
	#landingPagePausePlay{
		padding: 0px;
	}
	#nowPlayingContainer{
		height: 6vw;
		width: 100%;
		font-size: 3vw;
	}
	#volume{
		margin-top: 2.65vw;
	}
	#siteStatusText{
		padding-left: 15%;
	}
	#nowPlayingText{
		font-size: 8vw;
	}
}

/*=== Site Body + Footer ===*/
#mainBody{
  	background-image: linear-gradient(var(--global--color-gradientstart), var(--global--color-gradientend));
  	position:relative;
  	z-index:1;
}

/*=== Chat ===*/
#chat{
	position:fixed;
	right: 5%;
	bottom: 5%;
	width: 50px;
	z-index: 3;
}
/* Classes that are added when the chat is expanded */
.expandedChat{
    height: 500px !important;
    width: 400px !important;
}
#chatIcon{
	display:block;
	width:100%;
	cursor:pointer;
}
/* Classes that are added when the chat is expanded */
.expandedChatIcon{
	display: none !important;
}
#chatWindow{
	display:none;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background-image: linear-gradient(to bottom right, #FFFFFF17, #FFFFFF17);
}
/* Classes that are added when the chat is expanded */
.expandedChatWindow{
	border-radius: 30px !important;
	display: block !important;
}
.messages::-webkit-scrollbar {
    width: 8px;
}
.messages::-webkit-scrollbar-track {
    background:var(--global--color-chatlight);
    border-radius: 10px;
}
.messages::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background:var(--global--color-gradientstart);
}
.messages{
	scrollbar-color: var(--global--color-gradientstart) var(--global--color-chatlight);
	position:relative;
	width: 85%;
	margin:auto;
	height: 70%;
	top: 20px;
	overflow: auto;
	overflow-x: hidden;
}
.message{
	padding-top: 5px;
	padding-bottom:10px;
}
.name {
	font-size: 10px;
}
.name b { 
	font-size: 16px; 
	font-weight: normal;
}
.member{
    color:var(--global--color-chatlight) !important;
}
.message-form{
	position:absolute;
	top: 77.5%;
	width: 100%;
	margin:auto;
	background-color: var(--global--color-chat);
	color: white;
}
.message-form__button{
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 20px;
	background-color: var(--global--color-gradientstart);
	color: white;
	width: 15%;
	padding: 0;
	height:35px;
	border: 0;
	border-radius: 15px;
}
.message-form__input{
	position: absolute;
	top: 0;
	left: 5%;
	background-color:var(--global--color-chatlight);
	color: var(--global--color-chatname);
	width: 62.5%;
	padding: 10px;
	height:15px;
	padding-right: 80px;
	border-radius: 15px;
	border: 0;
    outline-width: 0;
}
.message-form__input::placeholder{
	color: var(--global--color-hover);
}
#chatClose{
	position:absolute;
	top: 87.5%;
	height: 8%;
	right: 20px;
	cursor: pointer;
}
.message-form__input::placeholder{
	color: var(--global--color-hover);
}
.members-count{
	display:none;
}
.members-list{
	display:none;	
}
/*Mobile Version*/
@media only screen and (max-width: 768px) {
	.expandedChat{
		height: 100% !important;
		width: 100% !important;
		right:0 !important;
		bottom:0 !important;
	}
	.expandedChatWindow{
		border-radius: 0px !important;
	}
	.messages{
		height: 75%;
		top:5%;
	}
	.message-form{
		top: 82%;
	}
	#chatClose{
		top: 90%;
		height: 5%;
		right: 10%;
	}
}

/*=== Site Message ===*/
#Text{
	width: 50%;
	font-weight:300;
	font-size: 60px;
	padding-top: 20vh;
	padding-bottom: 20%;
	padding-left: 5%;
	padding-right: 5%;
  	text-shadow:
    0 0 20px #fff
}

/*Mobile Version*/
@media only screen and (max-width: 768px) {
	#Text{
		width: 70%;
		padding-left: 10%;
		padding-right: 20%;
		font-size: 40px;
	}
}

/*=== Schedule ===*/
#scheduleTitle{
	font-size: 100px;
	font-weight:100;
	padding-left: 5%;
}
#scheduleContainer{
	display: grid;
	grid-template-columns: .3fr 1fr;
	padding: 10px;
	width:50%;
	padding-bottom:10%;
	padding-left: 5%;
	font-size: 20px;
	font-weight:300;
}
.day{
	padding-top:5px;
	padding-right:20px;
	grid-column-start: 1;
	grid-column-end: 2;
}
.showContainer{
	grid-column-start: 2;
	grid-column-end: 3;
	/*padding: 10px;*/
	background-color: transparent;
}
.show{
	margin-left: 15px;
  	border-radius: 10px;
	padding:5px;
	float:left;
    display: block;
    white-space:nowrap;
}
.show:hover{
	cursor: pointer;
	background-color:var(--global--color-hover);
}
.gap{
	padding-top: 20px;
}
.gap:hover{
	background-color:transparent !important;
	cursor: default !important;
}
.showInfo{
	white-space: initial;
	width: 100%;
}
.showDetails{
	width: 100%;
	display:none;
	white-space: initial;
	margin-left: 5%;
	margin-right: 5%;
}
.showImage{
	width: 90%;
	margin-top: 30px;
	margin-bottom: 10px;
	border-radius: 20px;
}
.showHost{
	width: 90%;
	margin-top:10px;
	margin-bottom:10px;
}
.showSubheading{
	width: 90%;
	color: rgba(255, 255, 255, 0.5);;
	margin-top:10px;
	margin-bottom:10px;
}
.showDescription{
	width: 90%;
	margin-top:20px;
	margin-bottom:20px;
}

/*Mobile Version*/
@media only screen and (max-width: 768px) {
	#scheduleTitle{
		font-size: 80px;
	}
	#scheduleContainer{
		display: grid;
		grid-template-columns: 1fr;
		padding: 10%;
		width: 80%;
		padding-bottom: 150px;
	}
	.day{
		padding-bottom:10px;
		grid-column-start: 1;
		grid-column-end: 2;
	}
	.showContainer{
		grid-column-start: 1;
		grid-column-end: 2;
	}
	.show{
		margin-left: 0px;
	}
}

/*=== Footer ===*/

#footer{
	overflow:hidden;
	position:relative;
	width:100%;
   	height: max-content;
}
#footerContentContainer{
	position: absolute;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
	bottom: 0;
	width: 50%;
	height: 100%;
	padding-left: 5%;
}
#footerImage{
	width:100%;
  	display: block;
}
#footerScrollUp{
	margin-bottom: 10%;
	font-size: 30px;
	cursor: pointer;
}
#footerText{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: left;
	margin-bottom: 10%;
}
.column{
	display:flex;
	flex-direction: column;
	flex-basis: 33.333333%;
}
/* .footerItem{
	flex-basis: 33.333333%;
} */
#howlerRadioLogo{
	width:50%;
	margin-bottom:10%;
}
/*Mobile Version*/
@media only screen and (max-width: 768px) {
	#footerImage{
		width: 300%;
		position:absolute;
		height:100%;
	}
	#footerContentContainer{
		padding-top: 150px;
		position:relative;
		top: 0;
		bottom: auto;
		height: auto;
	}
	.column{
		flex-basis: 100%;
		margin-bottom: 40px;
	}
	#footerScrollUp{
		display: none;
	}
	#howlerRadioLogo{
		width:100%;
	}
}