:root {
    font-family: nyt-franklin, Arial, sans-serif;

    h1 {
        font-family: nyt-karnakcondensed, Georgia, serif;
        font-weight: 700;
        font-size: 42px;
    }
    
    h2 {
        font-weight: 200;
        font-size: 28px;
    }
}
main {
    section#puzzle {
        display: flex;
        flex-direction: column;

        font-family: nyt-franklin, sans-serif;
        font-weight: 400;

        .line {
            display: flex;
            flex-direction: row;

            .character {
                display: flex;
                flex-direction: column;

                width: 24px;
                max-width: 24px;

                align-items: center;

                .encrypted {
                    font-size: 14px;
                }

                input.plain {
                    border: none;
                    border-bottom: 1px solid currentColor;
                    outline: none;
                    background: transparent;
                    width: 1em;
                    max-width: 1em;
                    text-align: center;
                    font-size: inherit;
                    padding: 0;

                    font-size: 28px;
                }
            }
        }
    }

    section#frequencies {
        margin-top: 32px;

        #frequency-chart {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            gap: 8px;

            .entry {
                display: flex;
                flex-direction: column;
                align-items: center;

                .letter, .count {
                    font-family: nyt-franklin, sans-serif;
                    font-weight: 500;
                    font-size: 16px;
                }

                .bar {
                    width: 24px;
                    background-color: #4A90E2;
                    border-radius: 4px;
                    transition: height 0.3s ease;
                }
            }
        }
    }   
}