text: import styled from 'styled-components';
  import { blue } from '@carbon/colors';
  
  export const SectionTitle = styled.h3`
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  `;
  
  export const Paragraph = styled.p`
    white-space: pre-wrap;
  `;
  
  export const Pill = styled.span`
    display: inline-block;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: ${blue[20]};
    color: ${blue[70]};
    border-radius: 2px;
    font-weight: bold;
  `;
  export const HeaderContainer = styled.div`
    display: flex;
    justify-content: space-between;
    @media (max-width: 640px) {
      display: ${({ isHome }) => (!isHome ? 'none' : 'flex')};
      flex-direction: column;
    }
  `;
  
  export const Header = styled.div`
    display: flex;
    @media (max-width: 640px) {
      flex-direction: column;
    }
  `;
  
  export const Image = styled.img`
    width: 200px;
    margin-right: 1rem;
    border-radius: 2px;
  `;
  
  export const ViewResumeLink = styled.a`
    display: flex;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    align-items: center;
    margin-top: 1rem;
    border: 2px solid #2ecc40;
    background-color: rgba(46, 204, 64, 0.3);
    transition: background-color 250ms ease;
    &:hover {
      background-color: #2ecc40;
    }
    svg {
      fill: white;
      margin-left: 8px;
    }
  `;