// Edit the code!
const Button = (props) => {
  return (
    <Box
      backgroundColor="$blue400"
      borderRadius="$pill"
      color="white"
      fontSize="$body"
      fontWeight="600"
      p="$2 $3"
      textDecoration="none"
      transition="all 200ms ease"
      margin="0 $2"
      _hover={{
        boxShadow: '0 5px 15px rgba(0, 0, 0, .12)',
        transform: 'translateY(-2px)',
      }}
      {...props}
    />
  )
};

render(
  <Box display="flex" justifyContent="center">
    <Button as="a" href="/docs/installation">Documentation</Button>
    <Button backgroundColor="transparent" color="$gray400" as="a" href="https://github.com/system-props/system-props">GitHub</Button>
  </Box>
);