html, body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: subpixel-antialiased; }

#root {
  width: 100%;
  height: 100%; }

h1, h2, h3, h4, h5 {
  margin: 0; }

.banner {
  height: 100vh;
  position: relative;
  background-color: #333; }

.bannerContent {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center; }

.nameWrapper {
  position: relative;
  width: 420px;
  height: 80px;
  margin: auto; }
  .nameWrapper > svg {
    width: 100%;
    height: 100%; }
  .nameWrapper .border {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke-dasharray: 220 840;
    stroke-dashoffset: -600;
    stroke-width: 8px;
    stroke: #FFF;
    transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s, stroke 1s; }
  .nameWrapper .name {
    color: #FFF;
    top: -65px;
    position: relative;
    font-size: 40px; }
  .nameWrapper:hover .border {
    stroke: #19f6e8;
    stroke-dashoffset: 0;
    stroke-dasharray: 1000; }

.socialLinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 50px; }
  .socialLinks.grey .link > svg .semiCircle {
    fill: #434A54; }
  .socialLinks .link {
    width: 120px;
    height: 120px;
    background-color: #FFF;
    display: flex;
    margin: 0 20px;
    justify-content: center;
    align-items: center;
    border-radius: 20px; }
    .socialLinks .link > svg {
      width: 90px;
      height: 90px; }
      .socialLinks .link > svg .semiCircle {
        transition: fill 1s; }


/*# sourceMappingURL=style.92fb17dc2a6b2d8dbf4f.css.map*/