import styled from 'styled-components';

export const Title = styled('p')<{ light?: boolean; align?: string }>`
  font-size: 1.35rem;
  color: ${(props) =>
    props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
  margin: 5px;
  white-space: nowrap;
  text-align: ${(props) => (props.align ? props.align : 'center')};
`;

export const Subtitle = styled('p')<{ light?: boolean; align?: string }>`
  font-size: 1.2rem;
  color: ${(props) =>
    props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
  margin: 5px;
  white-space: nowrap;
  text-align: ${(props) => (props.align ? props.align : 'center')};
`;

export const Body = styled('p')<{ light?: boolean; align?: string }>`
  font-size: 1.2rem;
  color: ${(props) =>
    props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
  margin: 5px;
  text-align: ${(props) => (props.align ? props.align : 'center')};
`;