header {
	height: 500px;
	background: url(../images/campus-toronto.jpg) center center;
	background-size: cover;
	position: relative;

}

#network-canvas {
	top:0;
	left:0;
	position: absolute;
	z-index: 1;
	background-size: cover;
}

.header-info {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 2;
}

.opaque-bg {
	height: 100%;
	width: 100%;
	position: absolute;
	background: rgba(22, 32, 34, 0.68);
	z-index: 0;
}

header nav {
	float: right;
	margin: 30px 30px 80px 0px;
}


nav a {
	display: inline-block;
	margin-left: 20px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: white;
	text-decoration: none;
}


.header-info a {
	border-bottom: skyblue solid 3px;
}


nav a:hover {
	color: rgba(130, 215, 250, 1);
}
nav a:focus {
	color: white;
}


.my-pic {
	width: 216px;
	height: 216px; 
	clear: both;
	margin: 0px auto 0px auto;

	border-radius: 50%;
	border: white solid 10px;
	pointer-events: none;

	box-shadow: 10px 4px 30px 10px rgba(0, 0, 0, 0.5), 
	0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.my-pic img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	pointer-events: none;


}

.my-pic img:hover {
		transform: rotate(50deg);
}


header h1 {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: white;
	letter-spacing: 0.05em;
	line-height: 1;
	pointer-events: none; 
}