@import url('https://fonts.googleapis.com/css?family=ABeeZee');

@font-face {
  font-family: "hngl";
  src: url("https://github.com/netherlands-coding-live/netherlands-coding-live.github.io/blob/master/fonts/hngl.otf") format("otf");
}
/* not being able to serve the font, also tried: https://raw.githubusercontent.com/netherlands-coding-live/netherlands-coding-live.github.io/blob/master/fonts/hngl.otf */
	
body {
	height:100vh; /* This is needed to overcome a Chrome bug. */
	width: auto; 
	background: black;
	color: white;
	/* color: rgb(200, 200, 200); */
}

p {
	color: rgb(200, 200, 200);
}
	
.style01 {
	font-family: 'hngl', 'ABeeZee', sans-serif; 
	font-weight: bold;
	font-size: 50vh;
	/* color: white; */
/*	background-color: white;
	margin: 1vh;
	font-size: 50vh;
	width: auto;
	float:right;
	position: absolute;
	z-index: 1;
*/
	z-index: -10;
	height: 60vh;
	/* width: auto; */
	width: 100%;
	/* height: auto; */
	display: inline-block;
	overflow-y: hidden;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: colours;
	-webkit-animation-timing-function: ease;
	opacity: 0.6;
}

@-webkit-keyframes colours {
	  0% {color: #ff3933;}
	 15% {color: #FFC300;}
	 30% {color: #3361ff;}
	 45% {color: #33ffb8;}
	 60% {color: #ee78fc;}
	 75% {color: #fc8c78;}
	 90% {color: #000000;}
	100% {color: #808080;}
}

#info{
	float: left;
	margin-left: 5%;
	position: fixed;
	font-family: 'ABeeZee', sans-serif;
	font-size: 12pt;
	/* color: black; */
	height: 100%;
	overflow-y: scroll;
	z-index: 10;
}

#info a{
	background: black;
	margin-left: 5%;
	font-family: 'ABeeZee', sans-serif;
	text-decoration: none;
	font-size: 12pt;
	color: #fc8c78;
}

#info a:hover{
	color: #33ffb8;
	text-decoration: overline;
}

#events {
	float:none;
	margin-top: 10%;
	width: 60%;
}

#album {
	margin-top: 5%;
	width: 60%;
}

#radio {
	margin-top: 10%;
	width: 40%;
}
#twitter {
	position: fixed;
	width: 25%;
		right: 0;
}
.twitter-timeline{
	position: fixed;
	margin-top: 2%;
	margin-right: 5%;
}

@media only screen and (max-width: 768px){
	#events{
		width: 100%;
	}
	.style01{
		font-size: 8vh;
	}	
	#twitter{
		display: none;
	}
	#text {
		margin: 2px; 
		padding : 8px;  
		font-size: 11pt;
		line-height: 15pt;
		height: 250px;
	}
}

/* body {
	margin: 5%;
} */

@import url(reset_meyer.css);

#text {
	font-family: monospace; 
	color: #33ffb8;  
	/* margin: 5%;	 */
	padding : 120px;	
	font-size: 24pt;
	line-height: 30pt;
	box-shadow: inset 0px 0px 10px white;
	height: 100px;
}

#comm a {
	font-family: 'ABeeZee', sans-serif;
	font-weight: bold;  
	font-size: 14pt;
	font-weight: bold;
	text-decoration: none;
	line-height: 24pt;
	color: #fc8c78;;  
}
  
#comm a:hover {
	color: #33ffb8;  
	text-decoration: overline;
}

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}