text: import styled from 'styled-components';
  import Clearfix from '~/components/Common/Clearfix';
  
  export const Wrapper = styled.section`
    padding: 100px 0 0;
    @media (max-width: 414px) {
      padding: 70px 16px 0;
    }
  
    & > ${Clearfix} {
      margin: auto;
      max-width: 640px;
    }
  
    button {
      float: right;
    }
  `;
  
  export const BasicInformation = styled.section`
    text-align: center;
    font-size: 16px;
  
    h1 {
      font-size: 2em;
      margin: .67em 0;
    }
  
    p {
      margin: .67em 0;
    }
  
    img {
      border-radius: 50%;
      object-fit: cover;
    }
  `;
  
  export const SocialInformation = styled.section`
    font-size: 20px;
    text-align: center;
  
    a {
      padding: 0 6px;
    }
  `;
  
  export const MDInformation = styled.section`
    font-size: 16px;
  
    h2 {
      font-size: 1.5em;
      margin: .67em 0;
    }
  
    ul {
      margin: 16px 0 0;
      padding: 0 0 0 20px;
      line-height: 2em;
      list-style: disc;
    }
  
    li ul {
      margin: 0 0 16px;;
      padding: 0 0 0 20px;
      list-style: circle;
    }
  
    a {
      text-decoration: underline;
    }
  `;
  
  export const Button = styled.button`
    display: flex;
    align-items: center;
    color: ${({ theme: { color } }) => color};
    background-color: ${({ theme: { backgroundColor } }) => backgroundColor};
    border: 1px solid ${({ theme: { color } }) => color};
    border-radius: 4px;
    outline: 0;
  `;
  