:root {
	--main-color: #f2f2f2;
	--main-muted: #abb2bf;
	--green: #70ebbe;
	--orange: #b48ead;
	--red: #ff6262;
	--cyan: #97c9ff;
	--blue: #50a4ff;
	--magenta: #a59ef6;
	--violet: #d671f0;
	--yellow: #fcd78a;
	--foreground-light: #97c9ff;
	--white: #ffffff;
}

::-webkit-scrollbar {
	display: none;
}

@font-face {
	font-family: "Font Awesome";
	font-style: normal;
	font-weight: 400;
	src: url("fontawesome.woff2") format("woff2");
}
body {
	background-color: #f2f2f2;
	margin: 150px 0px 0px;
	padding: 0px;
	min-width: 720px;
	text-align:center; 
} 
#mainContainer { 
margin:0 auto; 

}
#search-wrapper {
	background-color: #ffffff;
	padding: 0px;
	width: 50%;
	margin: 0px auto;
	min-width: 640px;
	position: relative;
}
#search {
	font-family: "San Francisco Display", Helvetica, sans-serif;
	color: #474747;
	text-align: center;
	border: 0px;
	padding: 0px 48px 0px 24px;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	line-height: 16px;
	font-size: 16px;
	background: none;
	transition: box-shadow 0.2s;
}
#search:focus {
	box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

#search:hover {
	box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}
#search-button {
	font-family: "Font Awesome";
	width: 48px;
	height: 48px;
	border: 0px;
	background: none;
	color: #aaa;
	position: absolute;
	right: 0px;
	font-size: 18px;
	padding: 0px;
	cursor: pointer;
}
#search-button:hover {
	color: #fff;
}
#logo {
	margin-top: 0px;
	font-family: "San Francisco Display", Helvetica, sans-serif;
	font-size: 80px;
	text-align: center;
	padding: 50px;	
	color: var(--main-muted);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#big_g {
	height: 50px;
	margin-top: 50px;
}
#links-container {
	white-space: nowrap;
	margin-top: 50px;
	margin-bottom: 72px;
	text-align: center;
}
.link {
	display: inline-block;
	width: 72px;
	height: 72px;
	line-height: 72px;
	font-family: "Font Awesome";
	font-size: 36px;
	color: #fff;
	text-decoration: none;
	margin: 0px 18px 36px;
	transition: height 0.2s, box-shadow 0.2s, margin 0.2s;
	background: #444;
}
.link:before {
	content: "?";
}
.link:hover {
	height: 78px;
	box-shadow: 0px -6px 0px rgba(0,0,0,0.2) inset,
		0px 0px 6px rgba(0,0,0,0.5);
	margin-bottom: 28px;
}

/*
Modifying the link icons and colors is pretty self-explanatory. Look up icon names at
http://fontawesome.io/icons/
then find the CSS character code by searching for the icon's name in the CSS file
http://fontawesome.io/assets/font-awesome/css/font-awesome.css
*/

.link-reddit {background:#50a4ff}
.link-reddit:before {content:"\f281"}
.link-youtube {background:#ff6262}
.link-youtube:before {content:"\f16a"}
.link-netflix {background:#50a4ff}
.link-netflix:before {content:"\f2dc"}
.link-4chan {background:#70ebbe}
.link-4chan:before {content:"\f054"}
.link-github {background:#ff6262}
.link-github:before {content:"\f09b"}
.link-apple {background:#fcd78a}
.link-apple:before {content:"\f179"}