{"size": 1483, "ext": "js", "max_stars_repo_path": "src/components/Banner/bannerOne/styles.js", "max_stars_repo_name": "alexrodriguez2498/intellisoft-web-page", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Banner/bannerOne/styles.js", "max_issues_repo_name": "alexrodriguez2498/intellisoft-web-page", "max_issues_repo_issues_event_min_datetime": "2021-11-22T00:54:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-05T23:35:06.000Z", "max_forks_repo_path": "src/components/Banner/bannerOne/styles.js", "max_forks_repo_name": "alexrodriguez2498/intellisoft-web-page", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 21.1857142857, "max_line_length": 58, "alphanum_fraction": 0.6264329063}
import styled from 'styled-components';

export const Section = styled.section`
  padding-right: 1rem;
  padding-top: 8rem;
  padding-bottom: 4rem;
  & .centered-column {
    align-self: center;
  }
  & .text {
    margin: 1rem 0;
    @media (max-width: 600px) {
      text-align: center;
    }
  }
  & .yellow-text {
    color: #F79416;
    margin: 0;
    @media (max-width: 600px) {
      text-align: center;
    }
  }
`;

export const BannerTextOne = styled.h1`
  margin: 0;
  display: flex;
  align-items: center;
  @media (max-width: 600px) {
    text-align: center;
  }
`;

export const FilledButton = styled.button`
  padding: 1rem ;
  margin: 0.5rem;
  border-radius: 5px;
  font-weight: bold;
  background-color: ${props => props.theme.colors.yellow};
  border: 1px solid ${props => props.theme.colors.yellow};
    &:hover {
      transition: background-color ease-in .2s;
      background-color: transparent;
      color:  ${props => props.theme.colors.yellow};
    }
  @media (max-width: 600px) {
    width: 100%;
  }
`;

export const OutlinedButton = styled.button`
  padding: 1rem ;
  margin: 0.5rem;
  border-radius: 5px;
  background-color: white;
  color: ${props => props.theme.colors.blue};
  font-weight: bold;
  border: 1px solid ${props => props.theme.colors.blue};
  &:hover {
    transition: background-color ease-in .2s;
    background-color: ${props => props.theme.colors.blue};
    color:  white;
  }
  @media (max-width: 600px) {
    width: 100%;
  }
`;


