.colorful-title span {
    display: inline-block;
    font-weight: bold;
    
    /* This adds the thin black border */
    -webkit-text-stroke: 1.8px #000000; 
    
    /* Optional: Improves readability with the border */
    letter-spacing: 0.02em; 
    
    /* Keeps the stroke sharp on high-res screens */
    paint-order: stroke fill;
}

/* Your existing color nth-child selectors stay the same below this */
.colorful-title span:nth-child(4n+1) { color: #4354EF; }
.colorful-title span:nth-child(4n+2) { color: #44C087; }
.colorful-title span:nth-child(4n+3) { color: #FF91A7; }
.colorful-title span:nth-child(4n+4) { color: #FD5644; }

.one-color-text span {
    font-weight: bold;
    
    /* This adds the thin black border */
    -webkit-text-stroke: 1.8px #000000; 
    
    /* Optional: Improves readability with the border */
    letter-spacing: 0.02em; 
    
    /* Keeps the stroke sharp on high-res screens */
    paint-order: stroke fill;
}

.title-caramel {
    font-family: "Super Caramel";
    font-style: normal;
    font-weight: 400;
    /* The thin black border around the letters */
    -webkit-text-stroke: 1.8px #000000;
    
    /* The hard-edged offset shadow */
    /* Adjust the 4px values if you want the shadow thicker or thinner */
    text-shadow: 4px 4px 0px #000000;
    
    /* Ensures the colors and stroke render in the correct order */
    paint-order: stroke fill;
    
    /* Optional: Small letter spacing to prevent the shadows from overlapping too much */
    letter-spacing: 0.05em;
    
    /* Just in case: ensures the color of the text itself remains the main yellow */
    color: #F8D14E; 

    /* COMBINED TRANSFORM: Skew for the tilt + ScaleY for the height */
    /* 1.1 = 110% height. Increase to 1.2 if you want them even taller */
    transform: skewX(-7deg) scaleY(1.1);
    
    /* Crucial: helps the browser calculate the transform correctly */
    display: inline-block;
    transform-origin: bottom center;
}

.onecolor-title {    
    /* This adds the thin black border */
    -webkit-text-stroke: 0.4px #000000; 
    
    /* Optional: Improves readability with the border */
    letter-spacing: 0.02em; 
}