text: import styled from "styled-components"
  import media from "styled-media-query"
  import { Link } from "gatsby"
  
  export const MenuLinksWrapper = styled.nav`
      ${media.lessThan("large")`
          display: none;
      `}
  `
  
  export const MenuLinksList = styled.ul`
      font-size: 1.2rem;
      font-weight: 200;
  `
  
  export const MenuLinksItem = styled.li`
      padding: .5rem 0;
      
      .active{
          color: var(--highlight);
      }
  `
  export const MenuLinksLink = styled(Link)`
      color: var(--texts);
      text-decoration: none;
      transition: color .5s;
  
      &:hover{
          color: var(--highlight);
      }
  `