.f-raleway {font-family: 'Raleway', sans-serif;}
.f-source {font-family: 'Source Code Pro', monospace;}

#viewport {
	position:fixed;
	left:20px;
	top:20px;
	line-height:10px;
	font-size:12px;
	color:#ffffff;
}

body {
	margin:0;
	background-color:#161616;
	overflow-x:hidden;
	overflow-y:scroll;
}


#wrap {
	width:100vw;
	height:100vh;
}


#main {
    padding-left:30px;
    padding-top:0px;
    overflow:hidden;
}

.header {
    width:1280px;
    float:left;
}

.h1 {
    font-size:60px;
    font-weight:800;
    letter-spacing:-2px;
}

.t1 {
    font-size:30px;
}

/* colours */
.lt-gray {
    color:#c4c4c4;
}

.gray {
    color:#818181
}

.pink {
    color:#ff2f65;
}

.lt-blue {
    color:#04afff;
}

.cyan {
    color:#04ff8c;
}

.h-logo {
    display:inline-block;
    width:200px;
    float:left;
}

.icons {
    font-size:20px;
    color:#818181
}

.icons:hover {
    color:#ff2f65;
    cursor: pointer;
}

.divider {
    color:#818181;
    font-weight:800;
    margin-left:10px;
    margin-right:10px;
}

.t2 {
    color:#818181;
    font-size:14px;
}

.t3 {
    color:#818181;
    font-size:14px;
    float:left;
}

.t4 {
    white-space:pre;
}

.workshop-link:hover {
    color:#ff2f65;
    cursor: pointer;
}