How to use the @xstyled/styled-components.a function in @xstyled/styled-components

translateZ(-8px)
               rotateY(2deg)
               translate(0px)
               rotate(0deg);
  }
  to {
    transform: rotate(360deg)
               perspective(200px)
               translateZ(-8px)
               rotateY(2deg)
               translate(0px) 
               rotate(-360deg);
  }
`

const ProjectImageLink = styled.a`
  display: block;
  position: relative;
  width: 30%;
  padding-top: 3%;

  animation: ${rotateRight} 5s linear infinite;

  > svg {
    position: absolute;
    transition: base;
    top: 0;
    width: 118%;
    height: auto;
  }
`

padding: 0;

    &::before {
      display: inline-block;
      content: '★';
      font-size: 0.6em;
      margin-right: 2;
      vertical-align: 15%;
      color: accent;
      animation: ${move} 500ms infinite;
      animation-direction: alternate-reverse;
    }
  }
`

export const CardLink = styled.a`
  ${Card} {
    transition: base;
  }

  &:focus {
    outline: none;
  }

  &:focus > ${Card}, &:hover > ${Card} {
    transform: translateY(${th.px(-3)}) scale(1.03);
    box-shadow: ${th.px(7)} ${th.px(7)} ${th.px(36)} rgba(0, 0, 0, 0.12);
    border-color: card-border-hover;
    outline: 0;
  }
`

`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: white;
  }
`

export const TabItemLink = styled.a`
  color: white;
  text-decoration: none;
  padding: 2 3;
  display: block;
  overflow-x: auto;

  ${up(
    'md',
    css`
      padding: 3;
      overflow-x: visible;
    `,
  )}
`

export function RouterTabItem({ children, exact, to }) {

`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: darker;
  }
`

export const TabItemLink = styled.a`
  color: darker;
  text-decoration: none;
  padding: 2 3;
  display: block;
  overflow-x: auto;

  ${up(
    'md',
    css`
      padding: 3;
      overflow-x: visible;
    `,
  )}
`

export function RouterTabItem({ children, exact, to }) {

z-index: 200;
  backdrop-filter: blur(8px);

  ${up(
    'md',
    css`
      position: initial;
      padding: 5 3;
      background-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
    `,
  )}
`

export const NavbarBrandLink = styled.a`
  flex: 0 0 auto;
  cursor: pointer;
  transition: base;
  color: lighter;

  &:hover,
  &:focus {
    color: accent;
    outline: none;
  }
`

export const NavbarBrand = styled.h1`
  font-size: 20;
  font-weight: 500;
  margin: 0;

import styled from '@xstyled/styled-components'

export const Ad = styled.a`
  display: block;
  background-color: darker;
  border-radius: 3;
  padding: 8;
  display: flex;
`

export const AdImg = styled.img`
  width: 130;
  height: 100;
  margin-right: 8;
  flex-shrink: 0;
`

export const AdText = styled.div`
  font-size: 14;

import { Container } from '../components/Container'
import { useLangKey, toEnglish, toFrench } from '../components/I18nContext'

const Copyright = styled.div`
  color: light400;
  font-size: 12;
  font-family: monospace;
`

const Socials = styled.div`
  margin-left: auto;
  margin-right: -2;
  display: flex;
`

const SocialLink = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44;
  width: 44;
  color: lighter;
  transition: base;

  &:hover,
  &:focus {
    outline: none;
    color: accent;
  }
`

const currentYear = new Date().getFullYear()