@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,700');

/**********Main**********/
html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto Condensed', sans-serif;
	background-color: #0E1114;
}

footer {
	text-align: center;
	font-size: 0.75em;
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	margin: 0;
}

.wrapper-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.section-wrapper {
	position: relative;
}

.section-title {
	text-align: center;
	padding: 30px 0;
}

scroll-container {
	scroll-behavior: smooth;
	overflow-y: scroll;
}
/**********Header**********/
header{
	position: fixed;
	width: 100%;
	top: 0;
}

nav {
	display: inline-block;
}

header h1,
nav ul {
	display: inline-block;
	margin: 10px 0;
	vertical-align: middle;
}

nav ul li {
	display: inline-block;
	list-style-type: none;
	margin-right: 100px;
}

nav ul li a {
	color: white;
	text-decoration: none;
}

/**********Home**********/
#home {
	height: 100%;
	background: 
	radial-gradient(
		circle at bottom left, 
		#0BBCFF 10%, 
		rgba(0, 0, 0, 0) 100%
	),
	radial-gradient(
		circle at top right, 
		#00ffa5 10%, 
		rgba(0, 0, 0, 0) 100%
	),
	url('https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')  no-repeat center center fixed;
	background-size: cover; 
	color: white;
}

#home h1 {
	font-size: 4em;
}

#home h3 {
	font-size: 2.25em;
}

/**********Services**********/
#services {
	min-height: 100%;
	background-color: #fff;
	background: url('https://images.pexels.com/photos/355770/pexels-photo-355770.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center fixed;
}

.service-wrapper {
	text-align: center;
}

.service {
	width: 48%;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.75);
	text-align: center;
	height: 20vw;
	margin: 15px;
}

/**********Portfolio**********/
#portfolio {
	min-height: 100%;
}

.project-wrapper {
	text-align: center;
}

.project {
	width: 15%;
	height: 15vw;
	display: inline-block;
	background-color: #fff;
	margin: 30px;
}