import styled from 'styled-components';
import { blue } from './GlobalStyles';

const Title = styled.h2`
  font-size: 24px;
  font-weight: bold;
  line-height: 40px;
`;

export const FeaturedTitle = styled.h2`
  font-size: 24px;
  color: #3f4277;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-shadow: 0 0 2px rgba(42, 44, 208, 0.15), 0 0 2px ${blue};
`;

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  position: fixed;
  border: 1px solid rgb(204, 204, 204);
  background: rgb(255, 255, 255);
  overflow: auto;
  border-radius: 4px;
  outline: none;
  padding: 20px 50px;
  width: 60%;
  left: 20%;
  height: 450px;
  font-family: "Poppins", sans-serif !important;
  box-shadow: rgb(42 44 208 / 15%) 0px 0.8rem 3.2rem 0px;
`;

export default Title;
