style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/***** Styles *****/
html {
			width: 100%;
			height: 100%;
			-webkit-font-smoothing: antialiased;
		}
body { width: 100%; padding: 0; margin: 0; background: #000; text-align: center; background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: 100%, 100%;
-moz-background-size: 100%, 100%;
-o-background-size: 100%, 100%;
background-size: cover;
}

p { font-size: 1.2em; line-height: 1.35em; color: #fff; padding: 0; margin: 60px 0 40px; font-family: 'helvetica neue', helvetica, arial, sans-serif; font-weight: 200; }
p strong { font-weight: 500; }

a { color: #ff6401; padding-bottom:5px; text-decoration: none;}
a:hover { color: #fff; -webkit-transition:all 0.2s ease-in-out;}

ul { display: block;}
ul li { display: inline-block; margin: 0 10px; }
ul li a { opacity: 1; }
ul li a:hover { opacity: 0.5; -webkit-transition:all 0.2s ease-in-out;}

ul li.envelope a { width: 33px; height: 33px; display: block; background: transparent url(/images/envelope.png) top center no-repeat; text-indent: -9999px; }
ul li.github a { width: 33px; height: 33px; display: block; background: transparent url(/images/github.png) top center no-repeat; text-indent: -9999px; }
ul li.linkedin a { width: 33px; height: 33px; display: block; background: transparent url(/images/linkedin.png) top center no-repeat; text-indent: -9999px; }
ul li.instagram a { width: 33px; height: 33px; display: block; background: transparent url(/images/instagram.png) top center no-repeat; text-indent: -9999px; }
ul li.soundcloud a { width: 33px; height: 33px; display: block; background: transparent url(/images/soundcloud.png) top center no-repeat; text-indent: -9999px; }

.logo h1 a { width: 98px; height: 80px; display: block; background: url('/images/logo.png') top center no-repeat; text-indent: -9999px; padding: 0; margin: 0px auto -30px; border: none; text-align: center; opacity: 1;}
.logo h1 a:hover { opacity: 0.5; -webkit-transition:all 0.2s ease-in-out; }
.content { max-width: 480px; padding: 3px 20px; display: block; margin: 10% auto 10%; background-color: rgba(51,51,51,0.6)}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(31, 31, 31, .75);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;

		opacity: 0;
		transition: opacity 1s;

		font-family: 'helvetica neue', helvetica, arial, sans-serif;
		font-weight: 200;
		font-size: 1em;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(31, 31, 31, .75); transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
		opacity: 1;
}