@font-face {
    font-family: 'UKNumberPlate';
    src: url('/assets/fonts/UKNumberPlate.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CharlesWright-Bold';
    src: url('/assets/fonts/CharlesWright-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.singapore-license-plate {
    --plate-scale: 1;
    --plate-font-size: calc(2.3rem * var(--plate-scale));
    --plate-border-width: calc(2px * var(--plate-scale));
    --plate-border-radius: calc(5px * var(--plate-scale));
    --plate-padding-top: calc(1.5px * var(--plate-scale));
    --plate-padding-x: calc(1.5px * var(--plate-scale));
    --plate-padding-bottom: calc(5px * var(--plate-scale));
    --plate-inner-radius: calc(4px * var(--plate-scale));
}

.singapore-license-plate.regular-scheme {
    background-color: #202020;
    border: var(--plate-border-width) solid #000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    padding: var(--plate-padding-top) var(--plate-padding-x) var(--plate-padding-bottom);
    border-radius: var(--plate-border-radius);
    width: max-content;
}
.singapore-license-plate .inner-plate {
    border-radius: var(--plate-inner-radius);
    font-weight: 80;
    font-size: var(--plate-font-size);
    font-family: 'CharlesWright-Bold', 'UKNumberPlate', sans-serif;
    background: linear-gradient(180deg, #0d0d0d 0%, #000 100%);
    color: #f4f4f4;
    word-spacing: -0.1em;
    line-height: 1;                 /* or 1em / 2.2rem for exact control */
    display: inline-block;
    padding: 0.1em 0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.singapore-license-plate.in-image {
    position: absolute;
    top: 15px;
    left: 15px;
    --plate-scale: 0.65;
}