audio::-webkit-media-controls-panel {
	background-color: #F7BC2E;
}
audio::-webkit-media-controls-mute-button {
  background-color: #55F2FF;
  border-radius: 50%;
}
audio::-webkit-media-controls-play-button {
  background-color: #B1D4E0;
  border-radius: 50%;
}
audio::-webkit-media-controls-play-button:hover {
  background-color: yellow;
}

body {
	background-image: url(/img/background.jpg);
  background-repeat: repeat-y;  
  background-position: 0% 0%;
  background-size: 100% 100%;
  font-size: 32px;
}
@font-face {
   font-family: bellybeans;
   src: url(/fonts/bellybeans.ttf);
}
.belly {
   font-family: bellybeans;
}
@font-face {
   font-family: spicyrice;
   src: url(/fonts/SpicyRice-Regular.ttf);
}
.spicyrice {
   font-family: spicyrice;
}

input[type="text"] {
	font-family: spicyrice;
}
textarea {
	font-family: spicyrice;
}

#container {
	max-width: 1200px;
	margin:auto;
}
h2 {
	font-size: 50px;
}
a:link { 
	text-decoration: none; 
	color: #FFAF33;
 }
a:hover {
	color:#F7BC2E;
	background-color: #FFE933;
	padding:5px;
	border-radius: 15px;
}
.button {
	border:none;
	color:white;
	padding: 15px 32px;
	border-radius:10px;
	display:inline-block;
	font-size:4vw;
	margin:4px 2px;
	cursor:pointer;
	background-color:#008CBA;
}
table, th, td {
  border: 1px solid #F69A0D;
  border-collapse: collapse;
}

/*  SCREEN WIDTH  */

@media only screen and (min-width:1200px) {
	#mirrorball {
		width:200px;
	}
	#SNF {
		font-size:150px;
		color:#F7BC2E;
	}
	li, p {
	 text-shadow: 1px 1px 2px black;
	 font-size: 3vw;
	}
	#caldavInvitation {
		font-size:2vw;
	}
	.divTable {
		text-shadow: 1px 1px 2px black;
		background-color:transparent;
		font-weight:bold;
		font-size:2vw;
		color:white;
	}
}

@media screen and (min-width:800px) and (max-width:1199px) {
	#mirrorball {
		width:15vw;
	}
	#SNF {
		font-size:10vw;
		color:#F7BC2E;
	}
	li, p {
	 text-shadow: 1px 1px 2px black;
	 font-size: 4vw;
	}
	#caldavInvitation {
		font-size:3vw;
	}
	.divTable {
		text-shadow: 1px 1px 2px black;
		background-color:transparent;
		font-weight:bold;
		font-size:3vw;
		color:white;
	}
}

@media screen and (min-width:500px) and (max-width:799px) {
	#eventQR {
		display:none;
	}
	#mirrorball {
		width:15vw;
	}
	#SNF {
		font-size:10vw;
		color:#F7BC2E;
	}
	li, p {
	 text-shadow: 1px 1px 2px black;
	 font-size: 4vw;
	}
	#caldavInvitation {
		font-size:3vw;
	}
	.divTable {
		text-shadow: 1px 1px 2px black;
		background-color:transparent;
		font-weight:bold;
		font-size:3vw;
		color:white;
	}
}
@media screen and (min-width:1px) and (max-width:499px) {
	#eventQR {
		display:none;
	}
	#mirrorball {
		width:15vw;
	}
	#SNF {
		font-size:10vw;
		color:#F7BC2E;
	}
	li, p {
	 text-shadow: 1px 1px 2px black;
	 font-size: 6vw;
	}
	#caldavInvitation {
		font-size:4vw;
	}
	.divTable {
		text-shadow: 1px 1px 2px black;
		background-color:transparent;
		font-weight:bold;
		font-size:4vw;
		color:white;
	}
}