@font-face {
    font-family: 'color';
    src: url('NewFont-Regular.woff2') format('woff2');
  }
  
  @font-face {
      font-family: 'bungee';
      src: url('BungeeColor-Regular_colr.ttf')  format('truetype');
  }
  
  @font-face {
      font-family: 'Rocher';
      src: url('RocherColorGX.woff2') format('woff2-variations');
  }

  @font-face {
    font-family: 'niklaas';
    src: url('NiklaasTest-COLRWhiteSmooth.otf') format('opentype');
}
  
  @font-palette-values --Red {
      font-family: Rocher;
      base-palette: 0;
      override-colors: 0 #ff296b, 1 #00d384, 2 #00d384, 3 #fdee00;
  }
  
  @font-palette-values --Blues {
      font-family: Rocher;
      base-palette: 0;
      override-colors: 0 #002a2b, 1 #004a59, 2 #006cc0, 3 #ecf0ff;
  }
  
      .rocher {
         font-family: Rocher;
         font-palette: --Red;
         font-palette: --Blues;
         font-size: 100px;
         color: #316ea3;
      }
  
      @font-palette-values --TransitionFrom {
      font-family: bungee;
      base-palette: 0;
      override-colors:
          0 black,
          1 #74F87B;
  }
  
  @font-palette-values --Red {
      font-family: bungee;
      base-palette: 0;
      override-colors: 0 #ff296b, 1 #00d384;
  }
  
  @font-palette-values --Lab {
      font-family: bungee;
      base-palette: 0;
      override-colors: 0 #00d384, 1 #fdee00;
  }
  
  @font-palette-values --Purple {
      font-family: bungee;
      base-palette: 0;
      override-colors: 0 #ebedf5, 1 #ff4498;
  }
  
  body {
      font-family: ui-rounded, system-ui, sans-serif;
      margin: 0;
  }
  
  a, a:visited {
      color: black;
  }
  
  .color {
      font-family: 'bungee';
      font-size: 150px;
      letter-spacing: -5px;
      margin-block: 0;
      text-align: center;
    
  }
  
  .purple-palette {
      font-palette: --Purple;
  }
  
  .red-palette {
    font-palette: --Red;
  }
  
  .lab-palette {
    font-palette: --Lab;
  }
  
  .upright {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  
  
  
  .grid {
      display: grid;
      grid-template-columns: max-content max-content;
      justify-content: center;
      align-items: center;
      justify-content: center;
      min-height: 100vh;;
      column-gap: 42px;
      background-color: black;
      color: white;
  }
  
  h2 {
      line-height: 1;
  }
  
  .container {
      min-height: 100vh;
      display: flex;
      gap: 16px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgb(250,250,250);
  }
  
  h2 {
      margin: 0;
  }
  
  @font-face {
      font-family: 'noto';
      src: url('noto-glyf_colr_1.ttf') format('truetype');
      font-style: normal;
      font-weight: 400;
  }
  
  .noto {
      font-family: 'noto';
      font-size: 120px;
  }
  
  @font-face {
      font-family: 'twemoji';
      src: url('TwemojiMozilla.ttf')  format('truetype');
  }
  
  @font-palette-values --Emoji {
      font-family: twemoji;
      base-palette: 0;
      override-colors: 0 #00d384, 1 #00d384, 2 #00d384, 3 #00d384, 4 #00d384, 5 #00d384, 6 #00d384, 7 #00d384, 8 #00d384, 9 #00d384, 10 #00d384;
  }
  
  .emoji {
      font-family: 'twemoji';
      font-size: 100px;
      font-palette: --Emoji;
  }
  
  @font-palette-values --Pinks {
      font-family: Rocher;
      base-palette: 0;
      override-colors: 0 #56004e, 1 #6e0063, 2 #970088, 3 #fff7ff;
  }
  
  .pinks {
      font-palette: --Pinks;
  }
  
  @font-face {
      font-family: 'reem';
      src: url('ReemKufiInk-Regular.ttf') format('truetype');
  }
  
  @font-palette-values --Cats {
      font-family: Catmoji;
      base-palette: 0;
      override-colors: 0 #00d384, 1 #00d384, 2 #00d384, 3 #00d384, 4 #00d384, 5 #00d384, 6 #00d384, 7 #00d384, 8 #00d384, 9 #00d384, 10 #00d384;
  }
  
  @font-face {
      font-family: 'Catmoji';
      src: url('Catmoji2.ttf') format('truetype');
  }
  
  .catmoji {
      font-family: 'Catmoji';
      font-size: 100px;
      font-palette: --Cats;
  }
  
  @font-face {
      font-family: 'Mibster';
      src: url('GimmeMibsterTEST-Color.otf') format('opentype-variations');
  }
  
  @font-palette-values --Multi {
      font-family: Mibster;
      base-palette: 0;
      override-colors: 0 #56004e, 1 #6e0063, 2 #970088, 3 #fff7ff;
  }
  
  @font-palette-values --Grays {
      font-family: Rocher;
      base-palette: 0;
      override-colors: 
      0 #738391,
      1 #ACB6C0,
      2 #ACB6C0,
      3 #DEE1E6;
  }
  
  .grays {
      font-palette: --Grays;
      font-variation-settings: "BVEL" 100, "SHDW" 0;
  }
  
  .mibster {
      font-family: 'Mibster';
      font-size: 50px;
      font-palette: --Multi;
  }
  
  @font-palette-values --Reem {
      font-family: reem;
      base-palette: 0;
      override-colors:
          0 #ff296b,
          1 #00d384,
          2 yellow,
          3 blue;
  }
  
  .reem {
      font-family: 'reem';
      font-size: 120px;
      font-palette: --Reem;
  }
  
  @property --color {
      syntax: '<color>';
      initial-value: rgb(0,0,0);
      inherits: false;
  }
  
  :root {
      --color: #fff;
      --color: rgb(0,0,0);
  }
  
  @keyframes changeColor {
      0% {
         --color: rgb(0,0,0);
      }
      100% {
          --color: rgb(255,255,255);
      }
  }
  
  .animate-bg {
      background-color: var(--color);
      animation: changeColor 5s alternate infinite;
  }

  h1, h2, h3, h4, h5 {
      font-weight: normal;
  }

  @font-face {
    font-family: 'Jel';
    src: url('SugarshopJellTRAILV01-PinkCOLR.otf') format('opentype-variations');
}

@font-palette-values --Strawberry {
    font-family: Jel;
    base-palette: 0;
    override-colors: 0 #ffdfef, 1 #ffdfef, 2 #ffdfef, 3 #ff7aaa, 4 #ff7aaa, 5 #ff67bd, 6 #ff67bd, 7 #ff67bd, 8 #ff67bd, 9 #ff67bd, 10 #ff67bd, 11 #ff7aaa, 12 #ff67bd;
}

@font-palette-values --Lime {
    font-family: Jel;
    base-palette: 0;
    override-colors: 0 #00e564, 1 #00e564, 2 #00e564, 3 #00e564, 4 #009762, 5 #006943, 6 #006b3d, 7 #006b3d, 8 #006b3d, 9 #006b3d, 10 #00975e, 11 #00d384, 12 #00975e;
}

.jel {
    font-family: 'Jel';
    font-size: 190px;
}

.lime .jel {
    font-palette: --Lime;
}

.strawberry {
    background-blend-mode: difference;
}

.strawberry .jel {
    font-palette: --Strawberry;
}

.buttons {
    display: flex;
    gap: 16px;
}

button {
    font-size: 17px;
    font-family: ui-rounded;
    padding: 8px 16px;
    font-weight: 550;
    border-radius: 3px;
}

.lime-btn {
    background-color: #00d384;
    border: 1px solid #00975e;
  }

  .strawberry-btn {
    background-color: #ff7aaa;
    border: 1px solid #ff67bd;
  }

@font-face {
    src: url('BradleyInitialsDJR-Regular.woff2') format("woff2");
    font-family: "Bradley";
}

@font-palette-values --Seafoam {
    base-palette: 5;
    font-family: Bradley;
}

.bradley {
    font-family: 'Bradley';
    font-size: 150px;
    font-palette: --Seafoam;
}

@font-palette-values --SeafoamRemix {
    base-palette: 5;
    font-family: Bradley;
    override-colors: 2 #297a67;
}

.seafoam-remix {
    font-palette: --SeafoamRemix;
}

@font-face {
    font-family: 'Bradleynoncolor';
    src: url('BradleyDJRVariable-VF.woff2') format('woff2-variations');
}

.bradley-non-color {
    font-family: 'Bradleynoncolor';
    font-size: 40px;
}

.bradley-non-color::first-letter {
    font-family: 'Bradley';
    font-size: 104px;
    float: left;
    margin-right: 2px;
}

@font-face {
    font-family: 'MeritBadge';
    src: url('MeritBadge-VF.woff2') format('woff2-variations');
}

@font-palette-values --Neon {
    font-family: MeritBadge;
    override-colors:
        0 black,
        1 rgb(20,20,30),
        2 #00d384;
}

.merit-badge {
    font-family: 'MeritBadge';
    font-size: 75px;
    font-palette: --Neon;
    font-variation-settings: 'SANS' 1, 'wght' 480;
}