html.unicorn-battle {
  &:root {
    /* Variable Overrides */
    --color-palette-branding-normal: #3ccaff;
    --color-palette-branding-lucent: #260c5a;
    --app-styling-background: #000514;
    --app-styling-slate-level-1: #043257;
    --card--background: #043257;
    --card--color: #fff;
    /* --header--background: #3ccaff; */
    --header--background: var(--brand-rainbow-blue);
    --input-buttons-primary-bg-default: #3ccaff;
    --input-buttons-primary-text-default: #000;
    --input-buttons-primary-bg-hover: #0ea5e9;
    --input-buttons-primary-text-hover: #000;

    /* Brand Colours */
    --brand-rainbow-red: rgb(216, 85, 51);
    --brand-rainbow-orange: rgb(226, 162, 66);
    --brand-rainbow-yellow: rgb(217, 222, 72);
    --brand-rainbow-blue: rgb(83, 142, 203);
    --brand-rainbow-indigo: rgb(114, 65, 248);
    --brand-rainbow-pink: rgb(218, 90, 157);
    --brand-rainbow-light-pink: rgb(224, 145, 194);

    --brand-unicorn-white: rgb(255, 255, 255);
    --brand-unicorn-white-shadow: rgb(182, 180, 219);
    --brand-unicorn-pink: rgb(254, 103, 200);
    --brand-unicorn-pink-shadow: rgb(204, 60, 191);
    --brand-unicorn-gold: rgb(255, 231, 92);
    --brand-unicorn-dark: rgb(50, 66, 94);

    /* Fonts */
    --primary-font-family: 'Yusei Magic', sans-serif;

    & body {
      font-family: var(--primary-font-family);
    }

    & ul {
      text-align: left;

      & li {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        text-wrap: balance;

        &::before {
          content: '';
          width: 30px;
          height: 30px;
          background-image: url('/images/unicorn-battle/star-1.png');
          background-size: 30px;
          background-repeat: no-repeat;
        }

        &:nth-child(n + 2)::before {
          background-image: url('/images/unicorn-battle/star-3.png');
        }

        &:nth-child(n + 3)::before {
          background-image: url('/images/unicorn-battle/star-2.png');
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

@font-face {
  font-family: "Yusei Magic";
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/YuseiMagic/YuseiMagic-Regular.woff') format('woff');
}