@font-face {
    font-family: 'bubblegum_highlight';
    src: url('./BubbleGumPop/bubblegum_pop_highlight.woff2') format('woff2'),
         url('./BubbleGumPop/bubblegum_pop_highlight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bubblegum_vanilla';
    src: url('./BubbleGumPop/bubblegum_pop_vanilla.woff2') format('woff2'),
         url('./BubbleGumPop/bubblegum_pop_vanilla.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bubblegum_shadow';
    src: url('./BubbleGumPop/bubblegum_pop_shadow.woff2') format('woff2'),
         url('./BubbleGumPop/bubblegum_pop_shadow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 400;
  src: url('./DynaPuff/dynapuff-v3-latin-regular.woff2') format('woff2'),
       url('./DynaPuff/dynapuff-v3-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 500;
  src: url('./DynaPuff/dynapuff-v3-latin-500.woff2') format('woff2'),
       url('./DynaPuff/dynapuff-v3-latin-500.woff') format('woff');
}

@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 600;
  src: url('./DynaPuff/dynapuff-v3-latin-600.woff2') format('woff2'),
       url('./DynaPuff/dynapuff-v3-latin-600.woff') format('woff');
}

@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 700;
  src: url('./DynaPuff/dynapuff-v3-latin-700.woff2') format('woff2'),
       url('./DynaPuff/dynapuff-v3-latin-700.woff') format('woff');
}

.dynapuff-med {
    font-family: 'DynaPuff', sans-serif;
    font-weight: 400 !important;
}
.dynapuff-semi {
    font-family: 'DynaPuff', sans-serif;
    font-weight: 500 !important;
}
.dynapuff-bold {
    font-family: 'DynaPuff', sans-serif;
    font-weight: 700 !important;
}

/* Layered Bubblegum Font Effect */
.bubblegum {
    position: relative;
    /* Top Layer: Highlight */
    font-family: 'bubblegum_highlight', sans-serif;
    font-weight: normal;
    z-index: 3;
    padding-right: 0.3rem;
    white-space: nowrap;
}

.bubblegum::before,
.bubblegum::after {
    content: attr(data-text); /* Duplicates text from data-text attribute */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bubblegum::before {
    /* Middle Layer: Vanilla */
    font-family: 'bubblegum_vanilla', sans-serif;
    left: -0.15rem;
    z-index: -1;
}

.bubblegum::after {
    /* Back Layer: Shadow */
    font-family: 'bubblegum_shadow', sans-serif;
    left: -0.075rem;
    z-index: -2;
}

.bubblegum-blue {
    color: #1f6094;
}
.bubblegum-blue::before {
    color: #8bb9d8;
}
.bubblegum-blue::after {
    color: #092e47;
}


.bubblegum-pink {
    color: #ff7bac;
}
.bubblegum-pink::before {
    color: #f9cddf;
}
.bubblegum-pink::after {
    color: #80002f;
}