export default function StyledButton(props: any) {
    return (
        <div>
            <style jsx>{`
                a {
                    justify-content: center;
                    text-align: center;
                    font-family: "Red Hat Display";
                    display: inline-flex;
                    align-items: center;
                    padding: 0.4em 1em;
                    font-family: "Red Hat Display";
                    font-weight: 500;
                    font-size: 1.1em;
                    border-radius: 8px;
                    background-color: var(--background-color-dark);
                    transition-duration: 0.2s;
                    gap: var(--padding-sm);
                    color: unset;
                    text-decoration: unset;
                } 
                a:hover {
                    background-color: var(--theme-color-500);
                    text-decoration: none;
                    transition-duration: 0.2s;
                }
            `}</style>
            <a href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
        </div>
    )
}