@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 300;
    src: url('/fonts/KASTELOV - AXIFORMA LIGHT.woff2') format('woff2');
}

@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 500;
    font-style: italic;
    src: url('/fonts/KASTELOV - AXIFORMA MEDIUM ITALIC.woff2') format('woff2');
}

@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 500;
    src: url('/fonts/KASTELOV - AXIFORMA MEDIUM.woff2') format('woff2');
}

@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 400;
    src: url('/fonts/KASTELOV - AXIFORMA REGULAR.woff2') format('woff2');
}

@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 600;
    font-style: italic;
    src: url('/fonts/KASTELOV - AXIFORMA SEMIBOLD ITALIC.woff2') format('woff2');
}

@font-face {
    font-family: 'KastelovAxiforma';
    font-weight: 600;
    src: url('/fonts/KASTELOV - AXIFORMA SEMIBOLD.woff2') format('woff2');
}
body {
    user-select: none; /* Disable text selection for the whole page */
    font-family: 'KastelovAxiforma', sans-serif !important;
    background: #fff5f9;
}

canvas {
    user-select: none; /* Disable text selection for the canvas */
    -webkit-touch-callout: none; /* Disable touch callout on iOS */
    -webkit-user-drag: none; /* Disable element dragging on iOS */
    cursor: crosshair;
    position: relative;
    border: solid 2px #ccc;
    border-radius: 12px;
    width: 100%;
    height: 150px;
    background-color: #ffffff;
}
.canvasContainer { position: relative; display: inline-block; width: auto;}
.canvasContainer:before {
    content: '';
    left: 20px;
    right: 20px;
    bottom: 30px;
    border-top: 1px dashed #000;
    position: absolute;
    opacity: 0.15;
    z-index: 1;
}