text: // import media from '../styles/media'
  import styled from "styled-components"
  import { Link } from "gatsby"
  import React, { Component } from "react"
  import typographies from "../styles/typography_styles"
  import media from "../styles/media"
  // import { library } from "@fortawesome/fontawesome-svg-core"
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
  import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons"
  
  const { colors } = typographies
  
  
  
  const NavStyle = styled(Link)`
    float: right;
    padding: 1rem;
    font-size: 2rem;
    ${media.tab_land`
        font-size: 2rem;
      `}
    display: inline-block;
    font-weight: 300;
    border-radius: 1rem;
    border: 1px solid rgba(99, 71, 151, 0);
    transition: all 0.2s;
    &:hover {
      border: 1px solid rgba(99, 71, 151, 0.1);
      color: ${colors.main};
    }
  
    margin-top: 0.3rem;
    margin-right: 0;
    &:not(:first-child) {
      margin-right: 1rem;
    }
  `
  
  const NavLink = ({ children, ...props }) => {
    return <NavStyle to={props.to}>{children}</NavStyle>
  }
  
  const headerStyles = {
    NavLink
  }
  
  export default headerStyles
  