@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;
}