@font-face {
    font-family: "Myriad Pro Light";
    src: url(MyriadPro-Light.otf);
}

@font-face {
    font-family: "Rounds Black";
    src: url(rounds-black.otf);
}

body {
	margin: 0px;
	background-attachment: fixed;
	background-position: center;
	
	font-family: "Myriad Pro Light";
	font-size: 13pt;
	color: white;
}

h1 {
	font-family: "Trebuchet MS";
	font-weight: bold;
	font-size: 22pt;
	color: rgb(204, 255, 255);
	text-shadow: 0px 0px 13px rgba(255,255,255,0.7);
}

p {
	font-family: "Myriad Pro Light";
	font-size: 13pt;
	letter-spacing: 0.65px;
	line-height: 130%;
	color: white;
}

a {
	font-family: "Myriad Pro Light";
	font-size: 13pt;
	letter-spacing: 0.65px;
	line-height: 130%;
	color: blue;
	text-decoration: none;
}

#mainwrapper {
	width: 900px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: center;
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,0.3) 25%);
}

.side {
	width: 50px;
	height: 100%;
}

#side-left {
	background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0));
	float: left;
}

#side-right {
	background: linear-gradient(to left, rgba(0,0,0,0.8), rgba(0,0,0,0));
	float: right;
}

#banner {
	background: linear-gradient(to bottom, rgba(252,236,252,1) 26%,rgba(251,166,225,1) 46%,rgba(253,137,215,1) 46%,rgba(255,124,216,1) 100%);
	color: rgb(255, 204, 255);
	color: transparent;
	-webkit-background-clip: text;
	text-shadow: 0px 0px 15px rgba(255,255,255,0.4);
	height: 170px;
	padding-left: 20px;
	padding-top: 20px;
	margin-bottom: -15px;
	font-family: "Myriad Pro";
	font-weight: bold;
	font-size: 115px;
}

#content-wrapper {
	margin: 0px 70px;
}

.button-container {
	background: linear-gradient(to bottom, rgba(137,137,137,1) 0%,rgba(125,125,125,1) 50%,rgba(113,113,113,1) 51%,rgba(80,80,80,1) 100%);
	width: 760px;
	height: 140px;
	margin: 20px 0px;
	color: rgb(200,200,200);
	border-radius: 12px;
}

.button-container h2{
	height: 140px;
	font-family: "Rounds Black";
	font-size: 80;
	margin: 0;
	text-align: center;
	line-height: 140px;
}


#osu:hover {
	background: linear-gradient(to bottom, rgba(250,238,248,1) 0%,rgba(244,212,239,1) 50%,rgba(233,191,228,1) 51%,rgba(220,116,202,1) 100%);
	color: rgb(255, 77, 255);
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}
#projects:hover {
	background: linear-gradient(to bottom, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
	color: rgb(0, 0, 204);
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}
#links:hover {
	background: linear-gradient(to bottom, rgba(253,240,235,1) 0%,rgba(251,219,205,1) 50%,rgba(244,198,180,1) 51%,rgba(243,141,93,1) 100%);
	color: orange;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}