style.css

@font-face {
  font-family: 'Intro';
  src: url("intro-webfont.eot");
  src: url("intro-webfont.eot") format("embedded-opentype"),
      url("Intro.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Intro';
  src: url("intro-webfont.eot");
  src: url("intro-webfont.eot") format("embedded-opentype"),
      url("Intro.otf") format("opentype");
  font-weight: bold; /*It's bold enough; browser faux-bolding is annoying.*/
  font-style: normal;
}

/*https://css-tricks.com/custom-scrollbars-in-webkit/*/
/* Let's get this party started */
::-webkit-scrollbar {
    width: 0.8vw;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.1); 
}


body{
	text-align: center;
	font-family: Intro, Arial, sans-serif;
	background-color: #666;
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:scroll;
}
@media (min-width: 2000px){
	body{font-size: 1em;}
}
@media (max-width: 2000px) and (min-width:600px){
	body{font-size: 0.55em;}
}
@media (max-width: 600px) and (min-width: 400px){
	body{font-size: 0.35em;}
}
@media (max-width: 400px){
	body{font-size: 0.25em;}
}

#wrapper{
	padding:0 3em;
	margin:0;
	text-align: center;
}


h1{
	margin-top: 13vh;
	margin-bottom: -0.2em;
	text-align:center;
	font-size:8em;
	display:block;
	font-weight: bold;
}
@media (min-width: 2000px){
	h1{margin-top: 30vh;}
}
h1 .first-letter{font-size: 1.15em;} /*For Intro only*/
#live{
	font-size: 4em;
	margin: 0;
	margin-bottom: 0.8em;
	color: black;
}
h2 span{
	position: relative; top: -0.07em;/*Because *some* browsers don't do vertical-align: middle correctly.*/
	font-size: 0.6em;
	color: #ffc747;
}

#clock, #clock2{
	font-size:13em;
	display: inline-block;
	font-weight: bold;
}
.hasJS #clock, .hasJS #clock2{left: 200px;}
#clock td, #clock2 td{
	width: 1.7em;
	text-align: right;
	overflow: hidden;
}
#clock td small, #clock2 td small{
	font-size: 0.5em;
	width: 1em;
	text-align: left;
}
@media (min-width: 800px){
	#clock2{display:none;}
}
@media (max-width: 801px){ /*Oddly enough, at exactly 800 it would both disappear. Lol.*/
	#clock{display:none;}
}

#caption{
	max-width: 100%;
	margin-top: 0.5em;
	font-size: 3.5em;
	text-align:center;
}
.hasJS #caption{left: -200px;}
#caption span{
	display: inline-block; /*Preferentially wrap between those two parts
						then if needed wrap more as necessary*/
}

#spots150, #dontwait{opacity:0;}
.slider{opacity:0;position:relative;}

#button1, #button2, #button3{
	text-decoration: none;
	border-radius: 8px;
	font-size: 2em;
	padding: 1.5em 0.5em;
	margin: 1.2em 1.2em 0.5em 1.2em;
	width: 14em;
	
	transition: background-color 0.3s, top 1s, opacity 1s; /*conflicts :( */
	display: inline-block;
	
	top: 0px; /*To be changed by JS to 100px. To prevent improper sizing of the canvas by being down there.*/
}
#button1{background-color: rgba(0, 0, 0, 0.8); color: rgb(255, 199, 71);} /*orange on black*/
#button1:hover{background-color: rgba(0, 0, 0, 1.0);}
#button2{background-color: rgba(255, 199, 71, 0.8); color: #000;} /*black on orange*/
#button2:hover{background-color: rgba(255, 199, 71, 1.0);}
#button3{background-color: rgba(71, 154, 255, 0.8); color: #fff;} /*white on blue*/
#button3:hover{background-color: rgba(71, 154, 255, 1.0);}
#button2{font-size: 2.4em;}
@media (max-width: 65em){
	#button1, #button2, #button3{display: block; margin-left: auto; margin-right: auto;}
	#caption>span{display:block;} /*So the buttons won't be alone in linebreaking.*/
}

svg#delaunay{
	position:absolute; top:0; left:0;
	z-index:-1000;
	transition:opacity 1.5s;
	background-color:white;/*lines more visible*/;
	opacity: 0.9;
}
.hasJS svg#delaunay{opacity:0;}

#loading{display:none;transition: opacity 0.5s;}
.hasJS #loading{display:block;}

/*svg*/
path{
	stroke: transparent;
	fill: transparent;
}