import { jsx } from '@emotion/core'
render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    }}
  >
    This has a hotpink background.
  </div>
)

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
const color = 'darkgreen'
render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

import { css } from '@emotion/core'
const titleStyle = css({
  height: 200
})
const subtitleStyle = css`
  height: 60px;
`

import styled from '@emotion/styled'
const Link = styled('a')`
  color: red;
`