style.css

/* ========================================================================= */
/* ================================ GENERAL ================================ */
/* ========================================================================= */


/* set  default font to Open Sans, embeded from Google Fonts */
* { font-family: 'Open Sans', sans; }
content a { font-family: inherit; color: #00705e; text-decoration: none}

/* set body to full width and height, instead of content's */
html, body { width: 100%; height: 100%; }

body
{
	/* hide overflow-x and overflow-y */
	overflow: hidden;

	/* remove body margin */
	margin: 0;

	/* set responsive background image (all browsers), that will appear when the video is not loaded */
	background: url(img/background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* Background Video */
#bg_video
{
	/* set position to fixed, preventing scroll */
	position: fixed;

	/* set index to -1, ensuring it'll be behind other elements */
	z-index: -1;

	/* set default dimensions to auto, allowing it to resize the video if needed */
	width: auto;
	height: auto;
	/* set minimum dimensions, allowing it to occupy full width and height even when the viewport is bigger than video's dimension */
	min-height: 100%;
	min-width: 100%;

	/* set the position to start cropping the video (i think 25% is more appropriate than 50%, thanks to video's content)*/
	top: 25%;
	left: 25%;
	transform: translate(-25%,-25%);
}



/* ======================================================================== */
/* ================================ HEADER ================================ */
/* ======================================================================== */


#header
{
	/* set fixed position */
	position: fixed;

	/* set index to 2, ensuring it'll be in front of other elements */
	z-index: 2;

	/* set width and height */
	width: 100%;

	/* apply a 10px space from top */
	margin-top: 10px;

	/* set a 10px padding */
	padding: 10px;

	color: white; /* set font color to white */
	transition: all 0.75s ease-in;
}

/* set .nav_left and .nav_right widths, and apply a 110px (55*2) space for the logo image */
#header div { width: calc(50% - 55px); }

/* set position to relative and display to inline-block, to prevent line breaking */
.nav_left, .nav_right
{
	position: relative;
	display: inline-block;
}

/* set font styles for header links */
#header a, #logo
{
	position: relative;
	display: inline-block;

	cursor: pointer;

	text-decoration: none; /* removes underline */
	outline: none; /* removes outline when clicked */

	margin: 5px 40px 5px 0; /* apply top (5px), bottom (5px) and right (40px) padding */

	text-transform: uppercase; /* transform text to UPPERCASE */

	margin-bottom: -2px;

	font-family: 'Orbitron';
	font-size: 1.05em;
}

#header a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #00E2BF;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;

  margin-bottom: -2px;
}

#header a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#header .nav_left { text-align: right; } /* align .nav_left text to right */
#header .nav_right { text-align: left; } /* align .nav_right to left      (confusing, huh?) */ 

#header #logo
{
	vertical-align: middle;
	width: 60px;
	height: 60px;
	fill: white;

	transition: all 0.75s ease-in;
}



/* ========================================================================= */
/* ================================ CONTENT ================================ */
/* ========================================================================= */


#content
{
	/* set display to inline-block, so we can use margin properties */
	display: inline-block;

	/* set width to full and height to (full minus header height) */
	width: 100%;
	height: calc(100% - 70px);

	/* start content after header element, preventing overlap */
	margin-top: 70px;

	/* fix weird bug (???) i think it's caused by 'height: calc()' */
	margin-bottom: -5px;
}

#content .index_logo
{
	/* set position to relative, allowing using top attribute */
	position: relative;

	/* centering horizontally */
	display: block;
	margin: auto;

	/* centering vertically */
	top: 50%;
	transform: translateY(-50%);

	/* set width */
	width: 50vmax;
	max-width: 100%; /* prevents overflow-y in small devices */
}



/* ======================================================================= */
/* ================================ PAGES ================================ */
/* ======================================================================= */

.link_active
{
	border-bottom: 2px solid #00E2BF;
}

.page_active
{
	top: 0 !important;
}

.whitespace { height: 110px; }

h1, h2, h3 {font-family: 'Orbitron';}

.title
{
	font-size: 2em;
	font-family: 'Orbitron';
	text-transform: uppercase;
}

#page_about, #page_news, #page_contact, #page_projects, #page_schedule, #page_wiki
{
	top: 100%;
	transition: all 0.75s ease-in;
	position: absolute;

	z-index: 1;

	width: 100%;
	height: 100%;

	background-color: #ddd;
	background: url(img/whiteBackground.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	color: #333;
}

content
{
	display: inline-block;

	width: calc(100% - 20px);
	height: calc(100% - 120px);
	
	padding: 0 10px;

	overflow-y: auto;
}

th { font-weight: normal; }