import { alpha } from '@mui/material';

export const styles = {
  backgroundBox: {
    width: '100%',
    backgroundImage: (theme) =>
      theme.palette.mode === 'light'
        ? 'linear-gradient(180deg, #CEE5FD, #FFF)'
        : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`,
    backgroundSize: { xs: '100% 80px', sm: '100% 96px' },
    backgroundRepeat: 'no-repeat',
  },
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    pt: { xs: 20, sm: 28 },
  },
  description: {
    alignSelf: 'center',
    width: { sm: '100%', md: '80%' },
    textAlign: 'center',
    color: 'text.secondary',
  },
  title: {
    display: 'flex',
    flexDirection: { xs: 'column', md: 'column' },
    alignSelf: 'center',
    textAlign: 'center',
    fontSize: 'clamp(1.25rem, 8vw, 2.5rem)',
  },
  heroStack: { width: { xs: '100%', sm: '70%' } },
  subtitle: {
    fontSize: 'clamp(1.25rem, 8vw, 2.5rem)',
    color: (theme) => (theme.palette.mode === 'light' ? 'primary.main' : 'primary.light'),
  },
};

export default styles;