@import url('fonts.googleapis.com/css?family=Montserrat');

/* Reset */ 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;

} /* HTML5 display-role reset for older browsers */ 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;

}

/* Style */ body {

background: #3498db;
font-size: 16px;
color: #fff;
text-shadow: #fff 0px 0px 10px;
position: absolute; 
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
font-family: 'Montserrat', sans-serif;

}

.container {

height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;

}

.name {

display: block;
text-align: center;
font-size: 3rem;
line-height: 3rem;
margin-bottom: 1rem;
text-shadow: #fff 0px 0px 10px;

}

.description {

display: block;
text-align: center;
font-size: 1.5rem;
line-height: 1.5rem;
margin-bottom: 1rem;
text-shadow: #fff 0px 0px 10px;

}

.buttons {

display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 75vw;

}

.button, .button:before, .button .fab {

transition: all 0.35s;
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);

} .button:before {

top: 90%;
left: -110%;

} .button .fab {

transform: scale(0.8);

}

/* Brand */ .button.facebook:before {

background-color: #3b5998;

} .button.facebook .fab {

color: #3b5998;

} .button.twitter:before {

background-color: #3cf;

} .button.twitter .fab {

color: #3cf;

} .button.google:before {

background-color: #dc4a38;

} .button.google .fab {

color: #dc4a38;

} .button.dribbble:before {

background-color: #f26798;

} .button.dribbble .fab {

color: #f26798;

} .button.github:before {

background-color: #1f1f1f;

} .button.github .fab {

color: #1f1f1f;

} .button.instagram:before {

background-color: #125688;

} .button.instagram .fab {

color: #125688;

}

.button:focus:before, .button:hover:before {

top: -10%;
left: -10%;

} .button:focus .fab, .button:hover .fab {

color: #fff;
transform: scale(1);

} .button {

display: inline-block;
background-color: #fff;
width: 5rem;
height: 5rem;
line-height: 5rem;
margin: 1rem;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 28%;
border: none;
box-shadow: 0 0 10px 1px white;

} .button:before {

content: '';
width: 120%;
height: 120%;
position: absolute;
transform: rotate(45deg);

} .button .fab {

font-size: 38px;
vertical-align: middle;

}