{% extends "common/base.html" %}
{% block title %}Retro Pixel {{ font_config.name }} - Alphabet{% endblock %}
{% block style %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @font-face {
            font-family: retro-pixel-{{ font_config.outputs_name }};
            src: url("retro-pixel-{{ font_config.outputs_name }}.woff2?r={{ build_random_key }}");
        }
        body {
            color: #4b4b4b;
            font-family: retro-pixel-{{ font_config.outputs_name }}, sans-serif;
            font-size: {{ font_config.font_size * 4 }}px;
            line-height: {{ font_config.line_height * 4 }}px;
            word-break: break-all;
            background-image: linear-gradient(180deg, transparent 96%, rgba(0, 0, 0, 0.1) 96%);
            background-size: auto {{ font_config.line_height * 4 }}px;
        }
    </style>
{% endblock %}
{% block body %}
    {{ alphabet }}
{% endblock %}