@font-face {
    font-family: 'MoonBold';
    src: url('fonts/Moon Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'MoonLight';
    src: url('fonts/Moon Light.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansMedium';
    src: url('fonts/OpenSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('fonts/OpenSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansExtraBold';
    src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
}

body {
    font-family: Arial, sans-serif;
}

#app {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}