body {
    background-color: lightgrey;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 36px;
    text-rendering: pixelated;
    image-rendering: pixelated;
}

.font-preview {
    background-color: white;
    overflow: scroll;
    border: 2px dashed black;
    width: 600px;
    height: 200px;
    padding: 8px;
    margin: 4px;
}

@font-face {
    font-family: Pixel Pirate;
    src: url(fonts/Pixelpirate.ttf);
}

#pixel-pirate {
    font-family: 'Pixel Pirate', monospace;
}

@font-face {
    font-family: Bm Emblem;
    src: url(fonts/BmEmblem.ttf);
}

#bm-emblem {
    font-family: 'Bm Emblem', monospace;
}

@font-face {
    font-family: Bm Delico;
    src: url(fonts/BmDelico.ttf);
}

#bm-delico {
    font-family: 'Bm Delico', monospace;
}

@font-face {
    font-family: Pixel Western;
    src: url(fonts/PixelWestern.ttf);
}

#pixel-western {
    font-family: 'Pixel Western', monospace;
}

@font-face {
    font-family: Pixel Cowboy;
    src: url(fonts/PixelCowboy.ttf);
}

#pixel-cowboy {
    font-family: 'Pixel Cowboy', monospace;
}

@font-face {
    font-family: FS Songarak;
    src: url(fonts/FsSongarak1Regular.ttf);
}

#fs-songarak {
    font-family: 'FS Songarak', monospace;
}

@font-face {
    font-family: Grid King;
    src: url(fonts/GridkingRegular.ttf);
}

#grid-king {
    font-family: 'Grid King', monospace;
}

@font-face {
    font-family: Epson Pixeled Regular;
    src: url(fonts/EpsonPixeledRegular.ttf);
}

#ep-regular {
    font-family: 'Epson Pixeled Regular', monospace;
}

@font-face {
    font-family: Capitulos New;
    src: url(fonts/Capitulosnew.ttf);
}

#capitulos-new {
    font-family: 'Capitulos New', monospace;
}