
							@font-face{
								font-family: paragraphs;
								src: url('../css/webfonts/proximanova-regular-webfont.ttf');
							}

							
							@font-face{
								font-family: headers;
								src: url('/content/fonts/bernier.ttf');
							}
							
							@font-face{
								font-family: awesome;
								src: url('/content/fonts/fontawesome-webfont.woff'),
									 url('/content/fonts/fontawesome-webfont.woff2');
							}

				
			
				
				
				body::before {    
						  content: "";
						  background: url("/content/background.jpg") repeat-y fixed center;		
						  background-size: cover;
						  position: absolute;
						  top: 0px;
						  right: 0px;
						  bottom: 0px;
						  left: 0px;
						  opacity: 0.15;
					}
					
				body{
				padding: 0px;
				font-family: headers;
				text-transform:	lowercase;
				opacity: 1;
				background-color: black;
				color: white;
				height: 100vh;
				margin: 0px;
				

				}
				
				a{
				text-decoration: none;	
				}
				
				div#codeBox{
				position: fixed;
				bottom:0px;
				left:0px;									
				}
				
				input#code{
				background-color: black;
				color: #f3f3f3;
				border: solid 0px;			
					
				}
				
				input#code:focus-visible{					
					    border: solid 0px;
						outline: none;			
					
				}
				
			
				div#right{
				width: 40px;
				height: 40px;
				position: fixed;
				top: 0px;
				right: 0px;
				font-size: 30px;
				text-align: center;
				cursor:pointer;				
				}
				
				div#left{
					width: 40px;
				height: 40px;
				position: fixed;
				top: 0px;
				left: 0px;
				font-size: 30px;
				text-align: center;					
				}
				div#main{
				position:relative;

								
				}
				
				div#stretch{
					    font-size: 45px;
						position: absolute;
						top: 55vh;
					}
					
				
				
				div#welcome{
					text-align: center;
					font-size: 160px;   
					vertical-align: middle;
					height: 90vh;
					display: flex;
					justify-content: center;
					align-items: center;
					position:relative;
				}
				
				div#rules{
					font-size: 45px;   
					vertical-align: middle;
					height: 90vh;
					position:relative;
					padding-left: 100px;
					padding-top: 20px;
					

				}
				
				div#rollcall{
						
					font-size: 30px;   
					vertical-align: middle;
					height: 90vh;
					position:relative;
					padding-left: 100px;
					padding-top: 20px;   
					
					

				}
				
				div#answerMode{
						width: 50%;
						position: fixed;
						top: 30px;
						left: 25%;						
						text-align: center;
						color: #9b1c1f;
						font-size: 30px;
						background-color: rgba(255, 255, 255, 0.75);
						padding: 5px;
				
					
				}
				
			
				
				div#rules > ul > li{
				
				margin-top: 16px;				
					
				}
				div#question_page{
				padding: 70px;	
					
				}
				div#question{
				font-size: 60px;
							
				}
				
				div.answerDiv{
				width: 49%;
				float: right;
				padding-left: 10px;					
				}
				
				div.answerDivFull{
						
				}
					
				div.answer{
				padding: 14px;
				font-size: 52px;
				}
				
				#videoWrapper{
				width: 49%;
				float: left;
				position: relative;	
				}
				
				#logoHider{
				
				z-index: 9999;
					
					height: 56px;
					position: absolute;
					width: 100%;
					color: transparent;					
					backdrop-filter: blur(10px);				
									
								}
				
				.blur{
					
				    color: transparent;
					text-shadow: 0 0 30px #fff;
					cursor: pointer;
					
					
				}
				
				img#qr{
				position: fixed;
				bottom: 5px;
				width: 200px;
				height: 200px;
				padding: 10px;				
					
				}
				
				
				
				tr:nth-child(even) {background-color: rgba(139, 139, 139, 0.5);}
				tr:nth-child(odd) {background-color: rgba(46, 46, 46, 0.5);}
				
				th{
					background-color: black;
					color: white;
					font-size: 30px;
				}
				
				input.scores{
				font-size: 30px;
				width: 100px;
				text-align: center;					
				}
				
				td{					
				font-size: 30px;
				padding: 6px;				
				}
				
				.teams{				
				font-size: 60px;
				float: left;
				width: 50%;	
				text-align: center;	
				padding-top: 20px;				
				}
				
				.image{
				
				max-width: 600px;
				max-height: 600px;
				padding: 3px;
				border: solid 1px #fff;
					
				}
				.questionTitle{
				width: 100%;
				clear: both;
				border-bottom: solid 1px #fff;				
				margin-bottom: 20px;
				text-align:center;
					
				}
				
				.imageDiv{
				width: 50%;
				float:left;	
				text-align: center;				
				}
				
				a{
				color: #fff;	
				}
				
				div#links{
				position: fixed;
				height: 20px;
				width: 80%;
				bottom: 0px;
				left: 10%;
				text-align: center;				
				}
				
				span.link{
					
				padding-left: 8px;	
				}
				
				
				a:hover{
				color: #9B1D20;	
				}
				
				a.yup{
				color: #9B1D20;	
					
				}
				
				div#logo{
				position: fixed;
				bottom: 10px;
				right: 10px;
				}
				
				div#logo img{				
				width: 40px;						
				}
				
				div#weekOfPlay{
					
				text-align: center;
				font-size: 30px;
				padding: 5px;			

					
				}
				
				div#exit{
				position: fixed;
				bottom: 0px;
				left: 0px;
				}
						
				
				.highlight{
					
					color: white;
					background-color: #9B1D20;
					
				}						