body {
}
html {
        font-size: 24px;
    }

        html.font-size--s {
            zoom: 1;
        }

        html.font-size--m {
            zoom: .7;
        }

        html.font-size--l {
            zoom: 1.5;
        }

        html.font-size--xl {
            zoom: 4;
        }

    .menu {
        padding: 24px 1rem;
    }

    .menu__desktop, .menu__mobile {
        display: flex;
        justify-content: center;
    }

    .menu__desktop {
        display: none;
    }

    .menu__item {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        cursor: pointer;
    }

    .menu__burger {
        width: 50px;
        height: 48px;
        position: relative;
        cursor: pointer;
    }

        .menu__burger div {
            position: absolute;
            height: 5px;
            width: 100%;
            background: #333;
            border-radius: 9px;
            left: 0;
        }

            .menu__burger div:nth-child(1) {
                top: 0;
            }

            .menu__burger div:nth-child(2) {
                top: 12px;
            }

            .menu__burger div:nth-child(3) {
                top: 24px;
            }

    .font-switcher {
        display: flex;
        justify-content: center;
        align-items: baseline;
    }

    .font-switcher__size {
        margin: 0.25rem;
        cursor: pointer;
    }

        .font-switcher__size.active, .font-switcher__size:hover {
            text-decoration: underline;
        }

    .font-switcher__size--s {
        font-size: 15px;
    }

    .font-switcher__size--m {
        font-size: 30px;
    }

    .font-switcher__size--l {
        font-size: 40px;
    }

    .font-switcher__size--xl {
        font-size: 90px;
    }