/* ============================================================
   Kids Kingdom - Cursive Letters Page (extra, on top of letters-tool.css)
   Only the letter overlay changes - cursive script font, shows
   both capital + small letter together (e.g. "Aa").
   ============================================================ */
   
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');

.letters-box-letter {
    font-family: 'Petit Formal Script', var(--font-script), cursive;
    font-weight: 400;
    font-size: 4.5rem;
}

.letters-box-letter .small-part {
    font-size: 0.75em;
}






@media (min-width: 1280px) and (max-width: 1400px) {
    .letters-box-letter {
        font-size: 4.6rem;
    }
}

@media (max-width: 1280px) and (min-width: 1024px) {
    .letters-box-letter {
        font-size: 3.5rem;
    }
}


@media (max-width: 1023px) and (min-width: 768px) {
    .letters-box-letter {
        font-size: 3rem;
    }
}


@media (max-width: 767px) {
    .letters-box-letter {
        font-size: 3.6rem;
    }
}


@media (max-width: 580px) {
    .letters-box-letter {
        font-size: 2.53rem;
    }
}



@media (max-width: 420px) {
    .letters-box-letter {
        font-size: 2.4rem;
        font-weight: 500;
    }
}