My portfolio site's css (er, scss)... Compiled, so difficult to see what's going on....

portfolio.css.scss

/*
*= require shared/reset
*/

/* =============================================================================
   Primary styles
   Author: Jeremy Pharo
   
   Colors:
   -------
   
   Text & Site Header:
   Dark Blue 			#273C59
   Light Blue			#A7C6D9
   
   Backgrounds:
   Light gray			#f2f2f2
   Light > dark blue	#A7C6D9 > #84A4BF
   
   
   Fonts:
   ------
   Main Headers		Alegreya (900)
   Serif			Brawler (400)
   Sans Serif		Magra	(400)						
   ========================================================================== */



@mixin rounded($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

@mixin box-shadow($hor, $vert, $blur, $color) {
  -webkit-box-shadow: $hor $vert $blur $color;
     -moz-box-shadow: $hor $vert $blur $color;
       -o-box-shadow: $hor $vert $blur $color;
          box-shadow: $hor $vert $blur $color;
}

@mixin transition($what, $timing, $ease-type) {
  -webkit-transition: $what $timing $ease-type;
     -moz-transition: $what $timing $ease-type;
       -o-transition: $what $timing $ease-type;
          transition: $what $timing $ease-type;
}

@mixin transform($var) {
	 -webkit-transform: $var;
		-moz-transform: $var;
		  -o-transform: $var;
		     transform: $var;
}

body {
	background-image:         linear-gradient(bottom, rgb(132,164,191) 26%, rgb(167,198,217) 63%);
	background-image:      -o-linear-gradient(bottom, rgb(132,164,191) 26%, rgb(167,198,217) 63%);
	background-image:    -moz-linear-gradient(bottom, rgb(132,164,191) 26%, rgb(167,198,217) 63%);
	background-image: -webkit-linear-gradient(bottom, rgb(132,164,191) 26%, rgb(167,198,217) 63%);
	background-image:     -ms-linear-gradient(bottom, rgb(132,164,191) 26%, rgb(167,198,217) 63%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.26, rgb(132,164,191)),
		color-stop(0.63, rgb(167,198,217))
	);
}

#container {
	font-family: 'Brawler', 'Times', serif;
}

#main {	
	width: 980px;
	margin: 0 auto;
}

#main a {
	@include transition(all, .3s, ease);
	text-decoration: none;
}

#main p {
	line-height: 1.6em;
	margin-top: 0;
}

header {
	width: 100%;
}

header.site-header {
	display: block;
	background: #273C59;
	position: fixed;
	top: 0;
	z-index: 10;
	@include box-shadow(1px, 2px, 3px, #666);
}

header .container {
	width: 980px;
	margin: 0 auto;
}

header.site-header h1 {
	margin: 10px 0;
	display: inline;
	float: left;
}

h1 a {
	font-family: 'Alegreya', serif;
	font-size: 1.65em;
	text-transform: uppercase;
	text-decoration: none;
	@include transition(all, .3s, ease);
}

h1 a:link,
h1 a:visited,
h1 a:active {
	color: #A7C6D9;
	text-shadow: 1px 1px 3px #598992;
}

h1 a:hover {
	color: #A7C6D9;
	text-shadow: 1px 1px 5px #85b2d3;
}

h2 {
	font-family: 'Alegreya', serif;
	font-size: 3.25em;
	text-shadow: 2px 2px 5px #f2f2f2;
	color: #273C59;
	margin: 20px 0;
}

#code h2,
#photography h2 {
	margin-bottom: -35px;
}

h3 {
	margin-top: 0;
	color: #273C59;
	font-size: 1.5em;
	font-weight: 400;
}

h5 {
	margin-top: 5px;
	font-size: 1.3em;
	line-height: 1.35em;
	font-weight: 400;
}

nav {
	display: inline-block;
	float: right;
	margin-top: 25px;
}

nav ul li {
	display: inline;
	margin-right: 10px;
}

nav ul li a {
	font-size: 18px;
	padding: 5px;
	@include transition(all, 0.3s, ease);
}

nav ul li a:link,
nav ul li a:visited,
nav ul li a:active {
	text-decoration: none;
	color: #fff;

}

nav ul li a.active,
nav ul li a:hover {
	background-color: #A7C6D9;
	color: #273C59;
	-webkit-box-shadow: inset 0 0 7px 0 #555;
	   -moz-box-shadow: inset 0 0 7px 0 #555;
	        box-shadow: inset 0 0 7px 0 #555;
}


section {
	display: block;
	clear: both;
	margin-bottom: 75px;
}

#home {
	margin-top: 76px;
}

.faux-terminal {
	font: normal 1.2em 'Monaco', 'Courier New', 'Courier', monospace;
	color: #f2f2f2;
}

#home .faux-terminal p {
	background: #000;
	display: inline-block;
	width: 60%;
	float: left;
	clear: both;
	margin-bottom: 0;
	padding: .5em .7em;
}

#home .faux-terminal p.code {
	width: auto;
}

#home em {
	font-style: normal;
	text-transform: uppercase;
}

.lover	{ color: #f5649b; }
.maker	{ color: #35a03b; }
.hater	{ color: #a10014; }

#home .sub-header div {
	width: 75%;
	float: left;
}

#home .sub-header p {
	width: 70%;
}

#home .sub-header img {
	width: 135px;
	height: 135px;
	float: left;
	margin-left: 2em;
	@include box-shadow(1px, 1px, 2px, #444);
	@include transform(rotate(2deg));
}

#home h4 {
	display: inline;
	color: #273C59;
	font-size: 2em;
	font-weight: 400;
	margin: 0;
}


#home hr {
	width: 920px;
	margin-bottom: 0;
}

/* tabs */

.tabs ul {
	display: inline;
	float: right;
	padding: 0;
	margin: 0 25px -2px 0;
}

.tabs ul li {
	background-color: rgb(167,198,217);
	border-top: 1px solid rgb(132,164,191);
	border-left: 1px solid rgb(132,164,191);
	border-right: 1px solid rgb(132,164,191);
	display: inline;
	float: left;
	cursor: pointer;
	margin: 0 0 0 5px;
	padding: 10px;
	font-size: 1.25em;
	@include transition(background, 0.3s, ease);
}

.tabs ul li:hover,
.tabs ul li.active {
	border-color: 1px solid #f2f2f2;
	background: #f2f2f2;
	color: #273C59;
}



/* recommendations */

.recommendation {
	width: 45%;
	margin-left: 10%; 
	float: left;
}

.recommendation.first {
	margin-left: 0;
}

.recommendation .quote {
	width: 90%;
	background-color: rgba(244, 244, 244, 0.5); /* #f4f4f4 fallback? */
	padding: 1em;
	margin-bottom: 10px;
}	

.recommendations {
	clear: both;
	margin-bottom: 25px;
}

.recommendation cite {
	display: block;
	text-align: right;
	margin: 10px 0 0 0;
}

.recommendation cite img {
	cursor: pointer;
	padding: 3px;
	border: 1px solid #999;
	@include transition(all, 0.2s, ease);	
}

.recommendation cite img:hover {
	opacity: .85;
	border: 1px solid #888;
}

.recommendation cite a {
	font-family: 'Magra', sans-serif;
	font-style: normal;
	font-size: 1.4em;
}


/* code */
.project-tabs {
	position: relative;
	width: 100%;
}

#code h5 {
	margin: 0;
}

.projects {
	clear: both;
	position: relative;
	z-index: 2;
}

.projects article {
	position: relative;
	display: none;
	background: #f2f2f2;
	min-height: 565px;
	padding: 1em;
	overflow: hidden;
}

.projects article#stribling {
	display: block;
}

.projects figure#stribling-2,
.projects figure#stribling-3,
.projects figure#mls-2,
.photo-set#pro, {
	display: none;
}

.projects article#mls li {
	font-size: .9em;
	line-height: 1.4em;
	margin-bottom: 5px;
}

.projects article#mls .second {
	padding-top: 20px;
}

.projects article .info {
	width: 33%;
	float: left;
}

.projects article .pictures {
	width: 66%;
	height: 565px;
	float: right;
	position: relative;
}

.projects article .pictures p {
	font-style: italic;
	margin-bottom: 0;
}

.projects li {
	margin-bottom: 2px;
}

.projects figure {
	z-index: 2;
	/* background: #ededed; */
	padding: 1em;
}

.projects figure a,
.projects a.external {
	border-bottom: 1px dotted;
}

.projects figure p {
	display: inline-block;
	float: right;
}

.projects figure img {
	border: 2px solid #dfdfdf;
}	

.projects .pictures img {
	width: 595px;
}

.projects .button {
	float: right;
	margin:  10px 10px 0 0;
}

.slide-control {
	position: absolute;
	left: 1em;
	bottom: 0;
}

.slide-control a {
	padding: .1em .4em;
	margin: 0 .2em;
}

.slide-control .pipe {
	color: #ccc;
}

.slide-control a.active {
	background: #a7C6d9;
}



/* photos */
#photography .tabs ul {
	margin-bottom: 0;
}

.photos {
	position: relative;
	z-index: 2;
}

.photo-set {
	position: relative;
	background: #f2f2f2;
	min-height: 410px;
	overflow: hidden;
}

.photo-set#pro {
	height: 660px;
	padding: 1em;
}

.photo-set#pro .slide-control { bottom: 1em; }

#pro figure#pro-2,
#pro figure#pro-3,
#pro figure#pro-4,
#pro figure#pro-5,
#pro figure#pro-6 {
	display: none;
}
	
.instagram-photos figure {
	float: left;
	margin: 15px 0 15px 15px;
}

#main .instagram-photos p {
	width: 295px;
	margin: 5px 0 0 0;
	padding: 0;
	color: #333;
	line-height: 1.25em;
}

#main .instagram-photos .likes {
	color: #666;
	font-size: .9em;
}

#main .instagram-photos p.api-disclaimer {
	width: 100%;
	text-align: center;
	color: #333;
	font-size: .8em;
	clear: both;
}



/* contact me */

.column {
	width: 30%;
	float: left;
	margin-left: 5%;
}

.column.first {
	margin-left: 0;
}

.column.wide {
	width: 65%;
}

.parallax {
	clear: both;
}

#main .parallax p {
	text-align: center;
	font-family: 'Magra', sans-serif;
	font-size: 3em;
	color: #f2f2f2;
	text-shadow: 1px 1px 3px #598992;
	padding: 100px 0 0 0;
}

.social-accounts a {
	width: 175px;
	float: left;
	clear: both;
	margin-bottom: 1em;
}

form {
	width: 80%;
}

form input,
form textarea {
	display: block;
	width: 100%;
	background-color: #D4FCF9;
	border: 0;
	font: 1.2em 'Brawler', serif;
	margin: 15px 0;
	padding: 10px;
}

form textarea {
	height: 100px;
}

form input#submit {
	width: auto;
	margin: 0;
	height: 2.5em;
}



footer {
	width: 980px;
	clear: both;
	margin: 25px auto 10px auto;
	text-align: center;
}

footer time {
	font-family: 'Magra', sans-serif;
	display: block;
}

footer img {
	display: block;
	margin: 10px auto;

}


/*======================
 buttons
========================*/

.button {
	display: inline-block;
	height: 1.25em;
	padding: .5em .75em;
	border: 1px solid #999;
	text-align: center;
	font-family: 'Magra', sans-serif;
	color: #444;
	background-image:          linear-gradient(bottom, rgb(214,214,214) 6%, rgb(240,240,240) 43%);
	background-image:       -o-linear-gradient(bottom, rgb(214,214,214) 6%, rgb(240,240,240) 43%);
	background-image:     -moz-linear-gradient(bottom, rgb(214,214,214) 6%, rgb(240,240,240) 43%);
	background-image:  -webkit-linear-gradient(bottom, rgb(214,214,214) 6%, rgb(240,240,240) 43%);
	background-image:      -ms-linear-gradient(bottom, rgb(214,214,214) 6%, rgb(240,240,240) 43%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.06, rgb(214,214,214)),
		color-stop(0.43, rgb(240,240,240))
	);
	
	@include rounded(5px);
	@include box-shadow(1px, 1px, 3px, #A7C6D9);
}

.button:hover {
	color: #222;
	
	background-image:          linear-gradient(bottom, rgb(204,204,204) 6%, rgb(230,230,230) 43%);
	background-image:       -o-linear-gradient(bottom, rgb(204,204,204) 6%, rgb(230,230,230) 43%);
	background-image:     -moz-linear-gradient(bottom, rgb(204,204,204) 6%, rgb(230,230,230) 43%);
	background-image:  -webkit-linear-gradient(bottom, rgb(204,204,204) 6%, rgb(230,230,230) 43%);
	background-image:      -ms-linear-gradient(bottom, rgb(204,204,204) 6%, rgb(230,230,230) 43%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.06, rgb(204,204,204)),
		color-stop(0.43, rgb(230,230,230))
	);
	
	
	@include box-shadow(1px, 1px, 5px, #A7C6D9);
}



@media only screen and (max-width: 1025px) {
  /* Style adjustments for viewports 480px and over go here */

	h1 a {
		font-size: 1em;
		padding-left: .25em;
	}
	
	#main {
		width: 100%;
	}
	
	section {
		padding: 10px;
		margin-bottom: 0;
	}
	
	section h2 {
		font-size: 2em;
	}
	
	#home {
		margin-top: 35px;
	}
	
	#home h4 {
		font-size: 1.2em;
		font-weight: 600;
	}
	
	#home .sub-header p {
		width: 100%;
	}
	
	#home .sub-header div {
		width: 55%;
	}
	
	#home .sub-header img {
		width: 90px;
		height: 90px;
	}
	
	#home hr {
		width: 90%;
	}
	
	.parallax {
		display: none;
	}
	
	#connect {
		padding-bottom: 35px;
	}

	form {
		margin: 0;
		width: 90%;
	}
	
	nav {
		width: 100%;
		text-align: left;
		display: none !important;	
	}
	
	nav ul {
		float: left;
		width: 100%;
	}
	
	nav ul li {
		display: block;
		width: 100%;
		padding: 1em 0;
		border-top: 1px solid #ddd;
	}
	
	.project-description {
		width: 100%;
		margin-left: 0;
	}
	
	.projects .pictures img {
		width: 100%;
	}
	
	
	.column.first {
		width: 100%;
		clear: both;
	}
	
	.column.wide {
		display: none;
	}

	footer {
		width: 100%;
		padding-top: 35px;
	}
	
}