Answers

1. The file naming convention is ComponentName.module.css. For example, Footer.module.css would be a CSS module for the Footer component.
2. The problem is that the background color is set to the 'primaryAccent' string rather than the constant. The css prop should be set to the following:

   <button
     css={css`
       background-color: ${primaryAccent1};
     `}
   >
     {children}
   </button>

3. We can use the focus pseudo-class as follows:

   <button
     css={css`
       background-color: ${primaryAccent1};
       :focus {
        outline: none;
       }
     `}
   >
     {children}
   </button>

4. We can use the following styled component:

   export const PageTitle = styled.h2`
     font-size: 15px;
     font-weight: bold;
     margin: 10px 0px 5px;
     text-align: center;
     text-transform...